面向对象案例——贪吃蛇游戏

最近项目上线，近一个星期没更博了，今天来写一个经典的游戏案例——贪吃蛇。在这个简单的案例里可以体会javaScript 面向对象开发相关模式，学习使用面向对象的方式分析问题。

1.功能实现

1.1 搭建页面：放一个容器盛放游戏场景 div#map，设置样式

<div class="map" id="map"></div>

 1 <style>
 2         #map{
 3             background-color: #000;
 4             width: 1500px;
 5             height: 700px;
 6             position: relative;
 7             left: 0;
 8             top: 0;
 9         }
10 </style>

1.2 分析对象：食物对象、蛇对象、游戏对象

1.3 创建食物对象Food

⑴ 属性：位置（x,y）、大小（width、height）、颜色（color）

1 // 创建Food的构造函数，并设置属性
2 function Food(width,height,bgColor) {
3     // 食物的宽度和高度(像素)
4     this.width=width||10;
5     this.height=height||10;
6      // 食物的颜色
7     this.bgColor=bgColor||"white";
8 }

⑵ 方法：render() 随机创建一个食物对象，并输出到map上

 1 // 通过原型设置render方法，实现随机产生食物对象，并渲染到map上
 2 Food.prototype.render=function (map) {
 3     remove(map);
 4     // 随机食物的位置，map.宽度/food.宽度，总共有多少分food的宽度，随机一下。然后再乘以food的宽度
 5     this.x=Math.floor(Math.random()*(map.offsetWidth/this.width))*this.width;
 6     this.y=Math.floor(Math.random()*(map.offsetHeight/this.height))*this.height;
 7     // 动态创建食物对应的div
 8     var newDiv=document.createElement("div");
 9     newDiv.style.position="absolute";
10     newDiv.style.left=this.x+"px";
11     newDiv.style.top=this.y+"px";
12     newDiv.style.backgroundColor=this.bgColor;
13     newDiv.style.width=this.width+"px";
14     newDiv.style.height=this.height+"px";
15     map.appendChild(newDiv);
16     li.push(newDiv);
17 }

1.4 创建蛇对象Snake

⑴ 属性：大小（width、height）、颜色（color）、方向（direction）、身体数组对象（body）

 1 // Snake构造函数
 2 function Snake(width,height,bgColor,direction) {
 3     // 设置每一个蛇节的宽度
 4     this.width=width||10;
 5     this.height=height||10;
 6     this.bgColor=bgColor||"white";
 7     // 蛇的运动方向
 8     this.direction=direction||"right";
 9     // 蛇的每一部分, 第一部分是蛇头
10     this.body=[
11         {x:3,y:1},
12         {x:2,y:1},
13         {x:1,y:1}
14     ];
15 }

⑵ 方法：render() 把蛇渲染到map上

 1 // render方法，原理与渲染食物相同
 2 Snake.prototype.render=function (map) {
 3     remove(map);
 4     for (var i = 0; i < this.body.length; i++) {
 5         var newDiv=document.createElement("div");
 6         newDiv.style.position="absolute";
 7         newDiv.style.left=this.body[i].x*this.width+"px";
 8         newDiv.style.top=this.body[i].y*this.height+"px";
 9         newDiv.style.width=this.width+"px";
10         newDiv.style.height=this.height+"px";
11         newDiv.style.backgroundColor=this.bgColor;
12         map.appendChild(newDiv);
13         list.push(newDiv);
14     }
15 }

1.5 创建游戏对象Game（用来管理游戏中的所有对象和开始游戏）

⑴ 属性：food、snake、map

1 // Game构造函数
2 function Game(map) {
3     this.map=map;
4     this.snake=new Snake();
5     this.food=new Food();
6     that=this;
7 }

⑵ 方法：start() 开始游戏（绘制所有游戏对象）

1 //  开始游戏，渲染食物对象和蛇对象
2 Game.prototype.startGame=function () {
3     this.food.render(this.map);
4     this.snake.render(this.map);
5     autoMove();
6     keyBind();
7 }

// 在自调用函数中暴露Game对象
window.Game=Game;

2.游戏逻辑

2.1 蛇的move方法

⑴ 在蛇对象(snake.js)中，在Snake的原型上新增move方法

⑵ 让蛇移动起来，把蛇身体的每一部分往前移动一下

⑶ 蛇头部分根据不同的方向决定 往哪里移动

 1 Snake.prototype.move=function (food,map) {
 2     //  让蛇身体的每一部分往前移动一下
 3    for (var i = this.body.length-1; i >0; i-- ){
 4        this.body[i].x=this.body[i-1].x;
 5        this.body[i].y=this.body[i-1].y;
 6    }
 7     //  根据移动的方向，决定蛇头如何处理
 8     switch (this.direction) {
 9         case "left":
10             this.body[0].x--;
11             break;
12         case "right":
13             this.body[0].x++;
14             break;
15         case "up":
16             this.body[0].y--;
17             break;
18         case "down":
19             this.body[0].y++;
20             break;
21         default:
22             break;
23     }
24 }

//在game中测试
this.snake.move(this.food, this.map);
this.snake.render(this.map);

2.2 让蛇自己动起来

⑴ 在game.js中 添加autoMove的私有方法，开启定时器调用蛇的move和render方法，让蛇动起来（私有方法即不能被外部访问的方法，使用自调用函数包裹）

 1 function autoMove() {
 2     var timeId=setInterval(function () {
 3         this.snake.move(this.food,this.map);
 4         this.snake.render(this.map);
 5         // 判断蛇是否撞墙
 6         var snakeHeadX=this.snake.body[0].x*this.snake.width;
 7         var snakeHeadY=this.snake.body[0].y*this.snake.width;
 8         if(snakeHeadX<0 || snakeHeadY<0 || snakeHeadX>=this.map.offsetWidth || snakeHeadY>=this.map.offsetHeight){
 9             clearInterval(timeId);
10             alert("Game over!");
11         }
12     }.bind(that),50);
13 }

⑵ 在snake中添加删除蛇的私有方法，在render中调用

1 function remove(map) {
2     for (var i = 0; i < list.length; i++) {
3         map.removeChild(list[i]);
4     }
5     list.length=0;
6 }

⑶ 在game中通过键盘控制蛇的移动方向

 1 function keyBind() {
 2     window.onkeydown=function (e) {
 3     e=e||window.event;
 4     e.keyCode= e.keyCode|| e.charCode|| e.which;
 5     // console.log(e.keyCode);
 6     switch (e.keyCode) {
 7         case 37:
 8             if(this.snake.direction!="right"){
 9                 this.snake.direction="left";
10             }
11             break;
12         case 38:
13             if (this.snake.direction != "down") {
14                 this.snake.direction = "up";
15             }
16             break;
17         case 39:
18             if (this.snake.direction != "left") {
19                 this.snake.direction = "right";
20             }
21             break;
22         case 40:
23             if (this.snake.direction != "up") {
24                 this.snake.direction = "down";
25             }
26             break;
27         default:
28             break;
29         }
30     }.bind(that);
31 }

⑷ 在start方法中调用keyBind()

2.3 判断蛇是否吃到食物

在Snake的move方法中添加判断

 1 // 在移动的过程中判断蛇是否吃到食物
 2 var snakeHeadX=this.body[0].x*this.width;
 3 var snakeHeadY=this.body[0].y*this.height;
 4 var snakeTile=this.body[this.body.length-1];
 5 // 如果蛇头和食物的位置重合代表吃到食物
 6 if(snakeHeadX==food.x && snakeHeadY==food.y){
 7 // 吃到食物，往蛇节的最后加一节
 8     this.body.push({
 9 // 食物的坐标是像素，蛇的坐标是几个宽度，进行转换
10         x:snakeTile.x,
11         y:snakeTile.y
12     });
13 // 把现在的食物对象删除，并重新随机渲染一个食物对象
14     food.render(map);
15 }

★ ★ 自调用函数的参数

1 (function (window, undefined) {
2   var document = window.document;
3 }(window, undefined))

⑴ 传入window对象：代码压缩的时候，可以把function (window) 压缩成 function (w)

⑵ 传入undefined：把undefined作为函数的参数(当前案例没有使用) ，防止undefined 被重新赋值，因为在有的老版本的浏览器中 undefined可以被重新赋值

★ ★ 关于自调用函数的问题

⑴ 如果存在多个自调用函数要用分号分割，否则语法错误

 1 // 下面代码会报错
 2 (function () {
 3 }())
 4
 5 (function () {
 6 }())
 7 // 所以代码规范中会建议在自调用函数之前加上分号
 8 // 下面代码没有问题
 9 ;(function () {
10 }())
11
12 ;(function () {
13 }())

⑵ 当自调用函数前面有函数声明时，会把自调用函数作为参数

1 // 所以建议自调用函数前，加上;
2 var a = function () {
3   alert(‘11‘);
4 }
5
6 (function () {
7   alert(‘22‘);
8 }())

原文地址：https://www.cnblogs.com/linqb/p/9420750.html