js开发实现简单贪吃蛇游戏（20行代码）

最新推荐文章于 2024-05-02 14:46:08 发布
最新推荐文章于 2024-05-02 14:46:08 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： Html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013772876/article/details/70327806
版权
<!doctype html>
<html>
<body>
<canvas id="can" width="400" height="400" style="background:Black"></canvas>
<script>
    var sn=[42,41],dz=43,fx=1,n,ctx=document.getElementById("can").getContext("2d");
    function draw(t,c){
        ctx.fillStyle=c;
        ctx.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
    }
    document.οnkeydοwn=function(e){fx=sn[1]-sn[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx)?fx:n};
    !function(){
        sn.unshift(n=sn[0]+fx);
        if(sn.indexOf(n,1)>0 || n<0||n>399||fx==1&&n%20==0||fx==-1&&n%20==19) return alert("GAME OVER");
        draw(n,"Red");
        if(n==dz){
            while(sn.indexOf(dz=~~(Math.random()*400))>=0);
            draw(dz,"Yellow");
        }else
            draw(sn.pop(),"Black");
        setTimeout(arguments.callee,330);
    }();
</script>
</body>

</html>


运行效果图：


夜半无声
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现的贪吃蛇游戏完整实例
12-12
本文实例讲述了JS实现的贪吃蛇游戏。分享给大家供大家参考，具体如下： 思想： 1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑 2、设计食物：属性宽、高 3、显示蛇：根据状态向地图里加元素 4、蛇跑起来：下一节到前一节的位置，蛇头根据方向变，删除原来的蛇，新建蛇；当出界时，死亡，初始化；当蛇头吃到自己的时候，死亡，初始化 5、食物被吃掉，蛇加一节，去掉原来的食物，生成新的食物 6、添加定时器，绑定按键 完整示例： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
【JS】原生js实现极简版贪吃蛇，附全部代码
小安驾到的博客
02-15 1341
原生js实现贪吃蛇小游戏，包括小蛇的移动、吃食物、检测是否撞到自己等功能
用js代码实现贪吃蛇小游戏
最新发布
guai_guai_guai的博客
05-02 1456
js已经学了大部分了，现在就利用我所学的js知识试试做贪吃蛇小游戏吧以下部分相关图片以及思路笔记均出自渡一陈老师的视频首先制作简单的静态页面，添加贪吃蛇移动的背景和相关图片，比如开始游戏等等将各个功能均封装在函数中，利用主函数调用分函数会使结构更清晰。
javaScript贪吃蛇
平安喜乐
11-16 4056
javaScript写的贪吃蛇，有注解和图片。
js实现贪吃蛇
deasec的博客
03-28 5335
很久没有打过js了，所以我翻出以前用画布(Canvas)标签做的贪吃蛇来复习一下顺便讲解一下执行原理。 实现思路：主要用到canvas标签来作为动画，采用逐帧运动法：先画一张之后销毁上一张，擦除->重绘（循环） 需要利用定时器每隔一小段时间就擦除->重绘。运动产生的原理就是：每次运动过程中在前面加一个头然后判断是否吃到食物。如果没有吃到食物就删除尾部(这样就产生前进的效果)，吃到了就不用删除：这样就比原来长度长了一段。边界判定就是获取当前蛇头位置的x,y乘以像素值n 判断是否达到了边界，还有头
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3108
JS 超详细 贪吃蛇 案例 速速围观
20行js代码实现的贪吃蛇小游戏.docx
01-12
标题中的“20行js代码实现的贪吃蛇小游戏”是指使用JavaScript编程语言，通过精简的代码量构建了一个简单的贪吃蛇游戏。这个小游戏的核心是利用JavaScript的事件监听、数组操作、条件判断以及定时器等特性来实现游戏...
JS贪吃蛇游戏代码
12-01
【JS贪吃蛇游戏代码】是一款基于JavaScript编写的网页小游戏，它将经典的贪吃蛇玩法移植到了浏览器环境中，为用户提供了丰富的游戏体验。这款游戏代码结构清晰，适合学习和研究JavaScript编程，尤其是对于游戏开发感...
js实现贪吃蛇游戏（简易版）
10-14
在本文中，我们将深入探讨如何使用JavaScript实现一个简单的贪吃蛇游戏。首先，我们要了解贪吃蛇游戏的基本机制：玩家控制一条由多个方块组成的蛇，通过吃食物来增长，同时避免撞到自身或墙壁。游戏的目标是尽可能长...
20行js小游戏贪吃蛇
11-06
下载之后是一个TXT文档，文档中存的是git的链接，自己复制链接到网页进行下载，或者直接保存网页到本地、拷贝网页代码等。
JS实现简易贪吃蛇游戏
10-14
这篇文章主要讲解如何使用JavaScript（JS）来实现一个简单的贪吃蛇游戏。首先，我们要了解贪吃蛇游戏的基本机制，它通常包含一个可移动的“蛇”、一块“食物”以及游戏区域的边界条件。 在提供的代码中，可以看到...
用javascript制作网页贪吃蛇游戏
2301_78098294的博客
06-02 567
【代码】用javascript制作网页贪吃蛇游戏。
html+js实现贪吃蛇小游戏
qq_45142260的博客
04-06 2846
使用原生js+html实现贪吃蛇小游戏,功能：蛇移动，蛇死亡（撞墙，咬到自己），蛇吃到食物成长，暂停，开始，重新开始。
小白理解 js 20行代码实现贪吃蛇
chen__mo的博客
11-18 2282
小白理解 js 20行代码实现贪吃蛇  偶然发现网上很多20行js实现贪吃蛇游戏的代码，但多数没有注释，作为一个新手非常痛苦，于是想试着理解，经历了数个小时后，终于摸到了一丝皮毛，故分享出来。 声明：代码不是原创，借鉴自前辈，自是尝试理解，若有侵权，抱歉！ html> html> body> canvas id="can" width="400" heig
用JavaScript写的贪吃蛇游戏（很简单，很详细）
热门推荐
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
二十行贪吃蛇代码详解
我想成长的快一点，再快一点...
10-25 2384
文章目录完整源码详解 完整源码 原文：https://blog.csdn.net/hj7jay/article/details/51011269 &lt;!doctype html&gt; &lt;html&gt; &lt;body&gt; &lt;canvas id="can" width="400" height="400" style="background: Black&q
JS学习——贪吃蛇代码（简易版）
awwwwmman的博客
05-17 3853
贪吃蛇目录页面游戏页面开始页面暂停页面代码html代码css代码js代码素材目录结构图片素材说明方块的构造函数方块原型上的方法蛇的构造函数蛇的初始化方法蛇的下一个位置方法（重点）这个方法用于获取蛇头的下一个位置对应的元素，并根据元素做不同的事情。处理碰撞后要做的事的方法move（重点）eatdie创建蛇的实例对象创建食物创建游戏逻辑游戏实例的初始化方法游戏的开始，暂停，结束方法游戏的开始start游戏的暂停pause游戏的结束over开始游戏和按钮暂停游戏和暂停游戏按钮 页面 游戏页面 开始页面 暂停页
前端实例 -- JS实现贪吃蛇小游戏
qq_43742385的博客
10-26 4011
使用语言 HTML+CSS+JavaScript 使用工具 visual studio code GitHub项目地址：贪吃蛇 项目运行截图： 项目功能分析：主要使用数组来存储蛇的位置，地图和蛇都是一个二维数组，对于有蛇的地方，地图的CSS就会发生改变，同时添加了添加了一个音乐播放按钮，通过CSS动画实现旋转。 项目代码：（项目代码有详细的注释） snake.html <!-- * @Author: CSU_XZY * @Date: 2020-10-13 22:06:51 * @LastE.
js用代码实现一个高级难度的贪吃蛇游戏，有讲解
06-07
好的，这是一个非常有挑战性的任务，需要用到很多JavaScript的基础知识和游戏开发的技术。我来给你讲解一下。 首先，我们需要了解贪吃蛇游戏的基本规则。玩家需要通过控制一条蛇来收集食物，每吃到一个食物，蛇的身体就会增加一节。如果蛇头碰到游戏界面的边缘或撞到自己的身体，游戏就会结束。玩家可以通过键盘控制蛇的移动方向，让蛇向上、下、左、右移动。 接下来，我们可以开始编写代码了。我们可以使用HTML5的canvas标签来创建游戏界面，然后使用JavaScript来控制游戏逻辑。 首先，我们需要创建一个canvas标签，并设置它的宽度和高度： ```html <canvas id="canvas" width="600" height="600"></canvas> ``` 然后，我们需要在JavaScript中获取canvas元素，并获取它的上下文对象，以便后续的绘图操作： ```javascript let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); ``` 接下来，我们需要定义一些变量来表示游戏状态： ```javascript let snake = []; // 蛇的身体 let food = {}; // 食物的位置 let direction = "right"; // 蛇的移动方向 let score = 0; // 得分 let gameover = false; // 是否游戏结束 ``` 然后，我们可以编写一些函数来初始化游戏状态，生成食物，绘制游戏界面等： ```javascript function init() { // 初始化蛇的身体 snake.push({ x: 3, y: 0 }); snake.push({ x: 2, y: 0 }); snake.push({ x: 1, y: 0 }); snake.push({ x: 0, y: 0 }); // 随机生成食物的位置 food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) }; // 初始化得分和游戏状态 score = 0; gameover = false; // 绘制游戏界面 draw(); } function draw() { // 绘制背景 ctx.fillStyle = "#EEE"; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制蛇的身体 ctx.fillStyle = "#333"; for (let i = 0; i < snake.length; i++) { ctx.fillRect(snake[i].x * 30, snake[i].y * 30, 30, 30); } // 绘制食物 ctx.fillStyle = "#F00"; ctx.fillRect(food.x * 30, food.y * 30, 30, 30); // 绘制得分 ctx.fillStyle = "#000"; ctx.font = "20px Arial"; ctx.fillText("Score: " + score, 10, 30); } ``` 然后，我们需要编写一个函数来处理键盘事件，让玩家可以通过键盘控制蛇的移动方向： ```javascript function handleKeyDown(event) { if (event.keyCode == 37 && direction != "right") { // 向左移动 direction = "left"; } else if (event.keyCode == 38 && direction != "down") { // 向上移动 direction = "up"; } else if (event.keyCode == 39 && direction != "left") { // 向右移动 direction = "right"; } else if (event.keyCode == 40 && direction != "up") { // 向下移动 direction = "down"; } } ``` 接下来，我们可以编写一个函数来更新蛇的位置，检测游戏是否结束，以及更新得分和游戏状态： ```javascript function update() { // 根据移动方向更新蛇的位置 let head = { x: snake[0].x, y: snake[0].y }; if (direction == "left") { head.x--; } else if (direction == "up") { head.y--; } else if (direction == "right") { head.x++; } else if (direction == "down") { head.y++; } snake.unshift(head); // 检测是否吃到食物 if (head.x == food.x && head.y == food.y) { // 生成新的食物位置 food = { x: Math.floor(Math.random() * 20), y: Math.floor(Math.random() * 20) }; // 增加蛇的长度 score++; } else { // 移除蛇的尾部 snake.pop(); } // 检测游戏是否结束 if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20) { gameover = true; } for (let i = 1; i < snake.length; i++) { if (head.x == snake[i].x && head.y == snake[i].y) { gameover = true; } } } ``` 最后，我们可以使用定时器来不断更新游戏状态和绘制游戏界面： ```javascript setInterval(function() { if (!gameover) { update(); draw(); } }, 100); ``` 这样，一个简单的贪吃蛇游戏就完成了。当然，你可以根据自己的需求和喜好来添加更多的功能和特效，比如添加音效、暂停功能、游戏难度等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值