用js实现贪吃蛇游戏

最新推荐文章于 2024-06-04 23:11:16 发布
最新推荐文章于 2024-06-04 23:11:16 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： javascript 文章标签： javascript css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang68668/article/details/121376717
版权 

<style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 按钮样式 */
        
        #begin {
            width: 100px;
            height: 40px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 10px;
            border: none;
            box-shadow: 0 0 10px #b0b0b0;
        }
        /* 容器 */
        
        #map {
            position: relative;
            width: 800px;
            height: 400px;
            background: rgb(238, 211, 211);
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div id="map">
        <button id="begin">开始游戏</button>
    </div>
    <script>
        var map = document.getElementById('map');
        // 使用构造函数创建蛇，
        function Snake() {
            // 设置蛇的宽、高、默认走的方向
            this.width = 10;
            this.height = 10;
            this.direction = 'right';
            // 记住蛇的状态，初始为3个小点为一个蛇，
            this.body = [{
                    x: 2,
                    y: 0
                }, // 蛇头
                {
                    x: 1,
                    y: 0
                }, // 蛇身
                {
                    x: 0,
                    y: 0
                } // 蛇尾
            ];
            // 显示蛇
            this.display = function() {
                // 建立蛇
                for (var i = 0; i < this.body.length; i++) {
                    if (this.body[i].x != null) {
                        var s = document.createElement('div');
                        // 将节点保存到状态中
                        this.body[i].flag = s;
                        // 设置宽高
                        s.style.width = this.width + 'px';
                        s.style.height = this.height + 'px';
                        s.style.background = '#333';
                        s.style.border = '1px solid #b0b0b0'
                            // 设置位置
                        s.style.position = 'absolute';
                        s.style.left = this.body[i].x * this.width + 'px';
                        s.style.top = this.body[i].y * this.height + 'px';
                        // 添加
                        map.appendChild(s);
                    }
                }
            };
            // 让蛇动起来
            this.run = function() {
                // 后一个元素到前一个元素的位置
                for (var i = this.body.length - 1; i > 0; i--) {
                    this.body[i].x = this.body[i - 1].x;
                    this.body[i].y = this.body[i - 1].y;
                }
                // 根据方向处理蛇头
                switch (this.direction) {
                    case "left":
                        this.body[0].x -= 1;
                        break;
                    case "right":
                        this.body[0].x += 1;
                        break;
                    case "up":
                        this.body[0].y -= 1;
                        break;
                    case "down":
                        this.body[0].y += 1;
                        break;
                }
                // 判断是否出界
                if (this.body[0].x < 0 || this.body[0].x > 79 || this.body[0].y < 0 || this.body[0].y > 39) {
                    clearInterval(timer); // 清除定时器，
                    alert("游戏结束");
                    location.reload()
                        // 删除旧的
                    for (var i = 0; i < this.body.length; i++) {
                        if (this.body[i].flag != null) { // 如果刚吃完就死掉，会加一个值为null的
                            map.removeChild(this.body[i].flag);
                        }
                    }
                    this.body = [ // 回到初始状态，
                        {
                            x: 2,
                            y: 0
                        }, {
                            x: 1,
                            y: 0
                        }, {
                            x: 0,
                            y: 0
                        }
                    ];
                    this.direction = 'right';
                    this.display(); // 显示初始状态
                    return false; // 结束
                }
                // 判断蛇头吃到食物
                if (this.body[0].x == food.x && this.body[0].y == food.y) {
                    // 蛇加一节
                    this.body.push({
                        x: null,
                        y: null,
                        flag: null
                    });
                    // 清除食物,重新生成食物
                    map.removeChild(food.flag);
                    food.display();
                }
                // 吃到自己死亡
                for (var i = 4; i < this.body.length; i++) {
                    if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
                        clearInterval(timer); // 清除定时器，
                        alert("不要自己吃自己");
                        location.reload()
                            // 删除旧的
                        for (var i = 0; i < this.body.length; i++) {
                            if (this.body[i].flag != null) {
                                map.removeChild(this.body[i].flag);
                            }
                        }
                        // 回到初始状态，
                        this.body = [{
                            x: 2,
                            y: 0
                        }, {
                            x: 1,
                            y: 0
                        }, {
                            x: 0,
                            y: 0
                        }];
                        this.direction = 'right';
                        this.display(); // 显示回初始状态
                        return false;
                    }
                }
                // 先删掉初始的蛇，然后显示新蛇
                for (var i = 0; i < this.body.length; i++) {
                    if (this.body[i].flag != null) {
                        map.removeChild(this.body[i].flag);
                    }
                }
                // 重新显示蛇
                this.display();
            }
        }
        // 构造食物
        function Food() {
            /* 样式 */
            this.width = 10;
            this.height = 10;
            this.display = function() {
                var f = document.createElement('div');
                this.flag = f;
                f.style.width = this.width + 'px';
                f.style.height = this.height + 'px';
                f.style.background = '#333';
                f.style.position = 'absolute';
                this.x = Math.floor(Math.random() * 80);
                this.y = Math.floor(Math.random() * 40); //位置随机
                f.style.left = this.x * this.width + 'px';
                f.style.top = this.y * this.height + 'px';
                map.appendChild(f);
            }
        }
        var snake = new Snake();
        var food = new Food();
        snake.display(); // 初始化显示
        food.display();
        // 加键盘事件，上下左右
        document.body.onkeydown = function(e) {
            // 兼容低版本浏览器
            var ev = e || window.event;
            switch (ev.keyCode) {
                case 38:
                    if (snake.direction != 'down') {
                        snake.direction = "up";
                    }
                    break;
                case 40:
                    if (snake.direction != "up") {
                        snake.direction = "down";
                    }
                    break;
                case 37:
                    if (snake.direction != "right") {
                        snake.direction = "left";
                    }
                    break;
                case 39:
                    if (snake.direction != "left") {
                        snake.direction = "right";
                    }
                    break;
            }
        };
        // 点击开始时，动起来
        var begin = document.getElementById('begin');
        var timer;
        /* 按钮 */
        begin.onclick = function() {
            /* 点击之后按钮隐藏 */
            begin.style.display = "none"
            clearInterval(timer);
            timer = setInterval("snake.run()", 100);
        };
    </script>

</body>

 

 

清酒独酌
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现贪吃蛇案例
LY
05-05 961
贪吃蛇—面向对象的思想 面向对象的编程思想： 根据需求,抽象出相关的对象，总结对象的特征和行为，把特征变成属性，行为变成方法,然后定义(js)构造函数，实例化对象，通过对象调用属性和方法，完成相应的需求。 思路 贪吃蛇包含：地图、食物、蛇 地图： 地图的属性：宽、高、背景颜色 小蛇和食物是相对于地图显示，是地图的子元素，脱离文档流，所以地图也要脱离文档流---------css设置样式 &lt...
纯原生JS面向对象构造函数方法实现贪吃蛇小游戏
qq_23539691的博客
05-31 515
Demo介绍 用prototype构造函数写的贪吃蛇。直接复制代码到html文件就可以运行。学任何一门语言 练习逻辑都会写个贪吃蛇啥的，这不来了嘛 这个demo通过几个方法基本无HTML和css完全动态生成界面元素。基本注释都在代码中 源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>document</title> </head>
js实现贪吃蛇游戏
weixin_45791806的博客
09-12 433
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇游戏</title> <style> .game-container {
JavaScript实现贪吃蛇小游戏
热门推荐
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
JS贪吃蛇小游戏实现
超级小胖子的博客
11-14 995
JS贪吃蛇小游戏实现，暂停游戏，继续游戏，分数统计，数据配置化。
用JavaScript实现贪吃蛇游戏
lizhihong92的博客
06-10 973
利用JavaScript实现贪吃蛇小游戏
JavaScript实现贪吃蛇
Sunblogy的博客
09-26 1234
用js实现一个贪吃蛇游戏， 要求： 1. 不能撞墙 2. 不能撞自己 3. 每吃一个食物就会加一分 4. 相撞后就结束游戏
用js代码实现贪吃蛇小游戏
guai_guai_guai的博客
05-02 1177
js已经学了大部分了，现在就利用我所学的js知识试试做贪吃蛇小游戏吧以下部分相关图片以及思路笔记均出自渡一陈老师的视频首先制作简单的静态页面，添加贪吃蛇移动的背景和相关图片，比如开始游戏等等将各个功能均封装在函数中，利用主函数调用分函数会使结构更清晰。
用JS实现贪吃蛇小游戏
01-08
因为一般贪吃蛇游戏中的CSS样式较为简单，所以这里主要讲一下JS的写法。 食物生成 贪吃蛇中的食物是随机生成的且可以删除，这就需要我们利用js生成div。方便生成与删除，首先将食物存放进数组中方便删除，在利用...
js实现简单的贪吃蛇游戏
11-21
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 运行截图： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小...
js实现贪吃蛇游戏（简易版）
01-18
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 直接开始 效果图: 项目结构:图片自己找的 1.html <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> &...
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 631
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 203
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
React后台管理（十三）-- 页面常用hook封装 --- useTable封装
weixin_43883615的博客
05-29 506
紧接上一篇，本篇主要讲和表格相关的全局hook函数封装。结构分析：（1）这个 useTable 钩子的功能是用于管理表格的高度（2）接受一个可选的 params 对象作为参数，可以包含 id 和 offset 两个属性（3）定义getHeight函数，实时计算表格区域高度，控制滚动区域下一篇讲【示例页面构建教学】。关注本栏目，将实时更新。
KeyExpirationEventMessageListener监听器的使用
qq_47910339的博客
05-31 480
KeyExpirationEventMessageListener监听器的使用
vue 笔记03
m0_47045804的博客
05-30 919
vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性。data里面定义的数据无法直接互相访问 因为加载到data的时候还没有产生当前的vue对象。return 返回的结果就是当前计算属性的值。回调函数的参数就是过滤原本的值return 返回过滤的新值。
JavaScript第九讲：BOM编程
最新发布
星途码客的博客
06-04 754
今天星途给大家带来JavaScript倒数第二部分知识：BOM编程，希望对码客们有帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值