好玩贪吃蛇（前端代码），别客气直接拿去~

最新推荐文章于 2024-06-18 16:20:14 发布
最新推荐文章于 2024-06-18 16:20:14 发布
阅读量1.2k 收藏 10
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Odl_Dragon/article/details/109111832
版权

HTML CSS JavaScript 游戏开发 贪吃蛇
关键词由CSDN通过智能技术生成

话不多说我直接上代码里面有很多注释供你看

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 800px;
            height: 400px;
            margin: 50px auto;
        }

        .btn {
            width: 100px;
            height: 40px;
        }

        .map {
            position: relative;
            width: 800px;
            height: 400px;
            background: #ccc;
        }
    </style>
</head>

<body>
    <div class="main">
        <button class="btn" id="begin">开始游戏</button>
        <div class="map" id="map">
        </div>
        <script type="text/javascript">
            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) { // 当吃到食物时，x==null，不能新建，不然会在0，0处新建一个
                            var s = document.createElement('div');
                            // 将节点保存到状态中，以便于后面删除
                            this.body[i].flag = s;
                            // 设置宽高
                            s.style.width = this.width + 'px';
                            s.style.height = this.height + 'px';
                            s.style.borderRadius = "50%";
                            s.style.background = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math
                                .random() * 256) + "," + Math.floor(Math.random() * 256) + ")";
                            // 设置位置
                            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);
                        }
                    }
                };

                // 让蛇跑起来,后一个元素到前一个元素的位置
                // 蛇头根据方向处理，所以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;
                            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("你该配眼睛了，这么慢的速度你都能撞墙！！！");
                        // 删除旧的
                        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; // 结束
                    }

                    // 判断蛇头吃到食物，xy坐标重合，
                    if (this.body[0].x == food.x && this.body[0].y == food.y) {
                        // 蛇加一节，因为根据最后节点定，下面display时，会自动赋值的
                        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("傻瓜！饿了也不能吃自己呀！");
                            // 删除旧的
                            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; // 结束
                        }
                    }

                    // 先删掉初始的蛇，在显示新蛇
                    for (var i = 0; i < this.body.length; i++) {
                        if (this.body[i].flag != null) { // 当吃到食物时，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 = 'red';
                    f.style.borderRadius = '50%';
                    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();

            // 给body加按键事件，上下左右
            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 () {
                clearInterval(timer);
                // timer = setInterval(snake.run(), 500);   // 先执行run函数，把执行得到的结果，每500毫秒执行一次，不会在执行内部代码
                timer = setInterval("snake.run()", 100); // 小技巧，每500毫秒执行字符串，字符串执行内部代码
            };
        </script>
    </div>
</body>

</html>
Odl Dragon
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从零开始实现贪吃蛇(完整代码)
qq_65898266的博客
06-26 6038
本文将分为三个部分来讲解贪吃蛇的实现，分为贪吃蛇开始前的游戏画面、游戏中画面、游戏结束画面，那我们开始吧！
贪吃蛇完整代码(史上最详细)
m0_74379014的博客
02-19 1万+
#include <stdio.h> int main()
贪吃蛇完整代码 简便
li___12345的博客
06-29 7293
【代码】贪吃蛇完整代码 简便。
贪吃蛇游戏代码（C语言项目）
最新发布
2401_83595513的博客
06-18 2861
【代码】贪吃蛇游戏代码（C语言项目）
贪吃蛇代码
qq_51697761的博客
04-06 9756
贪吃蛇的代码： import pygame,sys,time,random from pygame.locals import * # 定义颜色变量，颜色范围在0-255之间，由红、绿、蓝三个颜色组成的 redColour = pygame.Color(255,0,0) blackColour = pygame.Color(0,0,0) Colour=pygame.Color(0,200,200) whiteColour = pygame.Color(255,255,255) greyColour =.
HTML实现简单的贪吃蛇小游戏（附完整源码）
m0_56417836的博客
07-04 2万+
项目简介： 贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！项目核心技术： html5的canvas技术+js技术操作步骤： 游戏玩家通过操作键盘的方向键（上下左右键）来控制小蛇的方向，使小蛇吃到红色的食物，然后促使小蛇长大。并且，如果得到的分数在不断上涨，游戏的难度也会不断的上升（小蛇的移动速度会越来越快）。如果小蛇头部撞到墙壁或蛇自身体，就会判定游戏失败。......
HTML做一个贪吃蛇小游戏
ZTLJQ的博客
06-06 9866
☄️爬虫JS逆向系列专栏 -☄️python系列专栏 -
C语言实现贪吃蛇（详细版）
m0_73906588的博客
05-12 3万+
以上就是贪吃蛇的基本内容啦，完结撒花~下面有一些想说的话：这篇文章的完成时间是2023.5.12，我现在是一名大一下的计科学生，其实C语言在去年十月份的中旬就看完了翁恺老师的网课，那个时候其实就有能力完成这个贪吃蛇的编写了，但是知道现在才写完，其实是走了很多弯路，耽误了不少时间北哥，在加入北哥的知识星球”编程指北“后才回正了自己的学习方向，也希望大家都能在正确的道路上越走越远~
100行代码，轻松完成贪吃蛇小游戏，练完这个游戏你的Python就牛了
xiqng17111342931的博客
05-14 4493
100行代码，轻松完成贪吃蛇小游戏，练完这个游戏你的Python就牛了
贪吃蛇游戏（C语言实现）
Auraro_z的博客
02-06 9363
通过简单的c代码实现了这一款经典的小游戏贪吃蛇~
用html做贪吃蛇
02-06
贪吃蛇html版！目前虽然有些卡顿，但是挺好玩的，想想还是挺划算的，双击index.html即可开始贪吃蛇，加油！！！
HTML5 游戏开发实战 ｜ 贪吃蛇
不断学习，不断进步，提高自己
06-29 7097
在该游戏中，玩家操纵一条贪吃的蛇在长方形场地里行走，贪吃蛇按玩家所按的方向键折行，蛇头吃到食物(豆)后，分数加10分，蛇身会变长，如果贪吃蛇碰上墙壁或者自身的话，游戏就结束了(当然也可能是减去一条生命)。贪吃蛇游戏的运行界面如上图所示。
html+js实现贪吃蛇小游戏
qq_45142260的博客
04-06 2866
使用原生js+html实现贪吃蛇小游戏,功能：蛇移动，蛇死亡（撞墙，咬到自己），蛇吃到食物成长，暂停，开始，重新开始。
C语言小游戏--贪吃蛇（完整代码）
Liu1_1_的博客
10-26 3758
本文基于C语言，写的一游戏代码，可以利用键盘控制小蛇的移动，吃到食物，小蛇长度增加，得分加一，碰到砖块或是自己游戏失败。
贪吃蛇_代码+解析
m0_72413130的博客
04-21 2144
define UP 0 //上#define DOWN 1 //下#define LEFT 2 //左#define RIGHT 3 //右#define X 23 //X坐标#define Y 40 //Y坐标#define MAXLEN 200 //最大长度#define MINTIME 75 //等待时间。
HTML实现简单贪吃蛇小游戏
qq_61345460的博客
08-17 826
HTML实现简单贪吃蛇小游戏。
C语言实现超简单贪吃蛇（代码是抄的）,我做一下讲解
热门推荐
haohulala的博客
04-22 17万+
首先声明，代码是抄的，代码是抄的，代码是抄的，重要的事情说三遍。。如果有侵权请联系我删除。。贴原作者的视频。在b站看的，视频找不到了，我等下会贴代码。。先分析一下游戏的数据结构：1.游戏地图用一个数组bk[20][20]存储，有四种状态。0表示没东西；1表示墙；2表示果实；3表示蛇。2.用xy[2]来存放蛇前进的坐标，xy[0]表示横坐标，xy[1]表示纵坐标。。3.move[20][20]表示蛇...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值