JavaScript实现贪吃蛇游戏


Posted in Javascript onJune 16, 2021

本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下

通过JavaScript,我们可以实现贪吃蛇游戏,具体功能如下:

(1)通过按上下左右键来改变蛇的移动方向

(2)若蛇撞到自己,则游戏结束

(3)蛇移动出地图边缘时,会从地图的另一边进来

(4)长按方向键,蛇加速移动

(5)蛇吃到食物后,重新生成食物

完整代码如下:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        //地图对象
        var Map;
        Map = {
            width: 990,
            height: 600,
            backgroundColor: 'rgba(36, 30, 225, 0.25)',
            map: null,
            createMap: function () {
                if (this.map == null) {
                    this.map = document.createElement("div");
                }
            },
            adornMap: function () {
                this.map.style.position = "relative";
                this.map.style.width = this.width + "px";
                this.map.style.height = this.height + "px";
                this.map.style.backgroundColor = this.backgroundColor;
            },
            initialize: function () {
                this.createMap();
                this.adornMap();
                document.body.appendChild(this.map);
            }
        };
        //蛇对象
        var Snake;
        Snake = {
            snakeWidth: 30,
            snakeHeight: 30,
            snake: [[3, 1, null, 'red'], [2, 1, null, 'black'], [1, 1, null, 'black']],
            maP: null,
            direct: "right",
            timer: null,
            createSnake: function () {
                for (var i = 0; i < this.snake.length; i++) {
                    if (this.snake[i][2] == null) {
                        this.snake[i][2] = document.createElement("div");
                    }
                    this.snake[i][2].style.width = this.snakeWidth + "px";
                    this.snake[i][2].style.height = this.snakeHeight + "px";
                    this.snake[i][2].style.backgroundColor = this.snake[i][3];
                    this.snake[i][2].style.position = "absolute";
                    this.snake[i][2].style.left = this.snake[i][0] * this.snakeWidth + "px";
                    this.snake[i][2].style.top = this.snake[i][1] * this.snakeHeight + "px";
                    this.maP.appendChild(this.snake[i][2]);
                }
            },
            move: function () {
                //蛇身移动
                for (var i = this.snake.length - 1; i > 0; i--) {
                    this.snake[i][0] = this.snake[i - 1][0];
                    this.snake[i][1] = this.snake[i - 1][1];
                }
                //蛇头移动
                switch (this.direct) {
                    case "left":
                        this.snake[0][0] -= 1;
                        break;
                    case "right":
                        this.snake[0][0] += 1;
                        break;
                    case "up":
                        this.snake[0][1] -= 1;
                        break;
                    case "down":
                        this.snake[0][1] += 1;
                        break;
                }
                //防止蛇移动至地图外
                if (this.snake[0][0] > 32) {
                    this.snake[0][0] = 0;
                }
                if (this.snake[0][0] < 0) {
                    this.snake[0][0] = 32;
                }
                if (this.snake[0][1] < 0) {
                    this.snake[0][1] = 19;
                }
                if (this.snake[0][1] > 19) {
                    this.snake[0][1] = 0;
                }
                //若蛇撞到自己,则游戏结束
                for (var i = 1; i < this.snake.length; i++) {
                    if (this.snake[0][0] == this.snake[i][0] && this.snake[0][1] == this.snake[i][1]) {
                        clearInterval(this.timer);
                        alert("游戏结束!");
                        return;
                    }
                }
                //蛇吃到食物时,重新生成食物位置,蛇身变长一节
                if (this.snake[0][0] == Food.left && this.snake[0][1] == Food.top) {
                    Food.createFood();
                    this.snake.push(
                        [
                            this.snake[this.snake.length - 1][0],
                            this.snake[this.snake.length - 1][1],
                            null,
                            "black"
                        ]
                    )
                }
                this.createSnake();
            },
            initialize: function () {
                var that = this;
                that.createSnake();
                that.timer = setInterval(function () {
                    that.move();
                }, 500)
            }
        };
        //食物对象
        var Food;
        Food = {
            foodWidth: 30,
            foodHeight: 30,
            backgroundColor: "orange",
            left: null,
            top: null,
            maP: null,
            snakE: null,
            food: null,
            //创建食物
            createFood: function () {
                this.randomPosition();
                if (this.food == null) {
                    this.food = document.createElement('div');
                    this.food.style.width = this.foodWidth + "px";
                    this.food.style.height = this.foodHeight + "px";
                    this.food.style.backgroundColor = this.backgroundColor;
                    this.food.style.position = "absolute";
                    this.maP.appendChild(this.food);
                }
                this.food.style.left = this.left * this.foodWidth + "px";
                this.food.style.top = this.top * this.foodHeight + "px";
            },
            //随机生成食物位置
            randomPosition: function () {
                var repeat;
                do {
                    repeat = false;
                    this.left = Math.floor(Math.random() * 33);
                    this.top = Math.floor(Math.random() * 20);
                    for (var i = 0; i < this.snakE.length; i++) {
                        if (this.left == this.snakE[i][0] && this.top == this.snakE[i][1]) {
                            repeat = true;
                        }
                    }
                } while (repeat)
            }
        };
        window.addEventListener('load', function () {
            Map.initialize();
            Snake.maP = Map.map;
            Snake.initialize();
            Food.maP = Map.map;
            Food.snakE = Snake.snake;
            Food.createFood();
            //按上下左右键,蛇改变移动方向
            window.addEventListener('keyup', function (e) {
                var direct = e.keyCode;
                switch (direct) {
                    case 37:
                        if (Snake.direct == "right") {
                            return;
                        }
                        Snake.direct = "left";
                        break;
                    case 38:
                        if (Snake.direct == "down") {
                            return;
                        }
                        Snake.direct = "up";
                        break;
                    case 39:
                        if (Snake.direct == "left") {
                            return;
                        }
                        Snake.direct = "right";
                        break;
                    case 40:
                        if (Snake.direct == "up") {
                            return;
                        }
                        Snake.direct = "down";
                        break;
                }
            })
            //长按方向键加速移动
            var lastKey = -1;
            window.addEventListener('keydown', function (e) {
                if (e.keyCode == lastKey) {
                    switch (e.keyCode) {
                        case 37:
                            if (Snake.direct == "right") {
                                return;
                            }
                            Snake.direct = "left";
                            break;
                        case 38:
                            if (Snake.direct == "down") {
                                return;
                            }
                            Snake.direct = "up";
                            break;
                        case 39:
                            if (Snake.direct == "left") {
                                return;
                            }
                            Snake.direct = "right";
                            break;
                        case 40:
                            if (Snake.direct == "up") {
                                return;
                            }
                            Snake.direct = "down";
                            break;
                    }
                    Snake.move();
                }
                lastKey = e.keyCode;
            })
        })
    </script>
</body>
 
</html>

效果图:

JavaScript实现贪吃蛇游戏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
jQuery事件用法详解
Oct 06 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
JQuery animate动画应用示例
May 14 jQuery
package.json配置文件构成详解
Aug 27 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
Vue过滤器(filter)实现及应用场景详解
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Axios取消重复请求的方法实例详解
使用JS实现简易计算器
微信小程序实现聊天室功能
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
You might like
记录mysql性能查询过程的使用方法
2013/05/02 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
整理Javascript事件响应学习笔记
2015/12/02 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
赡养老人协议书
2014/04/21 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
初中差生评语
2014/12/29 职场文书
学生保证书格式
2015/02/27 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
详解nginx location指令
2022/01/18 Servers