简易贪吃蛇
步骤
- 先创建一个盒子,即蛇活动的范围及食物产生的范食物围
- 封装一个随机产生食物的函数
- 先创建一个蛇头,用键盘来控制移动方向
- 吃到食物,食物重新生成一个随机的位置,蛇的身体加1
- 设定判断条件
代码展示
1. html代码
<p>吃到食物: <em>0</em> 个</p>
<div class="wrap">
<ul>
<li class="head"></li>
<li></li>
</ul>
<div class="food">
<span></span>
</div>
</div>
2.在js中先获取元素及创建所需变量
var wrap = document.querySelector('.wrap');
var ul = document.querySelector('ul');
var food = document.querySelector('.food');
var head = document.querySelector('.head');
var span = document.querySelector('span');
var em = document.querySelector('em');
var time1,time2;
var flag = 1;//游戏结束标志
var preDir = 'right';// 设置初始方向
var count = 0;//计数器
3.封装食物随机生成函数
function Food(){//改变食物出现位置
var c = false;
var lis = document.querySelectorAll('li');
do{
var numL = (Math.ceil(Math.random()*40)- 1) * 20;
var numT = (Math.ceil(Math.random()*20)- 1) * 20;
for(var i =0; i < lis.length; i++){
if(numL == lis[i].offsetLeft && numT == lis[i].offsetTop){
c = true;
}
}
}while(c)//判断食物出现位置,如果出现位置在蛇身上,重新生成一个
span.style.left = numL + 'px';
span.style.top = numT + 'px';
};
4.蛇移动函数
function move(direction) {//根据方向移动
clearInterval(time1);
time1 = setInterval(function () {
var speedL = head.offsetLeft;//获取蛇头的位置
var speedT = head.offsetTop;
var lis = document.querySelectorAll('ul li');//重新获取lis
for(var i = lis.length-1; i > 0 ;i--){//移动,每次后一个的坐标移动到前一个lis的坐标
lis[i].style.left = lis[i - 1].style.left;
lis[i].style.top = lis[i - 1].style.top;
}
if(direction == 'right'){
speedL += 20;
}
if(direction == 'left'){
speedL -= 20;
}
if(direction == 'top'){
speedT -= 20;
}
if(direction == 'bottom'){
speedT += 20;
}
head.style.left = speedL + 'px';
head.style.top = speedT + 'px';
var span = document.querySelector('span');
if(speedL == span.offsetLeft && speedT == span.offsetTop){//如果吃到食物
Food();
createBody(lis[count]);//创建身体
count++;
em.innerText = count;
}
judge(speedL,speedT,lis);//判断
},200);
}
5.蛇吃到食物新增一节身体
function createBody(dom){//吃到食物添加身体
var li = document.createElement('li');
li.style.left = dom.style.left;
li.style.top = dom.style.top;
ul.appendChild(li);
}
6.判断游戏结束条件
function judge(speedL,speedT,lis){//判断结束条件
//判断蛇头是否撞到边界
if(speedL < 0 || speedL > wrap.clientWidth - head.offsetWidth ||(speedT < 0 || speedT > wrap.clientHeight - head.offsetHeight )){
alert('游戏结束,成绩为:' + count)
clearInterval(time1);
flag = 0;
return false;
}
//判断蛇头是否撞到自己
for(var i = 1; i < lis.length; i++){
if((speedL == lis[i].offsetLeft && speedT == lis[i].offsetTop )){
alert('游戏结束,成绩为:' + count)
clearInterval(time1);
flag = 0;
return false;
}
}
}
7.键盘控制方向
document.onkeydown = function(ev){//键盘控制方向
if(!flag){//判断当前游戏是否结束
return false;
}
var e = ev || window.event;
switch(e.keyCode){//判断当前方向,跟键盘控制方向是否相反
case 37:
if(preDir == 'right'){move('right');}
else{preDir = 'left';move('left');}
break;
case 38:
if(preDir == 'bottom'){move('bottom');}
else{preDir = 'top'; move('top');}
break;
case 39:
if(preDir == 'left'){move('left');}
else{preDir = 'right'; move('right');}
break;
case 40:
if(preDir == 'top'){move('top');}
else{preDir = 'bottom'; move('bottom');}
break;
default:move(preDir);
}
}