纯JS手写超级简单贪吃蛇

最新推荐文章于 2021-09-09 19:49:29 发布
最新推荐文章于 2021-09-09 19:49:29 发布
阅读量674 收藏
点赞数 2
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43347855/article/details/109204934
版权

看看效果

在这里插入图片描述

先上代码，表示尊敬

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇画布</title>
    <!-- css部分需要放在头部，因为浏览器绘制好dom树后，需要再有cssTree结合成RenderTree，假如把css部分放在body的最下面
         可能会出现白屏，因为这个时候浏览器先解析dom树，再去解析css文件，再绘制到浏览器屏幕
         css部分放在头部，会提前加载好cssTree，接下来，遇到dom，遇到一个就直接渲染到浏览器屏幕，提升用户体验
     -->
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            background: #B0C4DE;
        }
    </style>

</head>

<body>
    <canvas width="600" height="600" id="huabu"></canvas>
    <!-- 放在这部分，因为浏览器的执行顺序是从上到下，先加载完dom结点，下面的getElementById才能正确获取到dom,
         如果是回调函数，可以放在head里面
     -->
    <script>
        var huabu = document.getElementById("huabu")
        var tools = huabu.getContext("2d")
        // 食物的默认位置
        var x = Math.floor(Math.random() * 20) * 30
        var y = Math.floor(Math.random() * 20) * 30

        //添加标记，食物是否被吃,默认值，没有被吃
        var isEated = false

        //蛇的默认位置
        var snake = [{ x: 3, y: 0 }, { x: 2, y: 0 }, { x: 1, y: 0 }]


        //蛇的移动方向
        var directionX = 1
        var directionY = 0


        //判断游戏是否结束
        var isGameOver = false

        //监听键盘按下的行为
        document.addEventListener('keydown', (event) => {
            // console.log('当前按下的值是', event.keyCode)
            //上：38
            //下：40
            //左: 37
            //右：39
            if (event.keyCode === 37) {
                directionX = -1;
                directionY = 0;
            } else if (event.keyCode === 38) {
                directionX = 0;
                directionY = -1;
            } else if (event.keyCode === 39) {
                directionX = 1;
                directionY = 0;
            } else if (event.keyCode === 40) {
                directionX = 0;
                directionY = 1;
            }
        })

        //通过使用定时器，产生动画效果
        setInterval(() => {

            if (isGameOver) {
                return
            }

            //清除上一次的画布
            tools.clearRect(0, 0, 600, 600)

            if (isEated) {
                //绘制随机食物,x,y的取值是[0,19]
                x = Math.floor(Math.random() * 20) * 30
                y = Math.floor(Math.random() * 20) * 30
            }

            tools.fillStyle = "#cccc00"
            tools.fillRect(x, y, 30, 30)


            //水平线   
            for (let i = 1; i < 20; i++) {
                tools.moveTo(0, 30 * i + 0.5)
                tools.lineTo(600, 30 * i + 0.5)
            }
            //垂直线   
            for (let i = 1; i < 20; i++) {
                tools.moveTo(30 * i + 0.5, 0)
                tools.lineTo(30 * i + 0.5, 600)
            }
            tools.strokeStyle = 'white'
            tools.stroke()

            if (snake[0].x * 30 === x && snake[0].y * 30 === y) {
                //蛇头位置和食物位置重合了，这时候不用snake.pop()，相当于蛇的长度增加了
                isEated = true;
            } else {
                isEated = false;
                snake.pop()
            }
            var oldHead = snake[0]
            var newHead = {
                x: oldHead.x + directionX,
                y: oldHead.y + directionY,
            }

            //游戏结束的判定
            if (newHead.x < 0 || newHead.x > 19 || newHead.y < 0 || newHead.y > 19) {
                isGameOver = true
            } else {
                snake.unshift(newHead)

                //绘制蛇
                for (let i = 0; i < snake.length; i++) {
                    if (i === 0) {
                        // 蛇头
                        tools.fillStyle = '#ff0033'
                    } else {
                        //蛇身
                        tools.fillStyle = '#333399'
                    }
                    tools.fillRect(snake[i].x * 30, snake[i].y * 30, 30, 30)
                }
                tools.fill()
            }


        }, 1000 / 3)



    </script>
</body>

</html>

这里需要先学一丢丢的canvas知识，对于新手朋友来说，canvas可以很简单的说，就是画图工具，就是这个

在这里插入图片描述

不同的是，canvas画图是用代码画的，这里是canvas中文文档

这里分析一下里面的逻辑：

1. 首先，怎么实现动画效果，因为canvas是一张画布，是静态的，但是使用计时器，每次都清除画布，并且新的画布的内容和旧的画布的内容稍微有点区别，是不是就是可以产生动画效果啦

 setInterval(() => {

            if (isGameOver) {
                return
            }

            //清除上一次的画布
            tools.clearRect(0, 0, 600, 600)

            if (isEated) {
                //绘制随机食物,x,y的取值是[0,19]
                x = Math.floor(Math.random() * 20) * 30
                y = Math.floor(Math.random() * 20) * 30
            }

            tools.fillStyle = "#cccc00"
            tools.fillRect(x, y, 30, 30)


            //水平线   
            for (let i = 1; i < 20; i++) {
                tools.moveTo(0, 30 * i + 0.5)
                tools.lineTo(600, 30 * i + 0.5)
            }
            //垂直线   
            for (let i = 1; i < 20; i++) {
                tools.moveTo(30 * i + 0.5, 0)
                tools.lineTo(30 * i + 0.5, 600)
            }
            tools.strokeStyle = 'white'
            tools.stroke()

            if (snake[0].x * 30 === x && snake[0].y * 30 === y) {
                //蛇头位置和食物位置重合了，这时候不用snake.pop()，相当于蛇的长度增加了
                isEated = true;
            } else {
                isEated = false;
                snake.pop()
            }
            var oldHead = snake[0]
            var newHead = {
                x: oldHead.x + directionX,
                y: oldHead.y + directionY,
            }

            //游戏结束的判定
            if (newHead.x < 0 || newHead.x > 19 || newHead.y < 0 || newHead.y > 19) {
                isGameOver = true
            } else {
                snake.unshift(newHead)

                //绘制蛇
                for (let i = 0; i < snake.length; i++) {
                    if (i === 0) {
                        // 蛇头
                        tools.fillStyle = '#ff0033'
                    } else {
                        //蛇身
                        tools.fillStyle = '#333399'
                    }
                    tools.fillRect(snake[i].x * 30, snake[i].y * 30, 30, 30)
                }
                tools.fill()
            }


        }, 1000 / 3)

2. 怎么绘制贪吃蛇吃的食物的随机位置，这里是利用Math.random()产生的随机数，再加上一些参数,用来确定坐标

        // 食物的默认位置
        var x = Math.floor(Math.random() * 20) * 30
        var y = Math.floor(Math.random() * 20) * 30

3. 怎么绘制新的贪吃蛇，就是利用pop()将旧的贪吃蛇的最后一节去除，然后利用unshift()添加新的头部

        //蛇的默认位置
        var snake = [{ x: 3, y: 0 }, { x: 2, y: 0 }, { x: 1, y: 0 }]
        if (snake[0].x * 30 === x && snake[0].y * 30 === y) {
              //蛇头位置和食物位置重合了，这时候不用snake.pop()，相当于蛇的长度增加了
              isEated = true;
          } else {
              isEated = false;
              snake.pop()
          }
          var oldHead = snake[0]
          var newHead = {
              x: oldHead.x + directionX,
              y: oldHead.y + directionY,
       }

4. 怎么通过键盘的上下左右键控制贪吃蛇的移动呢，利用dom的监听函数

        //监听键盘按下的行为
        document.addEventListener('keydown', (event) => {
            // console.log('当前按下的值是', event.keyCode)
            //上：38
            //下：40
            //左: 37
            //右：39
            if (event.keyCode === 37) {
                directionX = -1;
                directionY = 0;
            } else if (event.keyCode === 38) {
                directionX = 0;
                directionY = -1;
            } else if (event.keyCode === 39) {
                directionX = 1;
                directionY = 0;
            } else if (event.keyCode === 40) {
                directionX = 0;
                directionY = 1;
            }
        })

可能我的表达能力可能有所欠缺，或者大家想自己对着视频学习，推荐这个视频

有趣的万里挑一
关注
专栏目录
js写贪吃蛇
11-14
js写贪吃蛇，纯js和html 写的绝对可以用 用起来很方便
纯JS代码实现的贪吃蛇小游戏
09-29
在本项目中，我们讨论的是一个使用纯JavaScript（JS）编写的贪吃蛇小游戏。JavaScript是一种广泛用于网页和网络应用的编程语言，尤其在前端开发领域有着不可或缺的地位。这个小游戏的实现完全依赖于JS，无需其他框架...
纯JS写的贪吃蛇游戏（大二暑假实习）
蓝星花
02-27 1441
此游戏是大二暑假实习无聊，然后弄的，刚翻文件看到了，所以想和你们分享一下。。。源码下载：http://download.csdn.net/download/m0_37499059/10262200&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&amp
用js写一个简单的贪吃蛇小游戏
qq_41154692的博客
09-09 224
代码如下： HTML 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">
JavaScript写贪吃蛇
一个半路出家的人
09-19 920
分析: 游戏中有三个对象:地图(map), 食物(food), 蛇(snake) 地图很简单就是一个div盒子,给样式即可,蛇,和食物都是属于地图中的元素,相对于地图不断改变自己的坐标值,不要忘了给地图定位 食物 1,食物的构造函数,  属性===width,height,backgroundColor,left,top, 2,方法======init()初始化方法, 食物的位置在map...
JS写的贪吃蛇
sdlfx的专栏
10-24 2140
         昨晚睡前突然想用JS写一个贪吃蛇的程序。下午没什么事，于是就动笔了。不够熟练，花了两小时，更惭愧的是还有点问题，就是从吃第二个食物开始蛇的长度就不会增加了。整条蛇是一个对象数组，测试时发现数组的长度是正确的，只是保存的坐标有误，然未能想到怎么修正。         过了一天，晚上重新拿出来看，突然想到了是哪的问题。现将代码分享如下： head>meta http-
js实现简单贪吃蛇游戏
11-20
本文实例为大家分享了js实现简单贪吃蛇游戏的具体代码，供大家参考，具体内容如下 上下左右键控制方向使贪吃蛇吃葡萄 吃5个葡萄，游戏结束时左上角为总得分。 运行结果： 界面和css代码这里就不加赘述了，主要贴js...
纯js和css完成贪吃蛇小游戏demo
11-23
在本文中，我们将探讨如何使用纯JavaScript和CSS创建一个简单的贪吃蛇小游戏的示例。首先，我们看到HTML结构设置了游戏的基本布局。`<!doctype html>`确保浏览器以标准模式渲染页面，而`<meta charset="utf-8">`定义...
使用 JavaScript 编写的简单贪吃蛇游戏（附源代码）.zip
最新发布
07-24
使用 JavaScript 编写的简单贪吃蛇游戏（附源代码） 项目：使用 JavaScript 编写的简单贪吃蛇游戏（附源代码） 简单的贪吃蛇游戏是一款单人游戏。在这里，玩家必须控制有边框的平面上的黑色矩形框（称为蛇）。这款...
js实现简单的贪吃蛇游戏
11-21
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 运行截图： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小...
js实现贪吃蛇游戏-超简单
02-27
大二实习期间用js写的一个贪吃蛇游戏，对有些js和css/html的学习者有很大帮助。
html写的贪吃蛇JS
04-07
html写的贪吃蛇JS，通过html编写实现html小游戏的功能
利用js实现贪吃蛇的小游戏
07-14
利用js实现贪吃蛇的小游戏，用网页打开，请用ie浏览器打开
纯JS版本贪吃蛇（绝对精美）
03-27
暂不能商用，忍痛分享了；写了两天，主要是画面的设计，背景音乐的添加。
JS简易贪吃蛇
weixin_44264878的博客
05-30 280
分析 1.食物对象 自定义构造函数 在原型对象上初始化食物 把食物暴露给window 2.蛇对象 小蛇构造函数 在原型对象上初始化小蛇 添加方法–移动小蛇 判断小蛇是否吃到食物 封装删除小蛇的函数 3.游戏对象 游戏的构造函数 初始化游戏 添加方法使小蛇自动跑起来 设置按键. 来改变小蛇移动的方向 具体实现 //食物对象 ((function () { //1.自定义构造函数 ...
javascript写贪吃蛇
bob的博客
08-07 392
在简书上看到大白有褶子写的贪吃蛇，自己敲了一遍，用博客做个记录，以后再来看。 <!DOCTYPE html> <html> <head> <title>Snake game</title> <style media="screen"> *{ margin:0; padding:0; } .wrap{...
JS源码写个贪吃蛇
awawaw154的博客
09-18 178
JS源码写个贪吃蛇 1.写想好贪吃蛇的组成部分: 首先是初始的蛇头蛇身,蛇头的运动是根据键盘的上下左右来的，需要用到键盘事件，蛇身必须跟着蛇头走后面新加的也是。 再就是碰撞算法用于计算蛇头碰到食物后食物的位置发生随机改变以及自身蛇尾要加一块。 所以后面引出食物的随机位置算法以及DOM操作让蛇体多加一截元素。 最后就是判断游戏输的算法，那么下面我们细说。 2.一些现成的或者容易找到的我们就不谈了，比如键盘事件和运动框架。 我们说一下算法部分，首先是蛇运动出可视区的处理 if(oEvent.keyCode==3
用JavaScript实现贪吃蛇游戏
lizhihong92的博客
06-10 986
利用JavaScript实现贪吃蛇小游戏
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值