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

最新推荐文章于 2024-05-15 08:59:23 发布
最新推荐文章于 2024-05-15 08:59:23 发布
阅读量890 收藏 3
点赞数
分类专栏： Javascript

曾经诺基亚的贪吃蛇风靡一时，在游戏匮乏的年代，用java实现太难，现在网页制作20行代码就做成一个简单的demo了，时代在进步啊

代码：

[html]  view plain  copy
  1. <!doctype html>  
  2. <html>  
  3. <body>  
  4.     <canvas id="can" width="400" height="400" style="background: Black"></canvas>  
  5.     <script>  
  6.         var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");  
  7.         function draw(t, c) {  
  8.             ctx.fillStyle = c;  
  9.             ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);  
  10.         }  
  11.         document.onkeydown = function(e) {  
  12.             fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n  
  13.         };  
  14.         !function() {  
  15.             sn.unshift(n = sn[0] + fx);  
  16.             if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)  
  17.                 return alert("GAME OVER");  
  18.             draw(n, "Lime");  
  19.             if (n == dz) {  
  20.                 while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);  
  21.                 draw(dz, "Yellow");  
  22.             } else  
  23.                 draw(sn.pop(), "Black");  
  24.                 setTimeout(arguments.callee, 130);  
  25.         }();  
  26.     </script>  
  27. </body>  
  28. </html>  

这是开始游戏：

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

这是游戏结束：

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


转载来自：http://blog.csdn.net/hj7jay/article/details/51011269

放肆青春的博客
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS：100行js代码带你实现【像素鸟】小游戏（完整代码+素材图片）
小安驾到的博客
09-16 1万+
100行代码带你实现经典小游戏【像素鸟】，附有项目全部素材文件和完整代码
贪吃蛇代码实现
Gallavich_的博客
11-17 3155
easyx绘制图形坐标轴的原点位于界面的左上角，x轴向右为正，y轴向下为正，单位是像素点。EW_NOMINIMIZE 禁用绘图窗口的最小化按钮。eayx是针对c++的图形库，s可以帮助初学者上手游戏和图形化编程。EW_DBLCLKS 在绘图窗口中支持鼠标双击事件。flag：绘图窗口的样式，默认为 NULL。EW_NOCLOSE 禁用绘图窗口的关闭按钮。EW_SHOWCONSOLE 显示控制台窗口。height：绘图窗口的高度。width：绘图窗口的宽度。ps:也可以不写前面的EW_
2024年最新9个很酷的cmd命令，字节跳动面试分享
最新发布
2401_84919801的博客
05-15 363
操作方法：在提示符状态输入命令“netsh wlan show profile SSID key=clear”，输入完成后Windows会自动返回当前已连接WIFI的详细信息，包括SSID和连接密码。45、mem.exe：显示内存运用情况(如果直接运行无效，可以先管理员身份运行命令提示符，在命令提示符里输入mem.exe>d:a.txt 即可打开d盘查看a.txt，里面的就是内存运用情况了。攻击和防守要学的东西也不少，具体要学的东西我都写在了上面的路线图，如果你能学完它们，你去就业和接私活完全没有问题。
利用原生js制作小游戏
weixin_45044349的博客
05-26 3867
1.编写函数： 该函数对游戏间隔时间、影响游戏的对象的绑定、开始、结束进行编写 /** * * @param {*} duration 间隔时间 * @param {*} thisObj 绑定的this对象 * @param {*} startCallBack 开始回调函数 * @param {*} stopCallBack 结束回调函数 */ function getTimer(duration, thisObj, startCallBack, stopCallBack) { va
原生js，实现一个终端小游戏！
学而不思则罔,思而不学则殆
12-27 2274
原生js，实现一个终端小游戏！
vue写的贪吃蛇（完整源码）
weixin_44596213的博客
11-17 2005
整个代码页面： <template> <div class="can"> <!-- 游戏界面 --> <div class="content" v-if="show"> <div class="snake-grassland"> <div class="snake" v-for="(item, index) in snake" :...
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）来实现一个简单的贪吃蛇游戏。首先，我们要了解贪吃蛇游戏的基本机制，它通常包含一个可移动的“蛇”、一块“食物”以及游戏区域的边界条件。 在提供的代码中，可以看到...
七个精典JS写的游戏源码
06-19
精选七个精典JS写的游戏源码，如果你正需要开发游戏，又或者你想学习JS游戏开发，又或者你想更深入学习和参照高手的代码，相信它一定适合你
html+JavaScript贪吃蛇原创（详细说明）
05-28
html+JavaScript贪吃蛇原创，代码可以修改性比较高，大家可以按照自己的修改，使用比较通俗的写法写的，很容易理解！
jsp网页实现贪吃蛇小游戏
10-15
主要为大家详细介绍了jsp网页实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue小游戏(扫雷、贪吃蛇)
01-28
Awesome-Game-master.zip
JS小游戏源码
04-22
各种js小游戏源码例如：微信打飞机， 泡泡龙，开心消消乐，架子鼓；所有代码均可正常运行，你值得拥有！
JavaScript实现2048小游戏，我终于赢了一把
热门推荐
编程界明世隐的博客
09-15 1万+
作者简介 作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 效果图 实现思路 编写页面和画布代码。 绘制背景。 绘制好全部卡片。 随机生成一个卡片（
面试题之用Vue手写贪吃蛇
wanghuan1020的博客
02-27 632
面试题之用Vue手写贪吃蛇面试题之用Vue手写贪吃蛇 面试题之用Vue手写贪吃蛇 做了一半，还犯了一个致命问题 以下是试后自己整理的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
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、付费专栏及课程。

余额充值