js贪吃蛇学习心得

视频学做js贪吃蛇的收获

前言：暑假一个人呆在寝室里面无聊，就在网上找了一段js代码学做贪吃蛇的视频，跟着敲完之后想对这次制作过程进行一次总结。
大体布局：背景图（留有运动空间），开始按钮，蛇头图片，蛇身图片，食物图片，计分图片。

运行原理大致概括：背景图片布满整个网页；开始按钮则位于最顶层（点击之后则自动消失且执行游戏开始的代码）；利用函数绘制蛇（包括头和身体），初始为向右运动，利用定时器函数刷新页面制造蛇移动的现象；食物图片初始化，且当蛇头碰到食物之后食物图片可以随机改变位置（利用了x和y轴来判断是否碰撞）；当蛇头超过运行区域的x轴和y轴的范围（即撞到边界）或与自身的x轴或y轴重合（即碰到自己）时则游戏结束，被隐藏的游戏结束图片显示出来，且点击取消按钮之后游戏开始界面重新显示出来，个人还根据喜好加了一些音效的作用。

部分代码介绍：
初始函数：function init(){
//地图
this.mapW=parseInt(getComputedStyle(content).width);
this.mapH=parseInt(getComputedStyle(content).height);
this.mapDiv=content;
//食物
this.foodW=30;
this.foodH=30;
this.foodx=0;
this.foody=0;
//蛇
this.snakeW=30;
this.snakeH=30;
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;
startGame();
}

食物构造函数：
function food() {
var food=document.createElement(“div”); //创建一个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/30));//设置坐标x值
this.foody=Math.floor(Math.random()(this.mapH/30));//设置坐y标值
food.style.left=this.foodx30+‘px’;
food.style.top=this.foody30+‘px’;
this.mapDiv.appendChild(food).setAttribute(‘class’,‘food’); //将食物div添加到地图中去
}

蛇的构造函数：
function snake(){
for(var i=0;i<this.snakeBody.length;i++){
var snake=document.createElement(“div”); //提前知道每一个蛇数组的长度，分别创建一个div
snake.style.width=this.snakeW+‘px’;
snake.style.height=this.snakeH+‘px’;
snake.style.position=‘absolute’;
snake.style.left=this.snakeBody[i][0]*30+‘px’;
snake.style.top=this.snakeBody[i][1]*30+‘px’;
snake.classList.add(this.snakeBody[i][2]);
this.mapDiv.appendChild(snake).classList.add(‘snake’);
switch (this.direct) {
case ‘right’:
break;
case ‘up’:
snake.style.transform=“rotate(270deg)”;
break;
case ‘left’:
snake.style.transform=“rotate(180deg)”;
break;
case ‘down’:
snake.style.transform=“rotate(90deg)”;
break;
default:
break;
} //控制蛇的旋转（div角度变化）
}
}

移动函数：
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];
} //尾部div等于前一个div的位置
switch (this.direct) {
case ‘right’:
this.snakeBody[0][0] += 1;
break;
case ‘up’:
this.snakeBody[0][1] -= 1;
break;
case ‘left’:
this.snakeBody[0][0] -= 1;
break;
case ‘down’:
this.snakeBody[0][1] += 1;
break;
default:
break;
} 控制蛇头的位置变化
removeClass(‘snake’); //消除旧的蛇
snake(); //绘制新的蛇
if(this.snakeBody[0][0] == this.foodx && this.snakeBody[0][1] == this.foody) //判断蛇是否碰到食物
{ g.play();
this.score +=1;
if(this.score5){
window.alert(666);
}
scoreBox.innerHTML=this.score;
removeClass(‘food’); //消除食物
food(); //绘制食物
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 ‘up’:
this.snakeBody.push([snakeEndX, snakeEndY - 1, ‘body’]);
break;
case ‘left’:
this.snakeBody.push([snakeEndX - 1, snakeEndY, ‘body’]);
break;
case ‘down’:
this.snakeBody.push([snakeEndX, snakeEndY + 1, ‘body’]);
break;
default:
break;
}
}
if(this.snakeBody[0][0]<0|| this.snakeBody[0][0]>=this.mapW/30){
end.play();
reloadGame();
}
if(this.snakeBody[0][1]<0|| this.snakeBody[0][1]>=this.mapH/30){
end.play();
reloadGame();
}
snakeHX=this.snakeBody[0][0];
snakeHY=this.snakeBody[0][1];
for(var i=1;i<this.snakeBody.length;i++){
if(snakeHX this.snakeBody[i][0]&& snakeHY==this.snakeBody[i][1]){
end.play();
reloadGame();
}
}
}
消除函数
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;
}

}

重开游戏函数
function reloadGame(){
end.play();
removeClass(‘snake’);
removeClass(‘food’);
clearInterval(snakeMove);
s.style.display=“block”;
sc.innerHTML=this.score;
//初始化游戏属性
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;
}
开始游戏函数
function startGame(){
food(); //构造食物
snake(); //构造蛇
snakeMove=setInterval(function(){
move();
},speed); //定时器
bindEvent(); //控制按键
}
控制按键传入函数
function bindEvent() {
document.οnkeydοwn=function(e){
var code=e.keyCode;
setDerict(code);
}
start1.οnclick=function(){
init();
start1.style.display=“none”;
start2.style.display=“none”;
start3.style.display=“none”;
}
start2.οnclick=function(){
init1();
start1.style.display=“none”;
start2.style.display=“none”;
start3.style.display=“none”;
}
start3.οnclick=function(){
init2();
start1.style.display=“none”;
start2.style.display=“none”;
start3.style.display=“none”;
}
close.οnclick=function(){
start1.style.display=“block”;
start2.style.display=“block”;
start3.style.display=“block”;
this.score=0;
s.style.display=‘none’;
scoreBox.innerHTML=’’;
}
}

新建函数解释：1.createElement，动态地在HTML中添加一个元素的方法（document.createElement（））;
2.appendChild()方法可向子节点列表的末尾添加新的节点
3.classList属性返回元素的类名，该属性用于元素中添加，移除及切换css类，classList属性是只读的，一般使用add()和remove()来进行修饰。