从零开始太难下手，于是参考百度的教程制作了一个贪吃蛇小游戏，
目前只实现了贪吃蛇最基本的功能，积分面板与暂停开始功能都没有做，其余的bug以后也慢慢完善
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> function Map() { //定义地图的属性 this.width = 800; this.height = 400; this.color = '#ddd'; this.position = 'relative'; this.mapShow = function() { //生成地图 var box = document.createElement('div'); box.style.width = this.width + 'px'; box.style.height = this.height + 'px'; box.style.backgroundColor = this.color; box.style.position = this.position; document.getElementsByTagName('body')[0].appendChild(box); } }; function Food() { //定义食物的属性 this.width = 20; this.height = 20; this.color = 'green'; this.position = 'absolute'; this.randomShow = function() { this.disX = Math.floor(Math.random()*40); this.disY = Math.floor(Math.random()*20);//生成随机的食物 var food = document.createElement('span'); food.style.width = this.width + 'px'; food.style.height = this.height + 'px'; food.style.backgroundColor = this.color; food.style.position = this.position; food.style.left = this.disX * 20 + 'px'; food.style.top = this.disY * 20 + 'px'; document.getElementsByTagName('div')[0].appendChild(food);//将食物放入地图 } }; function Snake() { this.width = 20; this.height = 20; this.position = 'absolute'; this.body = [[3,2,'red'],[2,2,'blue'],[1,2,'blue']];//蛇的每一隔用数组保存，第一格与横坐标有关，第二个与纵坐标有关 this.direct = 'right'; this.showSnake = function() {//生成蛇 for(var i = 0;i < this.body.length;i++){ var snake = document.createElement('div'); snake.style.width = this.width + 'px'; snake.style.height = this.height + 'px'; snake.style.position = this.position; snake.style.left = this.body[i][0]*20 + 'px'; snake.style.top = this.body[i][1]*20 + 'px'; snake.style.backgroundColor = this.body[i][2]; document.getElementsByTagName('div')[0].appendChild(snake); } }; this.move = function(food,timer) { var container = document.getElementsByTagName("div")[0]; var snakeBody = container.getElementsByTagName("div"); var foodBody = container.getElementsByTagName("span")[0]; var length = snakeBody.length; for(var i=0;i<length;i++){ container.removeChild(snakeBody[0]); } for(var i=this.body.length-1;i>0;i--){ this.body[i][0] = this.body[i-1][0]; this.body[i][1] = this.body[i-1][1]; } if(this.direct == 'right') { this.body[0][0]++; }else if(this.direct == 'left') { this.body[0][0]--; }else if(this.direct == 'up') { this.body[0][1]--; }else{ this.body[0][1]++; } //贪吃蛇吃食物 if(this.body[0][0] == food.disX && this.body[0][1] == food.disY){ container.removeChild(foodBody);//吃掉的食物消失 this.body.push([-3,-3,'blue']); food.randomShow();//生成新的食物 } this.showSnake(); //判断是否撞墙 if(snakeBody[0].offsetLeft<(container.offsetLeft-40) || snakeBody[0].offsetLeft>=container.offsetWidth || snakeBody[0].offsetTop<(container.offsetTop-40) || snakeBody[0].offsetTop>container.offsetHeight){ alert("游戏结束"); clearInterval(timer); } //判断是否撞到自己 for(var i=1;i<this.body.length;i++){ if(this.body[0][0] == this.body[i][0] && this.body[0][1] == this.body[i][1]){ alert("游戏结束"); clearInterval(timer); } } }; //定义方向 this.setDirect = function(code) { switch(code) { case 37: if(this.direct != 'right'){//防止蛇掉头 this.direct = 'left'; } break; case 38: if(this.direct != 'down'){ this.direct = 'up'; } break; case 39: if(this.direct != 'left'){ this.direct = 'right'; } break; case 40: if(this.direct != 'up'){ this.direct = 'down'; } break; } } }; window.onload = function() { var obj = new Map(); obj.mapShow(); var food = new Food(); food.randomShow(); var snake = new Snake(); snake.showSnake(); var timer = setInterval(function(){snake.move(food,timer)},200); document.onkeydown = function(ev) { var oEvent = ev || event; code = oEvent.keyCode; snake.setDirect(code); } } </script> </head> <body> </body> </html>