Js 贪吃蛇

已于 2022-05-31 10:37:55 修改
阅读量264 收藏
点赞数
分类专栏： js 文章标签： javascript 前端 css
于 2020-08-22 15:20:15 首次发布
原文链接：https://blog.csdn.net/weixin_45820444/article/details/108138741?utm_medium=distribute.pc_category.none-task-blog-hot-4.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-4.nonecase&request_id=
版权

 

<!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;
        top: 20px;
        left: 300px;
        width: 820px;
        height: 550px;
      }
      .display {
        position: absolute;
        top: 0px;
        left: 685px;
        width: 180px;
        height: 510px;
        border: 5px solid black;
        background-color: #ccffff;
      }
      #gamePanel table {
        border-collapse: collapse; /*合并单元格边框*/
        border: 5px solid black;
        background-color: #f0f0f0;
      }
      #gamePanel td {
        width: 15px;
        height: 15px;
      }
      #scoreDiv {
        position: absolute;
        top: 20px;
        left: 20px;
        text-align: left;
        font-size: 20px;
        font-weight: bold;
      }
      #prompt {
        position: absolute;
        top: 180px;
        left: 20px;
        text-align: left;
        font-weight: bold;
      }
      #operator {
        position: absolute;
        top: 550px;
        left: 100px;
      }
      #result {
        position: absolute;
        top: 200px;
        left: 220px;
        background-color: #00ffff;
        font-size: 20px;
        font-weight: bold;
        text-align: left;
        padding: 20px;
      }
    </style>
    <script>
      var snake = []; // 蛇数组
      var barrers = []; // 障碍物数组
      var game = { sizeX: '30', sizeY: '40', record: '0' };
      var appearTime = (disappearTime = 0); // 超级食物出现
      var superFoodX = (superFoodY = null);
      var color = 0; // 食物颜色
      function init() {
        clearTimeout(game.time);
        snake = [];
        barrers = [];
        game.x = 0;
        game.y = 1;
        game.dir = null;
        game.direction = 'right';
        game.rate = null;
        game.lengths = 2; // 蛇的长度
        game.score = 0;
        $('scoreDiv').innerHTML =
          '得分：' +
          game.score +
          '<br/><br/>长度：' +
          game.lengths +
          '<br/><br/>' +
          '最高分：' +
          game.record;
        $('pass').disabled = false;
        $('rate').disabled = false;
        $('start').disabled = false;
        bord(); // 设置界面
        barrer(); // 设置障碍物
        $('result').style.visibility = 'hidden';
        snake.push('tb_' + game.x + '_' + (game.y - 1));
        snake.push('tb_' + game.x + '_' + game.y); // 蛇头
      }
      function $(id) {
        return document.getElementById(id);
      }
      // 表格
      function bord() {
        var panel = []; // 游戏面板
        var proPanel = []; // 提示面板
        panel.push('<table>');
        for (var i = 0; i < game.sizeX; i++) {
          panel.push('<tr>');
          for (var j = 0; j < game.sizeY; j++) {
            panel.push('<td id="tb_' + i + '_' + j + '" > </td>');
          }
          panel.push('</tr>');
        }
        panel.push('</table>');
        $('gamePanel').innerHTML = panel.join('');
        proPanel.push('<table>');
        proPanel.push(
          '<tr>' +
            '<td width="20px" height="20px" bgcolor="#ff3300"></td>' +
            '<td>&nbsp得分+10</td>' +
            '</tr>'
        );
        proPanel.push(
          '<tr>' +
            '<td width="20px" height="20px" bgcolor="#33cc33"></td>' +
            '<td>&nbsp得分+30</td>' +
            '</tr>'
        );
        proPanel.push(
          '<tr>' +
            '<td width="20px" height="20px" bgcolor="#99ff66"></td>' +
            '<td>&nbsp得分+50</td>' +
            '</tr>'
        );
        proPanel.push(
          '<tr>' +
            '<td width="20px" height="20px" bgcolor="#ffff00"></td>' +
            '<td>&nbsp得分+100</td>' +
            '</tr>'
        );
        proPanel.push(
          '<tr>' +
            '<td width="20px" height="20px" bgcolor="#006600"></td>' +
            '<td>&nbsp得分-30</td>' +
            '</tr>'
        );
        proPanel.push(
          '<tr>' +
            '<td width="20px" height="20px" bgcolor="#000000"></td>' +
            '<td>&nbsp得分-50</td>'
        );
        proPanel.push('</table>');
        $('prompt').innerHTML = proPanel.join('');
      }
      // 关卡障碍物设置
      function barrer() {
        var passValue = $('pass').value;
        for (var i = 0; i < barrers.length; i++) {
          $(barrers[i]).style.backgroundColor = '';
        }
        barrers = [];
        if (passValue == 2) {
          for (var i = 8; i < game.sizeX - 8; i++) {
            barrers.push('tb_' + i + '_' + 10);
            barrers.push('tb_' + i + '_' + (game.sizeY - 10));
          }
        }
        if (passValue == 3) {
          for (var i = 8; i < game.sizeY - 8; i++) {
            barrers.push('tb_' + Math.floor(game.sizeX / 2) + '_' + i);
          }
          for (var i = 6; i < game.sizeX - 6; i++) {
            barrers.push('tb_' + i + '_' + Math.floor(game.sizeY / 2));
          }
        }
        if (passValue == 4) {
          for (var i = 12; i < game.sizeY - 11; i++) {
            barrers.push('tb_' + Math.floor(game.sizeX / 2) + '_' + i);
          }
          for (var j = 6; j < game.sizeX - 6; j++) {
            barrers.push('tb_' + j + '_' + Math.floor(game.sizeY / 2 + 1));
          }
          for (var i = 6; i < game.sizeX - 6; i++) {
            if (i < game.sizeX / 2) {
              barrers.push('tb_' + i + '_' + 12);
            } else {
              barrers.push('tb_' + i + '_' + (game.sizeY - 11));
            }
          }
          for (var j = 12; j < game.sizeY - 11; j++) {
            if (j <= game.sizeY / 2) {
              barrers.push('tb_' + (game.sizeX - 7) + '_' + j);
            } else {
              barrers.push('tb_' + 6 + '_' + (j + 1));
            }
          }
        }
        if (passValue == 5) {
          for (var i = 0; i < 14; i++) {
            barrers.push('tb_' + 7 + '_' + i);
            barrers.push('tb_' + (game.sizeX - 8) + '_' + (game.sizeY - i - 1));
          }
          for (var i = 15; i < 25; i++) {
            if (i < 18 || i > 21) {
              barrers.push('tb_' + 10 + '_' + i);
              barrers.push('tb_' + (game.sizeX - 11) + '_' + i);
            }
          }
          for (var i = 0; i < 9; i++) {
            barrers.push('tb_' + i + '_' + (game.sizeY - 13));
            barrers.push('tb_' + (game.sizeX - i - 1) + '_' + 12);
          }
          for (var i = 11; i < 19; i++) {
            if (i < 13 || i > 16) {
              barrers.push('tb_' + i + '_' + 15);
              barrers.push('tb_' + i + '_' + (game.sizeY - 16));
            }
          }
        }
        // 设置障碍物颜色
        for (var i = 0; i < barrers.length; i++) {
          $(barrers[i]).style.backgroundColor = '#660033';
        }
      }
      // 开始游戏
      function startGame() {
        food();
        game.start = true;
        $('pass').disabled = true;
        $('rate').disabled = true;
        $('start').disabled = true;
        game.rate = $('rate').value;
        $(snake[0]).style.backgroundColor = '#0066ff';
        $(snake[1]).style.backgroundColor = 'blue';
        game.time = setTimeout(function () {
          snakeMove();
        }, game.rate);
        superFood();
      }
      // 蛇移动 速度，方向
      function snakeMove() {
        if (game.direction == 'right') {
          game.y += 1;
        } // 右移
        if (game.direction == 'left') {
          game.y -= 1;
        } // 左移
        if (game.direction == 'up') {
          game.x -= 1;
        } // 上移
        if (game.direction == 'down') {
          game.x += 1;
        } // 下移
        // 判断游戏是否结束
        if (result() == true) {
          clearTimeout(game.time);
          clearTimeout(appearTime);
          clearTimeout(disappearTime);
          game.start = false;
          var res = '游戏结束!<br/>';
          if (game.score > game.record) {
            res += '恭喜你破纪录啦！<br/>';
            $('scoreDiv').innerHTML =
              '得分：' + game.score + '<br/><br/>最高分：' + game.record;
          }
          res += '您的得分为：' + game.score + '<br/>长度:' + game.lengths;
          $('result').style.visibility = 'visible';
          $('result').innerHTML = res;
          return;
        }
        if (game.x == game.fx && game.y == game.fy) {
          eat(1);
        }
        if (game.x == superFoodX && game.y == superFoodY) {
          eat(2);
        }
        move();
        game.time = setTimeout(function () {
          snakeMove(game.rate, game.direction);
        }, game.rate);
      }
      function move() {
        $(snake[0]).style.backgroundColor = '';
        // 保留蛇当前的位置
        for (var i = 1; i < snake.length; i++) {
          snake[i - 1] = snake[i];
        }
        snake[snake.length - 1] = 'tb_' + game.x + '_' + game.y; // 蛇头位置
        for (var i = 0; i < snake.length - 1; i++) {
          $(snake[i]).style.backgroundColor = '#0066ff';
        }
        $(snake[i]).style.backgroundColor = 'blue';
      }
      // 食物 位置随机且不能与蛇位置重复
      function food() {
        game.fx = Math.floor(Math.random(game.sizeX) * game.sizeX);
        game.fy = Math.floor(Math.random(game.sizeY) * game.sizeY);
        if ($('tb_' + game.fx + '_' + game.fy).style.backgroundColor != '') {
          food();
        } else {
          $('tb_' + game.fx + '_' + game.fy).style.backgroundColor = '#ff3300';
        }
      }
      // 超级食物出现
      function superFood() {
        appearTime = setTimeout(function () {
          var n = Math.floor(Math.random(10) * 10);
          superFoodX = Math.floor(Math.random(game.sizeX) * game.sizeX);
          superFoodY = Math.floor(Math.random(game.sizeY) * game.sizeY);
          if (
            $('tb_' + superFoodX + '_' + superFoodY).style.backgroundColor != ''
          ) {
            superFood();
          } else {
            if (
              'tb_' + superFoodX + '_' + superFoodY ==
              'tb_' + game.fx + '_' + game.fy
            ) {
              superFood();
              return;
            }
            if (n < 3) {
              $('tb_' + superFoodX + '_' + superFoodY).style.backgroundColor =
                '#33cc33';
              color = 0;
            } else if (3 <= n && n < 5) {
              $('tb_' + superFoodX + '_' + superFoodY).style.backgroundColor =
                '#006600';
              color = 1;
            } else if (5 <= n && n < 7) {
              $('tb_' + superFoodX + '_' + superFoodY).style.backgroundColor =
                '#99ff66';
              color = 2;
            } else if (7 <= n && n < 9) {
              $('tb_' + superFoodX + '_' + superFoodY).style.backgroundColor =
                '#000000';
              color = 3;
            } else {
              $('tb_' + superFoodX + '_' + superFoodY).style.backgroundColor =
                '#ffff00';
              color = 4;
            }
            clearTimeout(disappearTime);
            superFood();
            // 一定时间后超级食物消失
            disappearTime = setTimeout(function () {
              $('tb_' + superFoodX + '_' + superFoodY).style.backgroundColor =
                '';
              superFoodX = superFoodY = null;
            }, game.rate * 120 - game.rate * 50);
          }
        }, game.rate * 120);
      }
      // 蛇吃食物
      function eat(ef) {
        // 吃普通食物
        if (ef == 1) {
          snake.push('tb_' + game.fx + '_' + game.fy);
          game.score += 10;
          food();
        }
        // 吃超级食物
        if (ef == 2) {
          if (color == 0) {
            game.score += 30;
          } else if (color == 1) {
            game.score -= 30;
          } else if (color == 2) {
            game.score += 50;
          } else if (color == 3) {
            game.score -= 50;
          } else {
            game.score += 100;
          }
          snake.push('tb_' + superFoodX + '_' + superFoodY);
          if (game.score < 0) {
            game.score = 0;
          }
          clearTimeout(disappearTime);
        }
        game.lengths += 1;
        $('scoreDiv').innerHTML =
          '得分：' +
          game.score +
          '<br/><br/>长度：' +
          game.lengths +
          '<br/><br/>最高分：' +
          game.record;
      }
      // 游戏结束
      function result() {
        var next = 'tb_' + game.x + '_' + game.y;
        if (
          game.x < 0 ||
          game.x >= game.sizeX ||
          game.y < 0 ||
          game.y >= game.sizeY
        ) {
          return true;
        }
        for (var i = 0; i < snake.length; i++) {
          if (next == snake[i]) {
            return true;
          }
        }
        for (var i = 0; i < barrers.length; i++) {
          if (next == barrers[i]) {
            return true;
          }
        }
        return false;
      }
      // 键盘控制
      function control(v) {
        var evt = v;
        game.dir = game.direction;
        if (37 <= evt.keyCode && evt.keyCode <= 40 && game.start) {
          if (evt.keyCode == 37) {
            game.dir == 'right'
              ? (game.direction = 'right')
              : (game.direction = 'left');
          } // 左
          if (evt.keyCode == 38) {
            game.dir == 'down'
              ? (game.direction = 'down')
              : (game.direction = 'up');
          } // 上
          if (evt.keyCode == 39) {
            game.dir == 'left'
              ? (game.direction = 'left')
              : (game.direction = 'right');
          } // 右
          if (evt.keyCode == 40) {
            game.dir == 'up'
              ? (game.direction = 'up')
              : (game.direction = 'down');
          } // 下
          if (game.dir != game.direction) {
            clearTimeout(game.time);
            snakeMove();
          }
        }
      }
    </script>
  </head>
  <body onload="init();" onkeyup="control(event);">
    <div class="backDiv">
      <div class="display">
        <div id="scoreDiv">分数：0</div>
        <br />
        <div id="prompt"></div>
      </div>
      <div id="gamePanel"></div>
      <br />
      <div id="operator">
        选择关卡：<select id="pass" onchange="barrer();">
          <option value="1">关卡1</option>
          <option value="2">关卡2</option>
          <option value="3">关卡3</option>
          <option value="4">关卡4</option>
          <option value="5">关卡5</option> </select
        >&nbsp&nbsp 速度：<select id="rate">
          <option value="500">慢</option>
          <option value="450">较慢</option>
          <option value="300">中等</option>
          <option value="200">较快</option>
          <option value="100">快</option> </select
        >&nbsp&nbsp
        <input
          type="button"
          id="start"
          value="开始"
          onclick="startGame();"
        />&nbsp&nbsp
        <input type="button" id="resets" value="重玩" onclick="init();" />
      </div>
      <div id="result"></div>
    </div>
    <div style="text-align: center;">
      <p><a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
    </div>
  </body>
</html>

追影的React开发者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现flappy bird小游戏
隅寒的博客
03-11 454
js实现flappy bird小游戏 游戏构架思路 一、小鸟 1.x轴位置不变，y轴位置遵循自由落体运动和点击向上运动（onmousedown，onmouseout） 2.向上飞和向下飞用不同的图片 二、柱子 1.x轴位置向左均匀移动，上面柱子因在屏幕外y轴位置要用负数表示，屏幕总宽度减去留在屏幕内下面柱子和上面柱子的总长度要等于固定的给鸟通过的宽度 三、得分 1.当鸟经过柱子时得分加一 2.鸟...
自己做的一款利用了JavaScript和jQuery的“跑酷小游戏”
weixin_50973363的博客
06-28 836
项目下载地址 代码结构图: 效果图: HTML: <html lang="en"> <head> <meta charset="UTF-8"> <title>天天酷跑</title> <link href="css/gameCSS.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-3.4.1.js">&
贪吃蛇代码实现
zhangyubo325的博客
06-29 4723
c语言实现简易贪吃蛇小游戏哦
JavaScript实现猫吃鱼小游戏
qq_36982349的博客
03-08 3890
贪吃猫小游戏 作为一名前端人员，撸猫我决定使用面向对象的方式书写贪吃猫小游戏，灵感来自有贪食蛇小游戏。 我们可以把整个游戏看成是一个游戏类，游戏类可以有各种各样的属性。 我们可以把贪吃猫中的猫作为一个属性，还有地图属性、食物属性、障碍物属性。 我们可以把猫当做一个"猫"类，有数组属性、有方向属性、有增长方法、有移动方法。 可以把地图看成一个地图类，有行属性、有列属性、有宽度属性 （总宽）、有高度属性 （总高）。 有一个数组属性，数组中存放的是每一个小方格。 可以把食物看成一个食物类，有一个x属性，有一个.
贪吃蛇游戏开发_增加障碍物石头
09-01
java贪吃蛇游戏编程代码---增加障碍物石头，包括代码、视频，很详细！！
JS贪吃蛇游戏代码
12-01
【JS贪吃蛇游戏代码】是一款基于JavaScript编写的网页小游戏，它将经典的贪吃蛇玩法移植到了浏览器环境中，为用户提供了丰富的游戏体验。这款游戏代码结构清晰，适合学习和研究JavaScript编程，尤其是对于游戏开发感...
javascript贪吃蛇
01-22
瞎写的，很多功能没实现，比如暂停开始，本来想整合到一起
JavaScript贪吃蛇小游戏.zip
04-19
JavaScript贪吃蛇小游戏是一款基于网页的互动娱乐项目，利用JavaScript编程语言实现。JavaScript是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，它允许在浏览器端执行代码，为用户提供动态交互的体验...
js 贪吃蛇完美版
09-06
总之，【JS贪吃蛇完美版】不仅展现了JavaScript的动态特性，还涵盖了基础编程、游戏逻辑、用户交互等多个方面的技术。对于想要学习JavaScript或游戏开发的人来说，这是一个很好的实践项目。通过分析和重构这个游戏的...
javascript贪吃蛇游戏设计与实现
10-14
在本文中，我们将深入探讨如何...通过以上步骤，我们可以构建一个基本的JavaScript贪吃蛇游戏，提供丰富的用户体验和挑战性。对于想要进一步优化游戏的开发者，还可以考虑增加游戏难度、添加音效、实现多人对战等功能。
Swing贪吃蛇游戏(二)：增加随机产生障碍物功能
04-21
NULL 博文链接：https://mouselearnjava.iteye.com/blog/1913886
JS贪吃蛇闯关卡小游戏特效代码
03-20
JS贪吃蛇闯关卡小游戏，贪吃蛇网页游戏，可选择关卡(1-5)，调整游戏速度。
c语言贪吃蛇怎么设置障碍物,c语言怎么自定义信号，贪吃蛇想关
weixin_35779001的博客
05-24 592
该楼层疑似违规已被系统折叠隐藏此楼查看此楼#include #include #include #include #include using namespace std;#defineA_MOVE_LEFT SIGRTMIN+1#define D_MOVE_RIGHTSIGRTMIN+2#define W_MOVE_ARROWSIGRTMIN+3#define S_MOVE_BACKSIGRT...
java贪吃蛇代码加背景图_【项目实践】java开发贪食蛇小游戏【附源码】
weixin_33816047的博客
02-27 2132
一、实验内容1、实现贪吃蛇游戏基本功能，屏幕上随机出现一个“食物”，称为豆子，上下左右控制“蛇”的移动，吃到“豆子”以后“蛇”的身体加长一点,得分增加，“蛇”碰到边界或，蛇头与蛇身相撞，蛇死亡，游戏结束。为游戏设计初始欢迎界面，游戏界面，游戏 结束界面。2、进行交互界面的设计，要有开始键、暂停键和停止退出的选项。对蛇吃到豆子进行分值计算，可以设置游戏速度，游戏音乐等拓展元素。二、贪食蛇游戏逻辑架构...
c语言字符蛇代码,贪吃蛇游戏c语言源贪吃蛇代码代码学习
weixin_42506911的博客
05-17 606
1########蛇的状态，U：上；D：下；L:左R：右蛇身的一个节点12{13intx;14inty;15structSNAKE*next;16}snake;1718//全局变量//19intscore=0,add=10;//总得分与每次吃食物得分。20intstatus,sleeptime=200;//每次运行的时间间隔21snake*head,*food;//蛇头指针，食物指针22snake...
c语言贪吃蛇自动寻路代码,C语言实现贪吃蛇游戏代码
weixin_35125164的博客
05-18 582
#include //导入声音头文件-->即联合形成#pragma warning(disable:4996)//可以利用该代码消去警告类#pragma comment(lib, "Winmm.lib")//链接库//------------------------------------------变量区---------------------------------//--------...
贪吃蛇自动避开障碍物C语言,贪吃蛇的障碍事用c语言肿么写
weixin_39683692的博客
05-17 598
#include#include#include#include#include#include#defineN21intapple[3],num;charscore[3];chartail[3];voidgotoxy(intx,inty)//输出坐标{COORDpos;pos.X=x;pos.Y=y;SetConsoleCursorPosition(GetStdHandle(STD_OUTPUT...
C语言贪吃蛇编码穿墙不死,贪吃蛇源码 (C语言精简版呀,撞不死的哦)
weixin_42501850的博客
05-18 467
该楼层疑似违规已被系统折叠隐藏此楼查看此楼/*编程fans看过来，没事加偶为QQ好友啊*//*QQ329399853*/#include#include#include#include#include#defineSTATIC0#defineTRUE1#defineFALSE0#defineUP1#defineRIGHT2#defineDOWN3#defineLEFT...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值