设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 原生js写贪吃蛇，简单易懂，适合初学！
返回列表 发新帖
查看: 2907|回复: 8

[学习笔记] 原生js写贪吃蛇，简单易懂，适合初学！

[复制链接]
千公子
发表于 2020-4-16 10:50:58 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
本帖最后由 千公子 于 2020-4-16 10:52 编辑

Index.html

                               
登录/注册后可看大图

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  8.     <link rel="stylesheet" href="game.css">
  9.     <title>贪吃蛇</title>
  10. </head>
  11. <body>
  12.     <p id="score">得分：<span id="score_number">0</span></p>
  13.     <table cellpadding="0" cellspacing="0" id="playground"></table>
  14.    
  15.     <script src="game.js"></script>
  16. </body>
  17. </html>
复制代码


game.css

                               
登录/注册后可看大图

  1. #playground{
  2.     border-collapse: collapse;
  3.     margin: auto;
  4. }
  5. #playground td{
  6.     width: 15px;
  7.     height: 15px;
  8.     border: 1px solid gainsboro;
  9. }

  11. #score_number{
  12.     color: tomato;
  13.     font-size: larger;
  14. }
  15. .black{
  16.     background: black;
  17. }

  19. .white{
  20.     background: white;
  21. }

  23. .food{
  24.         background: greenyellow;
  25. }
复制代码


game.js

                               
登录/注册后可看大图

  1. // 地图宽
  2. var map_width = 30;
  3. // 游戏定时器
  4. var timer;
  5. // 蛇对象
  6. var snake;

  8. function setClass(id, cn) {
  9.         $(id).removeClass();
  10.         $(id).addClass(cn);
  11. }

  13. // 产生食物
  14. function createFood() {
  15.         let x, y;
  16.         let idName;
  17.         do {
  18.                 x = Math.floor(Math.random() * map_width);
  19.                 y = Math.floor(Math.random() * map_width);
  20.                 idName = '#' + x + '_' + y;
  21.         } while ($(idName).hasClass('black'));
  22.         setClass(idName, 'food');
  23. }
  24. // 创建蛇对象
  25. function Snake() {
  26.         // 初始长度3
  27.         this.snakeBody = [
  28.                 [1, 3],
  29.                 [1, 2],
  30.                 [1, 1]
  31.         ];
  32.         // 初始方向
  33.         this.direction = "right";

  35.         // 初始化小蛇
  36.         for (let i = 0; i < this.snakeBody.length; ++i) {
  37.                 let x = this.snakeBody[i][0];
  38.                 let y = this.snakeBody[i][1];
  39.                 let idName = '#' + x + '_' + y;
  40.                 $(idName).removeClass();
  41.                 $(idName).addClass('black');
  42.         }

  44.         this.autoMove = function() {
  45.                 function move() {
  46.                         let x = snake.snakeBody[0][0];
  47.                         let y = snake.snakeBody[0][1];

  49.                         switch (snake.direction) {
  50.                                 case 'up':
  51.                                         x -= 1;
  52.                                         break;
  53.                                 case 'down':
  54.                                         x += 1;
  55.                                         break;
  56.                                 case 'left':
  57.                                         y -= 1;
  58.                                         break;
  59.                                 case 'right':
  60.                                         y += 1;
  61.                                         break;
  62.                         }
  63.                         let idName = "#" + x + "_" + y;
  64.                         // 判断撞墙或者吃到自己身体
  65.                         if (x < 0 || x >= map_width || y < 0 || y >= map_width || $(idName).hasClass('black')) {
  66.                                 alert("游戏结束");
  67.                                 clearInterval(timer);
  68.                                 return;
  69.                         }
  70.                         // 蛇身前移
  71.                         snake.snakeBody.unshift([x, y]);
  72.                         // 吃到食物
  73.                         if ($(idName).hasClass('food')) {
  74.                                 $(idName).removeClass('food');
  75.                                 // 更新分数
  76.                                 let score = parseInt($("#score_number").text()) + 10;
  77.                                 $("#score_number").text(score);
  78.                                 // 0.5秒后出现新的食物
  79.                                 setTimeout(createFood, 0.5);
  80.                         } else {
  81.                                 // 没吃到食物删除尾巴
  82.                                 let p = snake.snakeBody.pop();
  83.                                 let popIdName = '#' + p[0] + '_' + p[1];
  84.                                 setClass(popIdName, 'white');
  85.                         }
  86.                         // 新位置为蛇身
  87.                         setClass(idName, 'black');
  88.                 }
  89.                 // 200ms移动一次
  90.                 timer = setInterval(move, 200);
  91.         }
  92. }

  94. // 网页加载时执行
  95. window.onload = function() {
  96.         // 创建地图
  97.         for (let i = 0; i < this.map_width; ++i) {
  98.                 let tr = document.createElement("tr");
  99.                 for (let j = 0; j < this.map_width; ++j) {
  100.                         let td = document.createElement('td');
  101.                         td.setAttribute("class", "white");
  102.                         td.setAttribute('id', i + '_' + j);
  103.                         tr.appendChild(td);
  104.                 }
  105.                 $("#playground").append(tr);
  106.         }

  108.         // 1秒后创造第一个食物
  109.         setTimeout(createFood, 1000);
  110.         // 创造蛇对象
  111.         snake = new Snake();
  112.         snake.autoMove();

  114.         // 全局按键事件
  115.         $(document).keydown(function(event) {
  116.                 switch (event.keyCode) {
  117.                         case 37:
  118.                                 if (snake.direction != 'right') {
  119.                                         snake.direction = "left";
  120.                                 }
  121.                                 break;
  122.                         case 39:
  123.                                 if (snake.direction != 'left') {
  124.                                         snake.direction = "right";
  125.                                 }
  126.                                 break;
  127.                         case 38:
  128.                                 if (snake.direction != 'down') {
  129.                                         snake.direction = "up";
  130.                                 }
  131.                                 break;
  132.                         case 40:
  133.                                 if (snake.direction != 'up') {
  134.                                         snake.direction = "down";
  135.                                 }
  136.                                 break;
  137.                         case 32:
  138.                                 // 空格暂停
  139.                                 if (timer != null) {
  140.                                         clearInterval(timer);
  141.                                         timer = null;
  142.                                 } else {
  143.                                         snake.autoMove();
  144.                                 }
  145.                 }
  146.                 console.log("蛇(" + snake.snakeBody[0][0] + "," + snake.snakeBody[0][1] + ")的方向: " + snake.direction);
  147.         });
  148. }
复制代码

https://blog.csdn.net/qq_38203808/article/details/105528442

游戏界面.png

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

隔壁繁星吖
发表于 2020-4-16 10:54:33 | 显示全部楼层

回帖奖励 +10 鱼币

支持！
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

隔壁繁星吖
发表于 2020-4-16 10:55:49 | 显示全部楼层
额这个奖励设置错了吧
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

Hello.
发表于 2020-4-16 10:57:29 | 显示全部楼层
隔壁繁星吖 发表于 2020-4-16 10:55
额这个奖励设置错了吧

跟我一样。。。。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

千公子
 楼主| 发表于 2020-4-16 11:02:21 | 显示全部楼层
隔壁繁星吖 发表于 2020-4-16 10:55
额这个奖励设置错了吧

鱼币没有用！发福利！
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

千公子
 楼主| 发表于 2020-4-16 11:03:02 | 显示全部楼层
隔壁繁星吖 发表于 2020-4-16 10:55
额这个奖励设置错了吧

发福利！
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

Ivan艾凡
发表于 2020-4-16 13:50:06 | 显示全部楼层
优秀
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

suweixuan1998
发表于 2020-4-29 11:53:41 | 显示全部楼层
棒
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

1q2w3easxz
发表于 2020-5-28 12:18:50 | 显示全部楼层
隔壁繁星吖 发表于 2020-4-16 10:54
支持！

支持！！！
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-18 05:57

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表