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 URL锚点取值方法
Feb 25 Javascript
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
js中typeof的用法汇总
Dec 12 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
Vue过滤器(filter)实现及应用场景详解
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Axios取消重复请求的方法实例详解
使用JS实现简易计算器
微信小程序实现聊天室功能
小程序实现文字循环滚动动画
React 高阶组件HOC用法归纳
Jun 13 #Javascript
You might like
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
jquery中动态效果小结
2010/12/16 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
几种响应式文字详解
2017/05/19 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
python使用tornado实现登录和登出
2018/07/28 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python zip()函数使用方法解析
2019/10/31 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
大学生入党思想汇报
2014/01/14 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
我的求职择业计划书
2014/04/04 职场文书
摄影展策划方案
2014/06/02 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
js 数组 fill() 填充方法
2021/11/02 Javascript
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫