首先要做一个js的贪吃蛇游戏我们第一步就是要用面向对象的方法来思考问题
面向对象
贪吃蛇游戏大家众所周知，我们来抽象一下贪吃蛇的对象。
首先蛇本身可以单独看为一个对象，食物是随机出现在屏幕上的，不管是最原始的只出现一个食物还是更多拓展版的食物的出现一定是按照某些规则的。所以食物在这里也是一个对象。
首先食物对象是不与其他对象相关的，我们先来确定食物对象的js。
建立food.js
/* 食物对象需要的属性,位置x,y,大小,颜色 */
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';
}
var position="absolute";
/* Food的原型对象
render方法
动态创建div */
Food.prototype.render =function(map){
/* 创建div */
var div = document.createElement('div');
map.appendChild(div);
/* 设置div的样式 */
div.style.position=position;
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;
}
/* test */
var map=document.getElementById('map');
var food=new Food();
food.render(map);
完善一下index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="map"></div>
<script src="js/food.js"></script>
</body>
</html>
这里要注意，引入food.js要在div声明之后，否则可能会出现以下或者不限于以下的问题。
报错：Uncaught TypeError: Cannot read property ‘appendChild’ of undefined
这个问题出现的原因就是在js加载之前并没有找到id为map的div模块。所以要谨记把js的加载都放在div声明的后面。
建立一个css
#map {
width: 800px;
height: 600px;
background-color: red;
position: relative;/* 相对 */
}
ok，如果没什么问题Google浏览器上已经可以显示出红配绿了
就是这么辣眼睛。food 还没解决完，如何让food 随机出现？
随机设置food位置
生成最大值到最小值之间的随机数
var Tools = {
getRandom: function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
ok刚刚我们的x和y的位置都是默认的，所以设置一下x和y但是要在div中（随机）。
考虑随机数的边界问题： 实质上我们是随机坐标，随机坐标0时是可以在map上放置food的，这个比较容易思考。 上边界max呢，首先map是有自己的宽度和高度的 我们拿宽度先来找x（高度和y同理） 在food.js中定义了food的宽度20px
在css中定义了map的宽度800px 后者比前者即为map中能横向放置多少块food 明眼人可知，可放40块
但是max可以等于40吗？ 答案是否定的，因为等于40时，因为我们是求的坐标，要展开food，实际上已经不属于map的范围中了。
故max=40-1=39
由此我们得到了新的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;
已经可以随机显示了，还有一个重要的游戏规则：吃掉食物。
所以吃掉之后要随机显示，之前就有一步删除食物的步骤
删除食物
var elements=[];//存储食物的元素
随机生成方法中：
var div = document.createElement('div');
map.appendChild(div);
/* 记录到数组中 */
elements.push(div);
function remove(){
for(var i=elements.length-1;i>=0;i--){
/* 删除div 调用父元素的removeChild方法删除*/
elements[i].parentsNode.removeChild(elements[i]);
/* 删除数组中的数据
第一个参数从哪个元素开始删除
第二个参数删除几个*/
elements.splice(i,1);
}
}
自调用函数改进
首先自调用函数的目的是为了创建局部作用域，使得后续不会出现重名调用等问题
(function(){
})()
将之前写的代码放入function中即可
此处注意一个小问题
Food方法在function 的局部作用域内，所以外部调用不到
/* window下的函数全局可访问,创建自调用函数之后,局部作用域使得外部的测试代码无法调用food方法 */
window.Food=Food;
关于食物对象的面向对象基本结束
构建蛇对象
蛇对象的渲染思路与食物对象同理，需规定蛇对象的方向和身体，身体默认用数组存储，每一个元素代表蛇身体的一个蛇节。
(function(){
var position ='absolute';
function Snake(options){
options=options||{};
/* 蛇节大小和行进方向 */
this.width =options.width||20;
this.height=options.height||20;
this.derection=options.derection||'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(){
for(var i=0,len =this.body.length;i<len;i++){
var object =this.body[i];
var div=document.createElement('div');
map.appendChild(div);
/* 设置postion的目的是脱离文档流 在上面新建一个var postion*/
div.style.position=position;
/* 设置大小 */
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;
}
}
window.Snake=Snake;
})()
启动js
之前的测试都是在js后加一段测试代码，把启动单独创建一个js来代替测试代码
(function(){
function Game(map){
/* 依赖于food和snake */
this.food=new Food();
this.snake=new Snake();
this.map=map;
}
Game.prototype.start=function(){
/* 把蛇和食物对象渲染到地图
开始游戏的逻辑 */
this.food.render(this.map);
this.snake.render(this.map);
}
window.Game=Game;
})();
var map=document.getElementById('map');
var game =new Game(map);
game.start();
game.js 的作用是代替之前的测试代码，所以它首先要依赖于前两个食物和蛇的js，再按照其render方法进行渲染即可。效果与之前相同，不附图。
控制蛇的移动
Snake.prototype.move =function(){
/* 控制蛇的身体移动 */
/* 蛇节 */
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;
}
}
蛇在移动过程中，需要删除蛇移动前的蛇节。
同理food：
/* 私有成员函数 删除参照food*/
function remove(){
/* 从后往前删除 */
for(var i=elements.length-1;i>=0;i--){
/* 删除div */
elements[i].parentNode.removeChild(elements[i]);
elements.splice(i,1);
}
}
让蛇持续移动
// 私有的函数 让蛇移动
function runSnake() {
var timerId = setInterval(function () {
// 让蛇走一格
// 在定时器的function中this是指向window对象的
// this.snake
// 要获取游戏对象中的蛇属性
that.snake.move();
that.snake.render(that.map);
// 2.2 当蛇遇到边界游戏结束
// 获取蛇头的坐标
var maxX = that.map.offsetWidth / that.snake.width;
var maxY = that.map.offsetHeight / that.snake.height;
var headX = that.snake.body[0].x;
var headY = that.snake.body[0].y;
if (headX < 0 || headX >= maxX) {
alert('Game Over');
clearInterval(timerId);
}
if (headY < 0 || headY >= maxY) {
alert('Game Over');
clearInterval(timerId);
}
}, 150);
}
这里用到了that，在var that; that = this;// 记录游戏对象前面已经定义，用于获取this。
通过键盘控制蛇的移动方向
// 通过键盘控制蛇移动的方向
function bindKey() {
// document.onkeydown = function () {};
document.addEventListener('keydown', function (e) {
// console.log(e.keyCode);
// 37 - left
// 38 - top
// 39 - right
// 40 - bottom
switch (e.keyCode) {
case 37:
that.snake.direction = 'left';
break;
case 38:
that.snake.direction = 'top';
break;
case 39:
that.snake.direction = 'right';
break;
case 40:
that.snake.direction = 'bottom';
break;
}
}, false);
}
吃掉食物
/* 判断蛇头是否和食物坐标重合 需要food 和map 在move方法中添加两个参数，同时game也需要添加两个参数*/
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
})
github传送门：https://github.com/qdjiangwenhao/snake
