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 相关文章推荐
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
Vue过滤器(filter)实现及应用场景详解
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Axios取消重复请求的方法实例详解
使用JS实现简易计算器
微信小程序实现聊天室功能
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
You might like
PHP 组件化编程技巧
2009/06/06 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
javascript动态加载实现方法一
2012/08/22 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
深入理解python对json的操作总结
2017/01/05 Python
python使用Tesseract库识别验证
2018/03/21 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
Django csrf 验证问题的实现
2018/10/09 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
Structs界面控制层技术
2013/10/11 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
公司年会演讲稿范文
2014/01/11 职场文书
成龙洗发水广告词
2014/03/14 职场文书
法人授权委托书格式
2014/04/08 职场文书
《社戏》教学反思
2014/04/15 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
代领报检证委托书范本
2014/10/11 职场文书