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 进度条 实现代码
Jul 30 Javascript
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
如何编写高质量JS代码
Dec 28 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
AngularJs 常用的过滤器
May 15 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
Vue过滤器(filter)实现及应用场景详解
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Axios取消重复请求的方法实例详解
使用JS实现简易计算器
微信小程序实现聊天室功能
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
You might like
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
php车辆违章查询数据示例
2016/10/14 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
js表单验证实例讲解
2016/03/31 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
python变量不能以数字打头详解
2016/07/06 Python
Python中扩展包的安装方法详解
2017/06/14 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Flask框架配置与调试操作示例
2018/07/23 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python getopt模块使用实例解析
2019/12/18 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
大专生自荐信
2013/10/04 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
购房意向书
2014/08/30 职场文书