最近跟着视频教程打了一个贪吃蛇,
来记录一下实现思路,
先上代码
静态页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>贪吃蛇</title> </head> <style> *{ margin: 0; padding: 0; } .map{ width:800px; height: 600px; background-color: #ccc; position:relative; } </style> <body> <!-- 画出地图,设置样式 --> <div> </div> </body> <script src="https://www.jb51.net/food.js"></script> <script src="https://www.jb51.net/snake.js"></script> <script src="https://www.jb51.net/game.js"></script> </html>
food.js
//食物就是一个对象,宽高横纵坐标,先定义构造函数，然后创建对象 (function (){ var elements=[];//用来保存每个小方块食物 function Food(x,y,width,height,color){ //横纵坐标 this.x=x||0; this.y=y||0; this.width=width||20; this.height=height||20; //背景颜色 this.color=color||"green"; } //为原型添加初始化的方法(作用:在页面上取显示这个食物) //因为食物要在地图上显示，所以，需要地图这个参数 Food.prototype.init=function(map){ //先删除这个食物 //外部无法访问的函数 remove() var div=document.createElement("div"); //把这个div加到map中 map.appendChild(div); //设置div的样式 div.style.width=this.width+"px"; div.style.height=this.height+"px"; div.style.backgroundColor=this.color; // div.style.left=this.x+"px"; //先脱离文档流 div.style.position="absolute"; //随机横纵坐标 this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width; this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height; div.style.left=this.x+"px"; div.style.top=this.y+"px"; // Food.prototype.init=function(map){ // } //把div加入到数组elements中 elements.push(div); } function remove(){ //elements数组中有这个食物 for(var i=0;i<elements.length;i++){ var ele=elements[i] //找到这个子元素的父级元素,然后删除这个子元素 ele.parentNode.removeChild(ele); //再次把elements中的这个子元素也要删除 elements.splice(i,1) } } //把Food暴露给Window,外部可以使用 window.Food=Food; }());
snake.js
//蛇 (function(){ var elements=[];//存放小蛇的每个身体部分 //蛇的构造函数 function Snake(width,height,direction){ //小蛇的每个部分的宽 this.width=width||20; this.height=height||20; //身体 this.body=[ {x:3,y:2,color:"red"}, {x:2,y:2,color:"orange"}, {x:1,y:2,color:"orange"} ]; this.direction=direction||"right"; } //蛇的初始化 Snake.prototype.init=function(map){ remove() //循环遍历创建div for(var i=0;i<this.body.length;i++){ var obj=this.body[i]; //创建div var div=document.createElement("div"); //把div加入到map地图中 map.appendChild(div); //设置div的样式; div.style.position="absolute"; div.style.width=this.width+"px"; div.style.height=this.height+"px"; div.style.left=obj.x*this.width+"px"; div.style.top=obj.y*this.height+"px"; div.style.backgroundColor=obj.color; //把div加入到elements数组中--目的是删除 elements.push(div) } } //蛇的移动 Snake.prototype.move=function(food,map){ //改变蛇身体位置 var i=this.body.length-1; //2 for(;i>0;i--){ this.body[i].x=this.body[i-1].x; this.body[i].y=this.body[i-1].y; } //判断方向---改变小蛇的头的坐标位置 switch (this.direction){ case "right": this.body[0].x+=1; break; case "left": this.body[0].x-=1; break; case "top": this.body[0].y-=1; break; case "bottom": this.body[0].y+=1; break; } //判断有没有吃到食物 //小蛇的头的坐标和食物位置 var headX=this.body[0].x*this.width; var headY=this.body[0].y*this.height; //食物的横纵坐标 var foodX=food.x; var foodY=food.y; if(headX==foodX&&headY==foodY){ //获取蛇的最后尾巴 var last=this.body[this.body.length-1]; //把最后的蛇尾复制一份 this.body.push({ x:last.x, y:last.y, color:last.color }) //重新初始化食物 food.init(map); } } //删除小蛇的私有函数 function remove(){ //获取数组 var i=elements.length-1; for(;i>=0;i--){ //先从当前的子元素中找到该子元素的父级元素,然后再弄死这个子元素 var ele=elements[i]; //从map地图上删除这个子元素div ele.parentNode.removeChild(ele); elements.splice(i,1); } } window.Snake=Snake; }()); //蛇 (function(){ var elements=[];//存放小蛇的每个身体部分 //蛇的构造函数 function Snake(width,height,direction){ //小蛇的每个部分的宽 this.width=width||20; this.height=height||20; //身体 this.body=[ {x:3,y:2,color:"red"}, {x:2,y:2,color:"orange"}, {x:1,y:2,color:"orange"} ]; this.direction=direction||"right"; } //蛇的初始化 Snake.prototype.init=function(map){ remove() //循环遍历创建div for(var i=0;i<this.body.length;i++){ var obj=this.body[i]; //创建div var div=document.createElement("div"); //把div加入到map地图中 map.appendChild(div); //设置div的样式; div.style.position="absolute"; div.style.width=this.width+"px"; div.style.height=this.height+"px"; div.style.left=obj.x*this.width+"px"; div.style.top=obj.y*this.height+"px"; div.style.backgroundColor=obj.color; //把div加入到elements数组中--目的是删除 elements.push(div) } } //蛇的移动 Snake.prototype.move=function(food,map){ //改变蛇身体位置 var i=this.body.length-1; //2 for(;i>0;i--){ this.body[i].x=this.body[i-1].x; this.body[i].y=this.body[i-1].y; } //判断方向---改变小蛇的头的坐标位置 switch (this.direction){ case "right": this.body[0].x+=1; break; case "left": this.body[0].x-=1; break; case "top": this.body[0].y-=1; break; case "bottom": this.body[0].y+=1; break; } //判断有没有吃到食物 //小蛇的头的坐标和食物位置 var headX=this.body[0].x*this.width; var headY=this.body[0].y*this.height; //食物的横纵坐标 var foodX=food.x; var foodY=food.y; if(headX==foodX&&headY==foodY){ //获取蛇的最后尾巴 var last=this.body[this.body.length-1]; //把最后的蛇尾复制一份 this.body.push({ x:last.x, y:last.y, color:last.color }) //重新初始化食物 food.init(map); } } //删除小蛇的私有函数 function remove(){ //获取数组 var i=elements.length-1; for(;i>=0;i--){ //先从当前的子元素中找到该子元素的父级元素,然后再弄死这个子元素 var ele=elements[i]; //从map地图上删除这个子元素div ele.parentNode.removeChild(ele); elements.splice(i,1); } } window.Snake=Snake; }());
game.js