JS实战面向对象贪吃蛇小游戏示例

 更新时间:2021年12月02日 09:13:46   作者:四季奶青全糖去冰@  
大家好,本篇文章主要讲的是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);
})

总结

贪吃蛇小游戏项目,需要理清楚思路。

到此这篇关于JS实战面向对象贪吃蛇小游戏示例的文章就介绍到这了,更多相关JS贪吃蛇小游戏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js前端加载超大图片(100M以上)实现秒开的最佳解决方案

    js前端加载超大图片(100M以上)实现秒开的最佳解决方案

    前端加载超大图片时,一般可以采取图片压缩,图片分割,预加载等措施,而对于几百M或上G的大图而言,不管对图片进行怎么优化或加速处理,要实现秒开也是不太可能的事情,所以本文小编将给大家介绍如何对大图进行分割,在前端进行拼接实现秒开,需要的朋友可以参考下
    2023-10-10
  • JavaScript模块管理的简单实现方式详解

    JavaScript模块管理的简单实现方式详解

    这篇文章主要介绍了JavaScript模块管理的简单实现方式,它方便组织你的代码,提高项目的可维护性。一个项目的可维护性高不高,也体现一个程序员的水平,在如今越来越复杂的前端项目,这一点尤为重要。,需要的朋友可以参考下
    2019-06-06
  • javascript中的Array对象(数组的合并、转换、迭代、排序、堆栈)

    javascript中的Array对象(数组的合并、转换、迭代、排序、堆栈)

    Array 是javascript中经常用到的数据类型。javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据。本文主要讨论javascript中数组的声明、转换、排序、合并、迭代等等基本操作
    2023-03-03
  • JavaScript阻止表单提交方法(附代码)

    JavaScript阻止表单提交方法(附代码)

    这篇文章主要介绍了JavaScript阻止表单提交方法,通过代码示例讲解了阻止表单提交需要注意的事项,以及onSubmit和check()的区别写法,需要的朋友可以参考下
    2017-08-08
  • 详谈js对url进行编码和解码(三种方式的区别)

    详谈js对url进行编码和解码(三种方式的区别)

    下面小编就为大家带来一篇详谈js对url进行编码和解码(三种方式的区别)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS一次前端面试经历记录

    JS一次前端面试经历记录

    这篇文章主要介绍了JS一次前端面试经历,结合具体案例形式分析了JS前端面试过程中遇到的问题以及响应的注意事项,需要的朋友可以参考下
    2020-03-03
  • JS常用正则表达式总结

    JS常用正则表达式总结

    JS常用正则表达式总结。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 原生js仿淘宝网商品放大镜效果

    原生js仿淘宝网商品放大镜效果

    本文主要介绍了原生js仿淘宝网商品放大镜效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript小技巧整理篇(非常全)

    JavaScript小技巧整理篇(非常全)

    这篇文章主要介绍了JavaScript小技巧整理篇(非常全)的相关资料,需要的朋友可以参考下
    2016-01-01
  • javascript作用域容易记错的两个地方分析

    javascript作用域容易记错的两个地方分析

    javascript作用域容易记错的两个地方分析,学习js的朋友可以参考下
    2012-06-06

最新评论