一个用原生js写的贪吃蛇小游戏，贪吃蛇碰到自己身体游戏会结束
效果图：
代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> <button>按钮</button> </body> <script type="text/javascript"> var timerId; document.querySelector("button").onclick = function(){ // 让蛇动起来 - 定时器移动 timerId = setInterval(()=>{ s.move() },100) } // 地图对象 function Map(){ // 地图对象负责创建范围，放蛇和食物 this.map = document.createElement("div"); setStyle(this.map,{ width:"800px", height:"500px", background:"pink", border:"2px solid #000", position:"relative" }) // 将地图放在body中 document.body.appendChild(this.map) } var m = new Map() // 食物对象 function Food(){ // 食物对象负责生成，消失(地图干掉他) this.food = document.createElement("div"); setStyle(this.food,{ width:"10px", height:"10px", background:"blue", position:"absolute", left:parseInt(getRandom(0,m.map.clientWidth-10)/10)*10+"px", top:parseInt(getRandom(0,m.map.clientHeight-10)/10)*10+"px", }) // 将食物放到地图中 m.map.appendChild(this.food) } var f = new Food() // 蛇对象 function Snake(){ // 定义蛇的身体的left和top this.body = [ { x:0, y:0 }, { x:10, y:0 }, { x:20, y:0 } ] // 定义蛇的移动方向 this.direction = 'right'; // 通过按键改变蛇的移动方向 this.changeDirection(); // 显示蛇的身体 this.show() } Snake.prototype.changeDirection = function(){ document.onkeypress = e=>{ var e = e || window.event; // 获取键码 var code = e.keyCode || e.which; // 根据键码改变direction属性 // console.log(code); // 119 115 97 100 switch(code){ case 119: this.direction = "up"; break; case 115: this.direction = "down"; break; case 97: this.direction = "left"; break; case 100: this.direction = "right"; break; } } } Snake.prototype.move = function(){ console.log(this.direction); // 蛇移动需要一个方向 - 默认方向 // 蛇在移动过程中，不管是哪个方向，移动一步，蛇的第二节身体就是蛇头原来的位置，蛇的最后一节身体就是，第二节身体原来的位置 for(var i=0;i<this.body.length-1;i++){ this.body[i].x = this.body[i+1].x this.body[i].y = this.body[i+1].y } // console.log(this.body); // 单独设置蛇头 switch(this.direction){ case 'up': this.body[this.body.length-1].y -= 10; break; case 'down': this.body[this.body.length-1].y += 10; break; case 'left': this.body[this.body.length-1].x -= 10; break; case 'right': this.body[this.body.length-1].x += 10; break; } // console.log(this.body); // 根据新的数组显示身体 this.show() this.eat() // 蛇不能撞墙 this.die() } Snake.prototype.die = function(){ // 撞墙 if(this.body[this.body.length-1].x>m.map.clientWidth || this.body[this.body.length-1].x<0 || this.body[this.body.length-1].y<0 || this.body[this.body.length-1].y>m.map.clientHeight){ clearInterval(timerId) alert("GAME OVER"); } // 撞身体 for(var i=0;i<this.body.length-1;i++){ if(this.body[i].x === this.body[this.body.length-1].x && this.body[i].y === this.body[this.body.length-1].y){ clearInterval(timerId) alert("GAME OVER"); } } } Snake.prototype.eat = function(){ // 蛇头的x和y跟食物的left和top完全相等的时候就吃到了 if(this.body[this.body.length-1].x === f.food.offsetLeft && this.body[this.body.length-1].y === f.food.offsetTop){ // 吃到了 // 蛇的身体要加一节 var oneBody = { x:this.body[0].x, y:this.body[0].y } // 将这个对象放到身体数组的最前面 this.body.unshift(oneBody) // 根据新的数组生成新的身体 this.show() // 食物要消失，并再生成一个 f.food.parentElement.removeChild(f.food) f = new Food() } } Snake.prototype.show = function(){ // 先删除之前的身体 - 再创建新的身体 var snakes = m.map.querySelectorAll(".snake") // console.log(snakes); if(snakes.length !== 0){ for(var i=0;i<snakes.length;i++){ snakes[i].parentElement.removeChild(snakes[i]) } } // 遍历身体属性，创建div for(var i=0;i<this.body.length;i++){ var div = document.createElement("div"); div.className = 'snake'; setStyle(div,{ width:"10px", height:"10px", background:"#0f0", position:"absolute", left:this.body[i].x + "px", top:this.body[i].y + "px" }); if(i === this.body.length-1){ div.style.background = 'red'; } m.map.appendChild(div); } } var s = new Snake() function setStyle(ele,styleObj){ for(var attr in styleObj){ ele.style[attr] = styleObj[attr]; } } function getRandom(min,max){ if(min>max){ var tmp = min; min = max; max = tmp; } return parseInt(Math.random()*(max-min)+1); } </script> </html>