闲着没事，自己做贪吃蛇耍耍？

最新推荐文章于 2021-12-07 14:36:18 发布
最新推荐文章于 2021-12-07 14:36:18 发布
阅读量1.2k 收藏 48
点赞数 14
分类专栏： Web 项目 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53620413/article/details/120614985
版权

前言

相信大家都玩过贪吃蛇这个游戏， 那你们想不想自己也做一做呢？可能会有人说很难把，不，其实不难，因为博主也是JS的入门小白，但是博主今天把贪吃蛇做出来了，做这个项目的时候，有一个小门槛给我卡住了，就是用哪种方式实现蛇的移动，如果这个你们都想出来了，那这个项目对你们来说 so easy！ 先来讲讲我的做法。

 前提准备：

  1. 蛇：属性有宽、高、方向、节数、方法：显示、移动

  2. 食物：属性宽、高、位置

  3.  显示蛇：根据状态向 container（相当于地图）里添加元素 

  4. 蛇跑动（重点！）：通过for循环，让蛇的下一节到前一节的位置，但是蛇头另外设置，根据蛇  头的方向改变，每次都要删除原来的蛇，创建新蛇；当出界时，死亡，初始化；当蛇头吃到自己的时候，死亡，初始化

  5. 食物被吃掉，蛇加一节，去掉原来的食物，生成新的食物

  6. 添加定时器，绑定按键 

效果呈现：  

 

实际代码： 

1. html+css部分

<!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>
    <script src="index2.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
        }
        .container {
            position: relative;
            width: 640px;
            height: 640px; 
            background-color: #fce4ec;
            margin: 20px auto;
            border: 20px solid #f8bbd0;
        }

        .center {
            width: 200px;
            height: 150px;
            margin-left: 50%;
            margin-top: 50%;
            transform: translate(-50%,-50%);
          
        }

        .center img {
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        /*点击暂停时的按钮显示*/
        .img {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            margin-left: 50%;
            margin-top: 50%;
            transform: translate(-50%,-50%);
            width: 50px;
            height: 50px;
            background-image: url(./btn4.png);
            background-size: 100% 100%;
        } 

 </style>
</head>
<body>
   <div class="container">
      <div class="center">
          <img src="btn1.gif" alt="">
      </div>
  <div class="img"> </div>
   </div>
</body>
</html>

2. JS部分 

window.addEventListener('load', function () {
    var btn = document.querySelector('.center');
    var container = document.querySelector('.container');
    function Snake() {
        //设置蛇的宽、高、默认走的方向
        this.width = 20;
        this.height = 20;
        this.direction = 'right';
        //蛇的初始状态为一个头加两个身体
        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.height = this.height + 'px';
                    s.style.width = this.width + 'px';
                    s.style.borderRadius = '10px';
                    //通过蛇头的方向，对蛇头进行旋转，确保蛇头和移动方向一致
                    if (i == 0) {
                        if (this.direction == 'up') {
                            s.style.transform = 'rotate(-90deg)';
                        }
                        if (this.direction == 'down') {
                            s.style.transform = 'rotate(90deg)';
                        }
                        if (this.direction == 'left') {
                            s.style.transform = 'rotate(-180deg)';
                        }
                        if (this.direction == 'right') {
                            s.style.transform = 'rotate(0)';
                        }
                      
                        s.style.backgroundImage = 'url(./snake.png)';
                        s.style.backgroundSize = '25px 20px';
                        s.style.backgroundPosition = 'center center';
                    } else {
                        s.style.backgroundColor = '#9ccc65';
                    }
                    s.style.position = 'absolute';
                    s.style.left = this.body[i].x * this.width + 'px';
                    s.style.top = this.body[i].y * this.height + 'px';
                    container.appendChild(s);
                }
            }
        }
        //蛇移动，后一个元素到前一个元素的位置
        //蛇头另外根据方向处理，所以 i 不等于0
        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;
            }
            //判断是否出界
            if (this.body[0].x < 0 || this.body[0].x > 29 || this.body[0].y < 0 || this.body[0].y > 29) {
                clearInterval(timer);
                alert('你的得分是' + score);
                //删除旧的
                for (var i = 0; i < this.body.length; i++) {
                    if (this.body[i].flag != null) {
                        container.removeChild(this.body[i].flag);
                    }
                }
                //初始化
                this.body = [
                    { x: 2, y: 0 }, //蛇头，第一个点
                    { x: 1, y: 0 }, //蛇身
                    { x: 0, y: 0 } //蛇身
                ];
                this.direction = 'right';
                score = 0;
                btn.style.display = 'block'; //结束显示开始按键
                container.removeChild(food.flag);
                // this.display();
                return false;
            }
            //判断蛇头吃到食物，xy坐标重合
            if (this.body[0].x == food.x && this.body[0].y == food.y) {
                //蛇加一节，因为根据最后节点定，下面 display时，会自动赋值的
                this.body.push({ x: null, y: null, flag: null });
                score++;
                //清除食物，重新生成食物
                container.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('你的得分是' + score);
                    //删除旧的
                    for (var i = 0; i < this.body.length; i++) {
                        if (this.body[i].flag != null) {
                            container.removeChild(this.body[i].flag);
                        }
                    }
                    //回到初始状态
                    this.body = [
                        { x: 2, y: 0 }, //蛇头，第一个点
                        { x: 1, y: 0 }, //蛇身
                        { x: 0, y: 0 } //蛇身
                    ];
                    this.direction = 'right';
                    score = 0;
                    btn.style.display = 'block'; //结束显示开始按键
                    container.removeChild(food.flag);
                    // this.display();
                    return false; //结束
                }
            }
            //先删除掉初始的蛇，再显示新蛇
            for (var i = 0; i < this.body.length; i++) {
                if (this.body[i].flag != null) { //当吃到食物时， flag等于 null,且不能删除
                    container.removeChild(this.body[i].flag);
                }
            }
            this.display();
        }
    }

    //构造食物
    function Food() {
        this.width = 20;
        this.height = 20;
        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.backgroundImage = 'url(./food2.png)';
            f.style.backgroundSize = '100% 100%';
            f.style.position = 'absolute';
            this.x = Math.floor(Math.random() * 30);
            this.y = Math.floor(Math.random() * 30);
            f.style.left = this.x * this.width + 'px';
            f.style.top = this.y * this.height + 'px';
            container.appendChild(f);
        }

    }
     var timer = null;
    var score = 0;
    var snake = new Snake();
    var food = new Food();
    var flag1 = false;
    var flag = false;
    var stop = document.querySelector('.img');
   
    btn.addEventListener('click', function (e) {
        clearInterval(timer);
        btn.style.display = 'none';
        snake.display();
        food.display();
        //加按键事件 ， 上下左右
        document.addEventListener('keydown', function (e) {
            switch (e.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;
            }
        });

        flag1 = true;
        
    })
    //开始后，点击游戏界面会暂停，再点击就继续
    
    container.addEventListener('click', function () {
        if (flag1) {
            if (flag) {
                clearInterval(timer);
                stop.style.display = 'block';
                flag = false;
            } else {
                clearInterval(timer);
                timer = setInterval(function () {
                    snake.run();
                }, 500)
                stop.style.display = 'none';
                flag = true;
            }
        }
        })
})

3. 用到的图片 

  

以上就是这个项目的全部啦，有兴趣又还没看懂的同学，可以留言评论哟~

啵啵丶
关注
  • 14
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Java实训的10000行代码
04-15
Java实训的一万行代码，谁需要的用就是了 可用作参考
不知不觉代码已经超过1万行了
dong51736的博客
12-18 574
自从接触这个模型管理的网站已经快5个月了，实际着手开发也有快4个月了，这两天老板已经逼着我出结果了。今天，真的有点累了，停下来休息一下也是可以的吗，。顺便看了一下代码量，没想到不知不觉中，项目中所写的代码已经超过1万行了。如果算上平常测试以及练手所写的代码，估计这四个月，写得代码应该有差不多2万行了吧。 哈哈，平均下来每天有快200行的代码量了,其中有实际应用的也接近100行了。作为一...
python写一万行代码_python向文件中写入一万行数据
weixin_28737603的博客
02-09 858
实际工作涉及到代码要对大批量数据文件进行读取下载入库，因此需要测试自己写一个大批量数据文件，然后把文件上传到ftp上，然后调用接口下载入库。然后自己看书的时候找到了一个方法，因此尝试的写了这么一段脚，以备后续参考。from ETC import etcmysqlconnent as pimport random,uuid,datetimeimport hashlibnow_time=datetim...
自己做的安卓贪吃蛇源码（注释极详细）
04-21
自己做的安卓贪吃蛇源码（注释极详细） 自己做的安卓贪吃蛇源码（注释极详细） 自己做的安卓贪吃蛇源码（注释极详细） 自己做的安卓贪吃蛇源码（注释极详细）
PYTHON做贪吃蛇代码
05-29
PYTHON做贪吃蛇代码 PYTHON做贪PYTHONPYTHON做贪吃蛇代码做贪吃蛇代码 吃蛇代码 PYTHON做贪吃蛇代码PYTHON做贪吃蛇代码PYPYTHON做贪吃蛇代码THON做贪吃蛇代码PYTHON做贪吃蛇代码PYTHON做PYTHON做贪吃蛇代码贪吃蛇...
vb贪吃蛇_用VB做的一个简单贪吃蛇游戏_
10-03
很简单的一个小游戏，有兴趣的可以下载玩玩
snake_Snake!_qt做的贪吃蛇_
09-30
利用qt写的贪吃蛇小游戏，可改变游戏速度，增加难度
JavaFX-GreedySnake.zip_javaFx_javafx 贪吃蛇_javafx做贪吃蛇_贪吃蛇
09-21
贪吃蛇游戏，JavaFX开发， 用于javafx学习，可无限复活
定个小目标：一月一万行代码（终结版）
m0_52358470的博客
12-07 626
前言：啊啊啊啊啊啊啊啊。。。。。 一个月快过半了，还没凑够怎么办，哭了哭了。。。 咦，我可以写个项目啊，这样代码量应该是可以了。。。。 嘿嘿嘿嘿嘿。。。。。 这是我在b站找的视频，一个关于vue和element的电商后台管理项目，主要练习一下权限管理，以及自己可怜的编码能力。 这是b站视频连接： 前端vue电商后台管理项目_哔哩哔哩_bilibili 这是我自己创建的码云仓库，最近开始写项目，每天都会更新（督促一下自己） 郑惠云/vue_shop 如果有同样想练习项目，但是不太能坚持的，一
总结：如何写代码 代码民工 编程者---怎么写算是1万行代码？
weixin_34194087的博客
03-12 146
我的主要问题是：当遇到一个问题的时候，不知道怎么把他转化成代码 　　-------------- 　　个人看法是：经验不足 　　建议： 　　1.抄代码：我以为，经验不足的人Ctrl+C , Ctrl+V完全是在浪费时间！！学不到什么东西！有一定经验以后可以Ctrl+C , Ctrl+V，因为你已经明白了代码背后的意义！没有经验的话，还是补补这些最基本的编码能力吧！ 　　2.把算法...
敲完第一万行代码我发现一个秘密
行者无疆的博客
08-29 2690
一入IT深似海，从此假期是路人，我成为程序员一年半，前一年写过的代码大概都没有这几个月多，最近接了一个项目，可谓是忙的昏天黑地，整整敲下了万余行代码，付出了很多，收获的也许更多，而且我发现了一个秘密——编程，是一个把代码越写越多再越写越少的过程。 首先，你要明白好的代码不可能是一蹴而就的，我们接到一个项目的时候，如果前期的需求理解透彻、代码结构规划良好会减少一些工作量，但做完这些之后，我们仍然要...
代码帝：一个月10万行代码
weixin_34168700的博客
06-03 480
我所知道的一般程序员的代码效率在一个月 2K到5K之间吧！我所知道的，具体多少根据实现语言不同会有差异。这是统计出来的数据，当然不是不可能更高的代码效率，只是那样会导致 bug数量的成倍增加，当然还有就是在项目开发的高峰阶段可能会提高一些，偶尔8千、1万行的也很出现，但是不会连续出现。   最近有个报道有位80后的MM居然达到了一个月10万行，而且一干就是4个月 ，各位童鞋还能hold住吗？我...
如何使用Pygame库实现Python贪吃蛇？
最新发布
05-10
使用 Pygame 库实现贪吃蛇游戏主要分为以下几个步骤： 1. 导入 Pygame 库并初始化 Pygame 环境。 ```python import pygame pygame.init() ``` 2. 设置游戏窗口和游戏界面。 ```python # 设置游戏窗口大小 WINDOW...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值