//1.写食物 ; (function (w) { //声明一个数组用来保存食物 var list = []; //1.1.创建食物的构造函数:宽、高、颜色、x、y function Food(width, height, bgcolor, x, y) { this.width = width || 12; this.height = height || 12; this.bgcolor = bgcolor || "green"; this.x = x || 0; this.y = y || 0; } //1.2.食物显示在地图上的方法 Food.prototype.render = function (map) { //6.4生成新食物之前删除老食物 removeOldFood(map); //2.1随机生成一个随机坐标 this.x = Math.floor(Math.random() * map.offsetWidth / this.width) * this.width; this.y = Math.floor(Math.random() * map.offsetHeight / this.height) * this.height; //2.2创建一个div，让这个div拥有食物对象的所有显示信息 var div1 = document.createElement('div'); div1.style.position = "absolute"; div1.style.left = this.x + 'px'; div1.style.top = this.y + 'px'; div1.style.width = this.width + 'px'; div1.style.height = this.height + 'px'; div1.style.backgroundColor = this.bgcolor; //2.3然后把食物对象显示到地图上 map.appendChild(div1); //6.2保存这个食物 list.push(div1); } //6.3删除老食物 function removeOldFood(map) { for (var i = 0; i < list.length; i++) { map.removeChild(list[i]); } list.length = 0; } w.Food = Food; }(window)); //2.写蛇 ; (function (w) { //声明一个数组保存蛇 var list = []; //2.1创建蛇的构造函数：宽，高，颜色，x，y，移动方向 function Snake(width, height, bgcolor, direction, x, y, ) { this.width = width || 12; this.height = height || 12; this.direction = direction || "right"; //声明一个数组保存蛇的身体 this.body = [ { x: 3, y: 1, bgcolor: "red" }, { x: 2, y: 1, bgcolor: "blue" }, { x: 1, y: 1, bgcolor: "blue" }, ]; } //2.2把蛇显示在地图上，封装的方法写在原型中 Snake.prototype.render = function (map) { //4.4 渲染新蛇之前删除老蛇 removeOldSnake(map); //遍历蛇的每一节身体，让每一节身体显示到地图上 for (var i = 0; i < this.body.length; i++) { var snakeUnit = this.body[i];//蛇的每一节身体 //创建div，让div拥有这一节蛇身体的所有显示信息 var div1 = document.createElement('div'); div1.style.position = 'absolute'; div1.style.left = snakeUnit.x * this.width + 'px'; div1.style.top = snakeUnit.y * this.height + 'px'; div1.style.width = this.width + 'px'; div1.style.height = this.height + 'px'; div1.style.backgroundColor = snakeUnit.bgcolor; //把div添加到地图上 map.appendChild(div1); list.push(div1); } } //4.3 声明一个函数删除老蛇 function removeOldSnake(map) { //老蛇div都在list里面，遍历删除元素 for (var i = 0; i < list.length; i++) { map.removeChild(list[i]); } //清空list list.length = 0; } //4.1 蛇移动方法 Snake.prototype.move = function (food) { //除蛇头外的蛇身体移动，移动之后是上一节身体的坐标 for (var i = this.body.length - 1; 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++; break; case 'left': this.body[0].x--; break; case 'top': this.body[0].y--; break; case 'bottom': this.body[0].y++; break; } //6.1 蛇每次移动都有可能吃到一个食物，通过判断蛇头和食物坐标是否重合 var snakeHeadX = this.body[0].x * this.width; var snakeHeadY = this.body[0].y * this.height; var foodX = food.x; var foodY = food.y; //获取左后一节身体 var lastSnakeUnit = this.body[this.body.length - 1]; //判断是否吃到食物 if (snakeHeadX == foodX && snakeHeadY == foodY) { //吃到食物，长一节身体 this.body.push({ x: lastSnakeUnit.x, y: lastSnakeUnit.y, bgcolor: "blue" }); //生成一个新的食物 food.render(map); } } w.Snake = Snake; }(window)); //3.写游戏逻辑控制器 ; (function (w) { //声明一个变量，后面用来存储this指向 var that = null; //3.1.创建游戏逻辑控制器的构造函数：地图，食物，蛇 function Game(map) { this.map = map; this.food = new Food(); this.snake = new Snake(); //存储this指向 that = this; } //3.2 游戏控制器的开始方法 Game.prototype.start = function () { //显示食物 this.food.render(this.map); //显示蛇 this.snake.render(this.map); //调用蛇移动的定时器 snakeAutoMove(); //5.2 触发方向改变事件 bindKey(); } //5.1 声明一个函数，根据键盘按键改变蛇的方向 function bindKey() { document.onkeydown = function (e) { e = e || window.Event; switch (e.keyCode) { case 37: if (this.snake.direction != 'right') { this.snake.direction = 'left'; } break; case 38: if (this.snake.direction != 'bottom') { this.snake.direction = 'top'; } break; case 39: if (this.snake.direction != 'left') { this.snake.direction = 'right'; } break; case 40: if (this.snake.direction != 'top') { this.snake.direction = 'bottom'; } break; } }.bind(that); } //4.2 写一个函数，让蛇不停的动起来 function snakeAutoMove() { //设置一个定时器，不停的调用蛇对象的move和render方法 var timeId = setInterval(function () { this.snake.move(this.food); //5.3判断蛇有没有出界 var snakeHeadX = this.snake.body[0].x * this.snake.width;//蛇的x坐标 var snakeHeadY = this.snake.body[0].y * this.snake.height;//蛇的y坐标 if (snakeHeadX < 0 || snakeHeadY < 0 || snakeHeadX >= this.map.offsetWidth || snakeHeadY >= this.map.offsetHeight) { //出届了游戏结束，停止定时器 clearInterval(timeId); alert('游戏结束！') return; } //渲染蛇 this.snake.render(this.map); }.bind(that), 300); } w.Game = Game; }(window)); //获取地图对象 var map = document.getElementById('map'); var g1 = new Game(map); g1.start();
index.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>snake</title> <style> .map { width: 800px; height: 600px; background-color: #cccccc; position: relative; top: 0px; left: 0px; } </style> </head> <body> <div class="map" id="map"></div> </body> </html> <script src="index.js"></script>