JS实战面向对象 - 贪吃蛇
Posted 四季奶青全糖去冰@
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS实战面向对象 - 贪吃蛇相关的知识,希望对你有一定的参考价值。
目录
思考
第一步思考蛇分为几个部分,蛇头和蛇身体是怎么形成的。
第二步思考蛇是怎么运动的;如何通过键盘控制蛇的走向。
第三步思考游戏在什么情况下会结束。
第四步思考食物是怎么产生的,产生的位置和蛇的位置有什么需要注意的点。
第五步思考蛇是怎么吃到食物的;吃到后蛇的身体会变长,食物又会产生新的。
第六步做完以后多玩几次,享受一下自己的劳动成果。!!!
一、贪吃蛇效果图
二、贪吃蛇分析
2.1 开始游戏功能
当用户进入游戏主界面时,可在界面中下方显眼的位置找到“start”按钮,点击后用户可进行新游戏。获取button变量,给它添加一个addEventListener('click', function() )点击事件。
btnstart.addEventListener('click', function()
btnstart.style.display = 'none';
//调用中介类
game = new Game();
var table = document.querySelector('table');
table.addEventListener('click', function()
//清除定时器
clearInterval(game.timer);
btnstop.style.display = 'block';
)
);
2.2 运动功能
2.2.1 蛇的不同方向的运动
当用户点击”开始游戏“按钮后,蛇的方向默认从左到右方向移动。
//当前的direction接受willDirection !!!
this.direction = this.willDirection;
//蛇的不同方向的运动
switch (this.direction)
case "R":
//向右移动
this.body.unshift( "row": this.body[0].row, "col": this.body[0].col + 1 );
break;
case "D":
//向下移动
this.body.unshift( "row": this.body[0].row + 1, "col": this.body[0].col );
break;
case "L":
//向左移动
this.body.unshift( "row": this.body[0].row, "col": this.body[0].col - 1 );
break;
case "T":
//向上移动
this.body.unshift( "row": this.body[0].row - 1, "col": this.body[0].col );
break;
2.2.2 键盘控制方向运动功能
用户可通过使用键盘上的上下左右方位键控制蛇的移动方向,蛇在控制的方向上进行直线前进。
Game.prototype.bindEvent = function()
var self = this;
//键盘事件
document.onkeydown = function(e)
switch (e.keyCode)
//按左键
case 37:
//先进行判断(如果当前的方向是向右移动,此时我们不能按左键)
if (self.snake.direction == 'R') return;
// self.snake.direction = 'L';
self.snake.changeDirection('L');
self.d = "L";
break;
//按上键
case 38:
if (self.snake.direction == 'D') return;
self.snake.changeDirection('T');
self.d = "T";
break;
//按右键
case 39:
if (self.snake.direction == 'L') return;
self.snake.changeDirection('R');
self.d = "R";
break;
//按下键
case 40:
if (self.snake.direction == 'T') return;
self.snake.changeDirection('D');
self.d = "D";
break;
;
2.3 吃食物功能
2.3.1 食物的产生
食物的位置:遍历蛇的row和col,然后和随机生成的row和col进行判断是否重合。
var self = this; //指的是window
//下面的do-while循环语句作用是先创建一个row和col,在判断这个是否在蛇身上
do
//食物的位置
this.row = parseInt(Math.random() * gameSnake.row);
this.col = parseInt(Math.random() * gameSnake.col);
while ((function()
//遍历蛇的row和col,然后和随机生成的row和col进行判断,是否重合
for (var i = 0; i < gameSnake.snake.body.length; i++)
if (gameSnake.snake.body[i].row == self.row && gameSnake.snake.body[i].col == self.col)
return true;
return false;
)());
2.3.2 吃食物的过程
当界面任意位置出现食物,用户使用方位键控制蛇移动到食物周围,当蛇头碰到食物时则表示贪吃蛇吃到此食物,界面上会在任意位置出现下一个食物,用户再次控制蛇去吃这一食物。
//如果当前蛇的头部没有和食物重合就代表没有吃到食物,此时进行尾部删除;
if (this.body[0].row == game.food.row && this.body[0].col == game.food.col)
//如果重合了就代表吃到了,不进行尾部删除,只有头部增加了
//创建新的食物
game.food = new Food(game);
//让帧编号归0,因为蛇会蹿一下
//吃到食物,加分数
game.score++;
game.f = 0;
else
this.body.pop();
2.4 死亡判定功能
当蛇头在前进方向上撞到墙壁或蛇头吃到蛇身时,给出死亡判定,并弹框给出用户本次游戏得分。
2.4.1 触边死亡判断(撞墙了)
if (this.body[0].col > game.col - 1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0)
//右下左上
alert('游戏结束,您当前的总分为:' + game.score + '分');
this.body.unshift();
clearInterval(game.timer);
2.4.2 自己撞到自己
for (var i = 1; i < this.body.length; i++)
if (this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row)
alert('游戏结束,您当前的总分为:' + game.score + '分');
clearInterval(game.timer);
2.5 暂停/继续游戏功能
btnstop.addEventListener('click', function()
btnstop.style.display = 'none';
game.timer = setInterval(function()
// 定时器里面的核心就是游戏的渲染本质,清屏-更新-渲染
game.f++;
// 清屏
game.clear();
// 蛇的运动/更新
// 蛇的更新速度 当蛇边长的时候,速度加快
var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
// 蛇的更新
game.f % during == 0 && game.snake.update();
// 渲染蛇
game.snake.render();
// 渲染食物
game.food.render();
, 20);
)
视频学习链接:web前端实战项目系列,JavaScript面相对象开发贪吃蛇(全套教程)_哔哩哔哩_bilibili
总结
贪吃蛇小游戏项目,需要理清楚思路。
以上是关于JS实战面向对象 - 贪吃蛇的主要内容,如果未能解决你的问题,请参考以下文章