JavaScript+HTML 实现贪吃蛇简陋版

最新推荐文章于 2022-06-26 11:33:16 发布
最新推荐文章于 2022-06-26 11:33:16 发布
阅读量384 收藏 2
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31878883/article/details/89266395
版权

有一天午睡突然突发奇想写个贪吃蛇玩一玩,一开始是想用c来写,然后弄一个8*8的点阵屏来玩的,但是又觉得太过于麻烦,所以就想着用最简单的方法来实现,所以就选择了JavaScript和HTML来实现,简述一下实现原理和提出代码

示例demo

snake-game
建议用手机打开,当然电脑也做了上下左右键盘控制,但是显示效果是为了手机显示适应的

效果图

效果图

实现原理

我觉得弄这个需要一点点的面相对象的思维就能简简单单的实现,首先我们需要有一个地图,所以就需要在这个地图上建立坐标系,不让我们的贪吃蛇抛出我们的坐标系,所以我就选择了二维数组来建立我们的坐标系,然后给每个坐标都设定一个值(我设定的就是x轴左边加y轴坐标的字符串),然后我们还需要一条贪吃蛇,和砖块,这里其实可以看成一部分,其实砖块就是我们坐标里面对应的值,而我们的贪吃蛇就是这个砖块的数组,所以我们可以理解成以下样子

地图:
一个二维数组
贪吃蛇
一个包含在地图里面的一维数组 ==> 多个砖块的拼接组成的一个数组
砖块
一个地图里面对应的准确的值

所以看到这里就很简单了,所谓的贪吃蛇其实就是在操作我们熟知的数组

上述的是我们游戏里面涉及到的元素,接下来我们讲讲我们涉及到的一些动作

蛇的行动范围

这个其实很简单,主要就是对蛇头做判断(数组第一个),只要蛇头不大于地图数组,游戏便可以继续下去

蛇的位移

其实蛇移动比较容易理解,例如 向下移动的时候y轴坐标＋1,x轴坐标不动 其他方向同理,这样就能实现蛇的整体位移
示例
看图比较容易看懂,就是蛇头以后得元素需要向之前的移动

蛇的成长

示例

这里我们有使用数据结构中比较高级的插入方式,使用了我比较喜欢的渣渣方式,就是直接在数组的后面添加一个元素,实现蛇吃砖块长大的方式

砖块的随机生成
这里需要确保不会和我门蛇的数组位置冲突,需要做一些判断

蛇吃自己
这里只需要判断蛇里面没有重复的元素便可以了

视图渲染
每次蛇的移动完成以后都生成一个0和1组成的二维数组,遍历数组为HTML添加颜色就可以了

写在最后
其实实现起来远比我说明的这些要容易的多,毕竟我是一个喜欢讲废话的人,我个人觉得看了代码就知道这个东西确实是挺简单的

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=0">
    <title>snake game</title>
    <style>
        * {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #score {
            font-size: 300%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #handle {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            font-size: 150%;
        }

        .game-row {
            display: flex;
            flex-direction: row;
        }

        .game-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border: 1px #ce53d2 solid;
        }

        .game-column-snake {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border: 1px #ce53d2 solid;
            background: black;
        }

        .game-column-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border: 1px #ce53d2 solid;
            background: lightgreen;
        }

        .center {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body id="body" style="display: flex;flex-direction: column">
<div id="score">分数</div>
<div id="game"></div>
<div id="handle">
    <div class="center" style="height: 30%;" "handle('up')">上</div>
    <div style="display: flex;flex-direction: row;height: 60%;">
        <div class="center" "handle('left')">左</div>
        <div class="center" "handle('start')">重新开始</div>
        <div class="center" "handle('right')">右</div>
    </div>
    <div class="center" style="height: 30%;" "handle('down')">
        下
    </div>
</div>
</body>
<script>
    var w = 0,//页面的宽度
        h = 0,//页面的高度
        block = '00',//砖块
        snake = [],//蛇
        map = [], //实际坐标系
        xy = [],//渲染坐标系
        hanld = 'right', //走动方向
        mapSize = 10, //地图大小
        score = 0,//游戏积分
        level = 500,//游戏等级,默认是800毫秒走一次
        endflag = false,
        runStatus = 0;//自动运行标记
    main();

    /**
     * 主方法
     */
    function main() {
        initShow();
        initMap();
        genSnake();
        genBlock();
        gen01();
        next();
    }

    /**
     * 初始化页面信息
     */
    function initShow() {
        //获取body的高度和宽度
        var dom = document.getElementById("body");
        w = dom.offsetWidth, h = dom.offsetHeight;
        var h_w = h - w;
        //自适应分数显示区域的高度
        var score = document.getElementById('score');
        score.style.height = parseInt(h_w) * 0.2 + 'px';
        //自适应操作示区域的高度
        var handle = document.getElementById('handle');
        handle.style.height = parseInt(h_w) * 0.8 + 'px';
        //自适应游戏区域的高度和宽度
        var game = document.getElementById('game');
        game.style.width = parseInt(w) + 'px';
        game.style.height = parseInt(w) + 'px';
    }

    /**
     *初始化地图
     */
    function initMap() {
        for (var x = 0; x < mapSize; x++) {
            map[x] = [];
            for (var y = 0; y < mapSize; y++) {
                map[x][y] = splitStr(y, x);
            }
        }
    }

    /**
     * 生成随机数
     * @param filter 需要过滤掉的数字
     * @returns {number}
     */
    function rand(filter) {
        var rand = parseInt(Math.random() * 10);
        if (rand == filter) {
            rand(filter);
        }
        return rand;
    }

    /**
     * 将坐标系转换成0/1的数组
     */
    function gen01() {
        var overflag = false;
        for (var i = 0; i < mapSize; i++) {
            xy[i] = [];
            for (var j = 0; j < mapSize; j++) {
                xy[i][j] = 0;
                for (var s = 0; s < snake.length; s++) {
                    if (snake[s] == map[i][j]) {
                        xy[i][j] = 1;
                        break;
                    }
                }
                if (block == map[i][j]) {
                    xy[i][j] = 2;
                }
                if (snake[0] == map[i][j]) {
                    overflag = true;
                }
            }
        }
        if (!overflag) {
            //游戏结束
            showover();
        } else {
            if (!endflag) {
                //生成进制以后就将数据渲染到HTML中去
                show(xy);
            }
        }
    }

    /**
     * 生成小蛇
     */
    function genSnake() {
        snake.push(splitStr(rand(), rand()));
    }

    /**
     * 生成随机砖块
     */
    function genBlock() {
        block = splitStr(rand(), rand());
        //确保生成砖块不会生成到和蛇一样的,否则就重新生成
        for (var i in snake) {
            if (block == snake[i]) {
                genBlock();
            }
        }
    }

    /**
     * 蛇向下一步移动
     */
    function next() {
        clearTimeout(runStatus);
        changeSnakeHead();
        eatself();
        eatblock();
        gen01();
        runStatus = setTimeout(function () {
            next();
        }, level);
    }


    /**
     * 判断蛇是否吃自己
     */
    function eatself() {
        for (var s = 0; s < snake.length; s++) {
            if (s > 0 && snake[s] == snake[0]) {
                showover();
                break
            }
        }
    }

    /**
     * 修改蛇的身体
     */
    function changeSnakeHead() {
        var tempa = snake[0];
        for (var i = 0; i < snake.length; i++) {
            var a = snake[i][0], b = snake[i][1];
            if (i == 0) {
                switch (hanld) {
                    case 'up':
                        snake[i] = splitStr(a, parseInt(b) - 1);
                        break;
                    case 'down':
                        snake[i] = splitStr(a, parseInt(b) + 1);
                        break;
                    case 'left':
                        snake[i] = splitStr(parseInt(a) - 1, b);
                        break;
                    case 'right':
                        snake[i] = splitStr(parseInt(a) + 1, b);
                        break;
                }
            } else {
                var tempb = tempa;
                tempa = snake[i];
                snake[i] = tempb;
            }
        }
    }

    /**
     * 吃砖块
     */
    function eatblock() {
        if (snake[0] == block) {
            var tail = snake[snake.length - 1], temp = [], a = tail[0], b = tail[1];
            switch (hanld) {
                case 'up':
                    temp = splitStr(a, parseInt(b) + 1);
                    break;
                case 'down':
                    temp = splitStr(a, parseInt(b) - 1);
                    break;
                case 'left':
                    temp = splitStr(parseInt(a) + 1, b);
                    break;
                case 'right':
                    temp = splitStr(parseInt(a) - 1, b);
                    break;
            }
            snake.push(temp);
            addscore();
            genBlock();
        }
    }

    /**
     *  修改蛇的身体结构
     * @param x
     * @param y
     */
    function splitStr(x, y) {
        return x + '' + y;
    }


    /**
     * 键盘按下事件绑定
     */
    document.onkeydown = function (e) {
        var e = window.event || e;
        switch (e.keyCode) {
            case 37: //左
                hanld = hanld != 'left' && hanld != 'right' ? 'left' : hanld;
                break;
            case 38: //上
                hanld = hanld != 'up' && hanld != 'down' ? 'up' : hanld;
                break;
            case 39:  //右
                hanld = hanld != 'left' && hanld != 'right' ? 'right' : hanld;
                break;
            case 40:  //下
                hanld = hanld != 'up' && hanld != 'down' ? 'down' : hanld;
                break;
        }
    }

    /**
     * 按键事件处理
     */
    function handle(e) {
        if (e == 'start') {
            if (endflag) {
                //只有输掉游戏才能重新开始游戏
                window.location.reload();
            }
        } else {
            if ((hanld == 'left' || hanld == 'right')) {
                if (e == 'up' || e == 'down') {
                    hanld = e;
                }
            } else {
                if (e == 'left' || e == 'right') {
                    hanld = e;
                }
            }
        }
    }

    /**
     * 添加游戏积分,目前的积分就是蛇的长度
     */
    function addscore() {
        var score = parseInt(snake.length) - 1;
        //根据游戏得分修改游戏等级,一共分五个等级,
        if (score > 20) {
            level = 250;
        } else if (score > 15) {
            level = 300;
        } else if (score > 10) {
            level = 350;
        } else if (score > 5) {
            level = 400;
        } else if (score > 1) {
            level = 450;
        } else {
            level = level;
        }
        document.getElementById('score').innerHTML = '分数:' + score;
    }

    /**
     * 将数据渲染在页面上去
     * @param xy
     */
    function show(xy) {
        var html = '',
            height = parseInt(w) / mapSize;
        for (var i = 0; i < mapSize; i++) {
            html += '<div class="game-row" style="height:' + height + 'px;">'
            for (var j = 0; j < mapSize; j++) {
                if (xy[i][j] == 1) {
                    html += '<div class="game-column-snake"></div>';
                } else if (xy[i][j] == 2) {
                    html += '<div class="game-column-block"></div>';
                } else {
                    html += '<div class="game-column"></div>';
                }

            }
            html += '</div>';
        }
        document.getElementById('game').innerHTML = html;
    }

    /**
     * 游戏结束
     */
    function showover() {
        document.getElementById('game').innerHTML = '<h1 align="center" style="font-size: 500%;color:red;">game over!</h1>';
        endflag = true;
    }


</script>
</html>
Lengff12138
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript做贪吃蛇
weixin_55743273的博客
01-05 2928
文章目录前言一、效果动画展示二、html主页面二、三个js包1.Game.js2.Snake.js （蛇的设置）3.Food.js (食物的设置) 前言 这个关卡是用JavaScript做的一个贪吃蛇游戏 一、效果动画展示 二、html主页面 代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp
web html css js贪吃蛇
人生当苦无妨
08-23 283
贪吃蛇 <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .backDiv { text-align: center; position:absolute; to
4个html小游戏源码
05-10
4个html小游戏源码,小游戏源码集合 ,立即下载，可直接运行 ，供学习
源码实现html贪吃蛇
weixin_44490080的博客
04-16 6998
HTML贪吃蛇源码实现 这段代码用到了jQuery， 注意代码里面引入的外部jQuery.jsp，可以自行去官网下载。 效果： 操作：上下左右键控制方向 源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <s...
HTML+JQ实现贪吃蛇
qq_36999656的博客
06-26 150
HTML+JS 实现贪吃蛇
前端领域：html+css+javascript实现贪吃蛇游戏
01-23
JavaScript是一种高级编程语言，用于在网页上实现交互和动态性。它是一种面向对象的语言，具有类似于C语言的语法和功能。 JavaScript最初是为了在网页上添加简单的交互功能而创建的，但随着时间的推移，它已经发展...
Javascript + canvas 实现贪吃蛇小游戏
10-17
在本项目中，"Javascript + canvas 实现贪吃蛇小游戏" 是一个利用HTML5的Canvas API和JavaScript语言构建的经典小游戏。Canvas是HTML5的一个重要特性，它允许在网页上进行动态图形绘制，非常适合用于开发此类交互式...
用 js + html 实现贪吃蛇小游戏
05-31
使用 js + html 实现的贪吃蛇小游戏，使用canvas绘制图形，在一般的贪吃蛇游戏的规则基础上增加了障碍物，游戏可以选择简单、一般、困难三种模式，随着分数的增加可以提升等级，增加了游戏的趣味性，并且提供了游戏...
小练手+JavaScript+贪吃蛇
08-04
贪吃蛇游戏则是利用JavaScript实现的一个经典案例，玩家控制一条蛇移动，吃食物并避免碰撞自身。 【压缩包子文件的文件名称列表】中包含了以下四个文件： 1. **index.html**：这是网页的主文件，包含HTML标记来定义...
HTML+JS实现贪吃蛇demo
05-07
通过这个项目，你可以了解到网页游戏的基本构建过程，以及如何结合HTML、CSS和JavaScript实现动态交互的效果。这个demo对于提升JavaScript编程技能，特别是理解事件驱动编程和实时更新游戏状态等方面，具有很好的...
【轨迹跟踪】基于matlab惯性导航系统INS惯性测量单元 IMU跟踪物体运动轨迹【含Matlab源码 7350期】.mp4
08-25
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
基于微信小程序模拟考试设计与实现.docx
08-25
基于微信小程序模拟考试设计与实现.docx
打车票管理系统前端_invoice_vue.zip
08-25
打车票管理系统前端_invoice_vue
Windows Server2019主域控制器与额外备份域控制器之间的角色转换
08-25
Windows Server2019主域控制器与额外备份域控制器之间的角色转换 场景一：主域控服务器正常，主域角色转移到备份域控,使备份域成为主域控 场景二：主域控服务器挂掉了，额外/备份域控制器夺取角色成为主域控
数值积分：数学建模的桥梁与钥匙
08-25
数学建模是一种应用数学技术，它使用数学概念和各种数学工具来构建现实世界问题的表示和解决方案。这个过程通常包括以下几个关键步骤： 1. **问题定义**：明确需要解决的问题，确定问题的范围和目标。 2. **数据收集**：收集与问题相关的数据，这些数据可能来自实验、调查、历史记录等。 3. **模型构建**：使用数学语言（如方程、不等式、函数、图论等）来描述问题。这可能包括确定变量、参数和它们之间的关系。 4. **模型求解**：应用数学和计算方法来求解模型。这可能包括解析解、数值解或优化方法。 5. **结果分析**：对模型的解进行分析，以确定它们是否合理，是否满足问题的要求。 6. **验证与测试**：通过与实际数据或情况的比较来验证模型的有效性。 7. **报告撰写**：编写详细的报告，描述建模过程、结果以及可能的局限性。 数学建模可以应用于各种领域，包括但不限于工程、物理学、生物学、经济学、金融、社会科学等。它是一种强大的分析工具，可以帮助决策者理解复杂系统的行为，预测未来趋势，优化资源分配等。 数学建模的关键特点包括： - **抽象**：从具体问题中抽象出数
黄狗文字套装-ASD-000
08-25
555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555556666666666666777777555555555555555555555555555555555577777777777777777777777777777777766666666666666666666666
汽车票务管理系统用户版_TicketSystem.zip
最新发布
08-25
汽车票务管理系统用户版_TicketSystem
基于Springboot和vue的 校园便利平台源码 （优秀毕业设计源码）
08-25
1. 校园便利平台代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是Springboot，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
VisualC++6.0实现贪吃蛇游戏：界面与功能解析
贪吃蛇游戏是一款经典的休闲游戏，此演示版展示了如何利用编程技术实现这一游戏。开发者选择了Microsoft Visual C++ 6.0作为开发工具，这是一个流行的Windows操作系统下的C++集成开发环境，尽管已有一些更新的版本，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值