分析一下用到的对象(这个案例的地图过于简单,可以不用创建为对象)
食物对象(food)
蛇对象(snake)
游戏对象(game)
1.food对象
属性 :x, y, width, height, color
方法: render 随机创建一个食物对象,输出到mup(地图)上
(function () { var elements = []; // 记录上一次创建的食物,为删除做准备 function Food(options) { options = options || {}; this.x = options.x || 0; this.y = options.y || 0; this.width = options.width || 20; this.height = options.height || 20; this.color = options.color || 'green'; } // 渲染 Food.prototype.render = function (map) { remove();// 删除之前创建的食物 // 随机设置x和y的值 this.x = Tools.getRandom(0, map.offsetWidth/this.width - 1) * this.width; this.y = Tools.getRandom(0, map.offsetHeight/this.height - 1) * this.height; // 动态创建div 页面上显示的食物 var div = document.createElement('div'); map.appendChild(div); elements.push(div); // 设置div的样式 div.style.position = 'absolute'; div.style.left = this.x + 'px'; div.style.top = this.y + 'px'; div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.backgroundColor = this.color; } function remove() { for (var i = elements.length - 1; i >= 0; i--) { elements[i].parentNode.removeChild(elements[i]); // 删除div elements.splice(i, 1);// 删除数组中的元素 } } window.Food = Food; })()
2.snake对象
属性:width(蛇节的宽度默认20),height(蛇节的高默认20),body(数组,蛇的头和身体,第一个位置是头),
direction(蛇的运动方向,默认是left)
方法:render 把蛇渲染到map(地图)上
move 移动(对蛇头和蛇身分别作不同处理)
(function () { var elements = []; // 记录之前创建的蛇 function Snake(options) { options = options || {}; // 蛇节 的大小 this.width = options.width || 20; this.height = options.height || 20; this.direction = options.direction || 'right'; // 蛇移动的方向 // 蛇的身体(蛇节) 第一个元素是蛇头 this.body = [ {x: 3, y: 2, color: 'red'}, {x: 2, y: 2, color: 'blue'}, {x: 1, y: 2, color: 'blue'} ]; } Snake.prototype.render = function (map) { remove(); // 删除之前创建的蛇 // 把每一个蛇节渲染到地图上 for (var i = 0, len = this.body.length; i < len; i++) { var object = this.body[i]; var div = document.createElement('div'); map.appendChild(div); elements.push(div); // 记录当前蛇 // 设置样式 div.style.position = 'absolute'; div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.left = object.x * this.width + 'px'; div.style.top = object.y * this.height + 'px'; div.style.backgroundColor = object.color; } } // 私有的成员 function remove() { for (var i = elements.length - 1; i >= 0; i--) { // 删除div elements[i].parentNode.removeChild(elements[i]); // 删除数组中的元素 elements.splice(i, 1); } } // 控制蛇移动的方法 Snake.prototype.move = function (food, map) { // 控制蛇的身体移动(当前蛇节 到 上一个蛇节的位置) 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; } // 控制蛇头的移动 var head = this.body[0]; switch(this.direction) { case 'right': head.x += 1; break; case 'left': head.x -= 1; break; case 'top': head.y -= 1; break; case 'bottom': head.y += 1; break; } // 2.4 判断蛇头是否和食物的坐标重合 var headX = head.x * this.width; var headY = head.y * this.height; if (headX === food.x && headY === food.y) { // 让蛇增加一节 var last = this.body[this.body.length - 1]; this.body.push({ x: last.x, y: last.y, color: last.color }); food.render(map); // 随机在地图上重新生成食物 } } window.Snake = Snake; })()
3.game对象
属性: food,snake,map
方法:start 开始游戏 绘制所有游戏对象
bindKey 通过键盘控制蛇的移动方向
runSnake 让蛇自己动起来
(function () { var that; // 记录游戏对象 function Game(map) { this.food = new Food(); this.snake = new Snake(); this.map = map; that = this; } Game.prototype.start = function () { // 1 把蛇和食物对象,渲染到地图上 this.food.render(this.map); this.snake.render(this.map); runSnake(); // 让蛇移动起来 bindKey(); // 通过键盘控制蛇移动的方向 } // 通过键盘控制蛇移动的方向 function bindKey() { document.addEventListener('keydown', function (e) { switch (e.keyCode) { case 37: this.snake.direction = 'left'; break; case 38: this.snake.direction = 'top'; break; case 39: this.snake.direction = 'right'; break; case 40: this.snake.direction = 'bottom'; break; } }.bind(that), false); } // 私有的函数 让蛇移动 function runSnake() { var timerId = setInterval(function () { // 要获取游戏对象中的蛇属性 this.snake.move(this.food, this.map); // 2.2 当蛇遇到边界游戏结束 var maxX = this.map.offsetWidth / this.snake.width; var maxY = this.map.offsetHeight / this.snake.height; var headX = this.snake.body[0].x; var headY = this.snake.body[0].y; if (headX < 0 || headX >= maxX || headY < 0|| headY >= maxY) { alert('Game Over'); clearInterval(timerId); return } this.snake.render(this.map); // 根据body 的数据 重新渲染蛇在页面位置 }.bind(that), 150); } window.Game = Game; })()
调用
(function () { var map = document.getElementById('map'); var game = new Game(map); game.start(); })()
ok 小游戏已经完成。当然里面还有一些逻辑上的不严谨,大神勿喷。有兴趣的可以自己再加以修改。