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中实现块作用域的方法
Apr 01 Javascript
js中的string.format函数代码
Aug 11 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
Vue过滤器(filter)实现及应用场景详解
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Axios取消重复请求的方法实例详解
使用JS实现简易计算器
微信小程序实现聊天室功能
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
You might like
php 购物车的例子
2009/05/04 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
jquery操作select大全
2014/04/25 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
bootstrap table插件动态加载表头
2019/07/19 Javascript
python开启多个子进程并行运行的方法
2015/04/18 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python sys.argv[]用法实例详解
2018/05/25 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Django REST framework内置路由用法
2019/07/26 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
如何教少儿学习Python编程
2020/07/10 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
读后感作文评语
2014/12/25 职场文书
员工辞退通知书
2015/04/17 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python