这是js代码写的一个小游戏贪吃蛇，用了css,html,js原生代码主要是
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0;
padding:0;
}
.startPage{
display:none;
width:100%;
z-index: 999;
height:1000px;
position: absolute;
left: 0;
top: 0;
}
.startBtn{
background-image: url(startgame.png);
height: 170px;
width: 200px;
background-size:100% 100%;
cursor:pointer;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.wrapper{
width: 100%;
height: 1000px;
background-image: url(background.png);
background-size: 100% 100%;
position: relative;
}
.left-side{
width:24%;
position:absolute;
height: 1000%;
border-right: 1px black solid;
}
.left-side img{
display:none;
margin-left:50px;
margin-top:50px;
}
.main{
position:absolute;
width:50%;
left:25%;
height: 90%;
border:1px solid black;
}
.header{
width:100%;
height: 80px;
text-align: center;
}
.score{
line-height: 80px;
color: #000000;
font-size: 20px;
font-weight: bolder;
}
.content{
position:absolute;
width:79.5%;
height: 36.5%;
left:10%;
top:34%;
border: 1px solid red;
}
.loser{
display:none;
position:100%;
height: 100px;
top:0;
left:0;
}
.con{
background-image: url(score.png);
background-size: 100% 100%;
height: 300px;
width: 400px;
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom:0;
border-radius:20px;
}
.loserScore{
display: block;
height: 30px;
width:40px;
position: absolute;
top:42%;
left:30%;
color: black;
font-size: 30px;
font-weight: bolder;
}
.close{
background-image: url(esc.png);
position: absolute;
top:0;
right:0;
height: 100px;
width:100px;
background-size:100% 100%;
cursor:pointer;
}
.food{
background-image: url(food.png);
background-size:100% 100%;
}
.head{
background-image:url(head.png);
background-size:100% 100%;
}
.body{
background-image:url(body.png);
background-size:100% 100%;
}
</style>
</head>
<body>
<div class="startPage" id="startPage">
<div class="startBtn" id="startBtn"></div>
</div>
<div class="wrapper">
<div class="left-side">
<img src="start.png" id="startP">
</div>
<div class="main">
<div class="header">
<div class="score">
分数：
<span id="score"></span>
</div>
</div>
<div class="content" id="content"></div>
</div>
</div>
<div class="loser" id="lose">
<div class="con">
<div class="close" id="close"></div>
<span class="loserScore" id="loserScore"></span>
</div>
</div>
</body>
<script>
//1.点击开始游戏--》startPage消失--》游戏开始
//2.随机出现食物，出现三节贪吃蛇开始运动。
//3.上下左右--》改变运动方向
//4.判断吃到的食物--》食物消失，蛇加一。
//5.判断游戏结束，弹出框。
var startP = document.getElementById("startP");
var startBtn = document.getElementById("startBtn");
var startPage= document.getElementById("startPage");
var close = document.getElementById("close");
var loserScore = document.getElementById("loserScore");
var lose = document.getElementById('lose');
var scoreBox = document.getElementById('score');
var content = document.getElementById('content');
var startPaushBool = true;
//var startGameBool = true;
var snakeMove;
var speed = 300;
init();
function init(){
//地图。
this.mapW= parseInt(getComputedStyle(content).width);
this.mapH= parseInt(getComputedStyle(content).height);
this.mapDiv = content;
//食物
this.foodW = 20;
this.foodH = 20;
this.foodX = 0;
this.foodY = 0;
//蛇
this.snakeW = 20;
this.snakeH = 20;
this.snakeBody = [[3,1,'head'],[2,1,'body'],[1,1,'body']];
//游戏属性；
this.direct = 'right';
this.left = false;
this.right = false;
this.up = true;
this.down = true;
this.score = 0;
startPage.style.display = "block";
startBtn.onclick = function(){
startGame();
}
}
function startGame(){
startPage.style.display = "none";
startP.style.display = "block";
food();
snake();
bindEvent();
}
function food(){
var food = document.createElement('div');
food.style.width = this.foodW + 'px';
food.style.height = this.foodH + 'px';
food.style.position = 'absolute';
this.foodX = Math.floor(Math.random()*(this.mapW/20));
this.foodY = Math.floor(Math.random()*(this.mapH/20));
food.style.left = this.foodX * 20 + 'px';
food.style.top = this.foodY * 20 + 'px';
this.mapDiv.appendChild(food).setAttribute('class','food');
}
function snake(){
for(var i = 0; i <= (this.snakeBody.length - 1); i++){
var snake = document.createElement("div");
snake.style.width = this.snakeW + 'px';
snake.style.height = this.snakeH + 'px';
snake.style.position = 'absolute';
snake.style.left = this.snakeBody[i][0] * 20 + 'px';
snake.style.top = this.snakeBody[i][1] * 20 + 'px';
snake.classList.add(this.snakeBody[i][2]); //classList.add()在元素中添加一 个或多个类 名元素类名重复的情况下者不添加。
this.mapDiv.appendChild(snake).classList.add('snake');
switch(this.direct){
case 'right':
break;
case 'down':
snake.style.transform = 'rotate(90deg)';
break;
case 'left' :
snake.style.transform = 'rotate(180deg)';
break;
case 'up' :
snake.style.transform = 'rotate(270deg)';
break;
default:
break;
}
}
}
function move(){
for(var i = this.snakeBody.length - 1; i > 0 ; i--){
this.snakeBody[i][0] = this.snakeBody[i - 1][0];
this.snakeBody[i][1] = this.snakeBody[i - 1][1];
}
switch(this.direct){
case 'right':
this.snakeBody[0][0] += 1;
break;
case 'down':
this.snakeBody[0][1] += 1;
break;
case 'left' :
this.snakeBody[0][0] -= 1;
break;
case 'up' :
this.snakeBody[0][1] -= 1;
break;
default:
break;
}
removeClass('snake');
snake();
if(this.snakeBody[0][0] == this.foodX && this.snakeBody[0][1] == this.foodY){
var snakeEndX = this.snakeBody[this.snakeBody.length - 1][0];
var snakeEndY = this.snakeBody[this.snakeBody.length - 1][1];
switch(this.direct){
case 'right':
this.snakeBody.push([snakeEndX - 1,snakeEndY,'body']);
break;
case 'down':
this.snakeBody.push([snakeEndX ,snakeEndY - 1,'body']);
break;
case 'left' :
this.snakeBody.push([snakeEndX + 1,snakeEndY,'body']);
break;
case 'up' :
this.snakeBody.push([snakeEndX ,snakeEndY + 1,'body'])
break;
default:
break;
}
this.score += 1;
scoreBox.innerHTML = this.score;
removeClass('food');
food();
}
if(this.snakeBody[0][0] >= this.mapW/20 || this.snakeBody[0][0] < 0){
relodGame();
}
if(this.snakeBody[0][1] >= this.mapH/20 || this.snakeBody[0][1] < 0){
relodGame();
}
var snakeHX = this.snakeBody[0][0];
var snakeHY = this.snakeBody[0][1];
for(var i = 1; i < this.snakeBody.length; i++){
if(snakeHX == snakeBody[i][0] && snakeHY == snakeBody[i][1]){
relodGame();
}
}
}
function relodGame(){
removeClass('snake');
removeClass('food');
clearInterval(snakeMove);
this.snakeBody = [[3,1,'head'],[2,1,'body'],[1,1,'body']];
this.direct = 'right';
this.left = false;
this.right = false;
this.up = true;
this.down = true;
loserScore.innerHTML = this.score;
this.score = 0;
scoreBox.innerHTML = this.score;
lose.style.display = "block";
startEndGame();
}
function removeClass(className){
var ele = document.getElementsByClassName(className);
while(ele.length > 0){
ele[0].parentNode.removeChild(ele[0]);
}
}
function setDerict(code){
switch(code){
case 37:
if(this.left){
this.direct = 'left';
this.left = false;
this.right = false;
this.up = true;
this.down = true;
}
break;
case 38:
if(this.up){
this.direct = 'up';
this.left = true;
this.right = true;
this.up = false;
this.down = false;
}
break;
case 39:
if(this.right){
this.direct = 'right';
this.left = false;
this.right = false;
this.up = true;
this.down = true;
}
break;
case 40:
if(this.down){
this.direct = 'down';
this.left = true;
this.right = true;
this.up = false;
this.down = false;
}
break;
default:
break;
}
}
function bindEvent(){
document.onkeydown = function(e){
var code = e.keyCode;
setDerict(code);
}
close.onclick = function(){
lose.style.display = "none";
startPage.style.display = "block";
}
snakeMove = setInterval(function(){
move();
},speed);
startP.onclick = function(){
if(startPaushBool){
startP.setAttribute('src',"stop.png");
startPaushBool = false;
clearInterval(snakeMove);
}else{
startP.setAttribute('src',"start.png");
startPaushBool = true;
bindEvent();
}
}
}
</script>
</html> |
|
收藏
淘帖
踩
