效果图展示：

具体实现代码如下：

（1）html部分

 !DOCTYPE html>

 <html>

     <head>

     <meta charset="utf-8" />

     <title>贪吃蛇</title>

     <link rel="stylesheet" type="text/css" href="main.css">

     </head>

     <body onselectstart="return false">

         <h1 id="alerts">贪吃蛇</h1>

          <div id="help">

             <span style="float:left">当前得分：<strong id="nowscore">0</strong></span>

             <span style="float:right">最高分：<strong id="score">0</strong></span>

          </div>

         <div id="map"></div>

         <input type="button" id="btnStart" value="开始游戏" />

         <script type="text/javascript" src="gamejs.js"></script>

     </body>

 </html>

（2）main.css文件代码

 * {margin:; padding:}

 body {

   background:white;

   -moz-user-select:none;

   text-align:center;

   font-size:12px;

   }

 table{

   margin:30px auto 10px auto;

   overflow:hidden;

   box-shadow:0px 0px 30px #4EFE93;

   border:10px solid yellowgreen;

   border-image: url(border.png);

   border-image-slice:;

   border-image-width:10px;

   border-image-outset:;

   border-image-repeat:repeat;

   }

 td {

   width:20px;

   height:20px;

   border:1px solid white;

   background:white;

   }

 .cover {background:url(body1.png);}

 .food {

     background:url(food.png);

     background-repeat:no-repeat;

      }

 #nowscore{

   font-size:20px;

   font-weight:;

   color:blue;

 }

 #score{

   font-size:20px;

   font-weight:;

   color:red;

 }

 #alerts{

   margin-top:50px;

   color:brown;

   font-size:30px;

   font-weight:;

   }

 #help {

   width:420px;

   margin:0 auto;

   line-height:17px;

   color:green;

   }

 #help span {

   float:left;

   font-size:15px;

   font-weight:;

   margin-right:10px}

 #help .box {

   width:15px;

   height:15px;

   margin-right:5px;

   border:1px solid white;}

 #btnStart {

   clear:both;

   width:100px;

   height:30px;

   margin-top:10px;

   padding:;

   background:#4EFE93;

   color:green;

   border:1px solid #fff;

   border-bottom-color:#000;

   border-right-color:#000;

   border-radius:15px;

   cursor:pointer}

注意：具体图片可以自行改动

（3）game.js文件代码

 /* 全局变量      */

 var WIDTH = 24;

 var    HEIGHT = 24;

 var len ;//蛇的长度

 var    speed; //爬行速度

 var    gridElems = multiArray(WIDTH,HEIGHT); //地图坐标，table对应的数组

 var    carrier; //蛇标志二维数组

 var    snake; //蛇每节的坐标点

 var    btnStart;

 var    snakeTimer;//蛇行走计时器

 var    directkey; // 键盘按键类型

 /*  其中gridElems和snake，carrier三个数组是完成表格和数组映射的关键   */

 window.onload = function(){

     //info = document.getElementById("alerts");

     btnStart = document.getElementById("btnStart");

     initGrid();

     document.onkeydown = attachEvents; //键盘事件获取，跨浏览器事件处理

     btnStart.onclick = function (e) {

         start();

         btnStart.setAttribute("disabled",true);

         btnStart.style.color = "gray";

     }

 }

 //开始游戏

 function start() {

     len = 3;

     speed = 10;

     directkey = 39;

     carrier = multiArray(WIDTH,HEIGHT);

     snake = new Array();

     clear();

     initSnake(); //蛇初始化

     addObject("food");

     walk();

 }

 //创建地图，DOM节点创建增加

 function initGrid() {

     var body = document.getElementsByTagName("body")[0];

     var table = document.createElement("table");

     var    tbody = document.createElement("tbody");

     for(var j = 0; j < HEIGHT; j++) {

         var col = document.createElement("tr");

         for(var i = 0; i < WIDTH; i++) {

             var row = document.createElement("td");

             gridElems[i][j] = col.appendChild(row); //完成表格和二维数组的映射

         }

         tbody.appendChild(col);

     }

     table.appendChild(tbody);

     document.getElementById("map").appendChild(table);//向div中添加创建好的表格

 }

 //一开始创建蛇

 function initSnake() {

     var pointer = randomPointer(len-1, len-1, WIDTH/2);

     for(var i = 0; i < len; i++) {

         var x = pointer[0] - i;//产生三个相连的表格

         var    y = pointer[1];

         snake.push([x,y]);//采用数组压栈方法（js数组自带方法）将产生的蛇坐标压入坐标数组中

         carrier[x][y] = "cover";

     }

 }

 //添加键盘事件，防止浏览器不兼容

 function attachEvents(e) {

     e = e || event;

     directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey; //非方向键、反向无效

     return false;

 }

 //设置间隔计时器，使蛇运动

 function walk() {

     if(snakeTimer) window.clearInterval(snakeTimer);

     snakeTimer = window.setInterval(step, Math.floor(3000/speed));//3000/speed呈现速度效果

 }

 //核心部分

 function step() {

     //获取目标点

     var headX = snake[0][0];//从坐标数组中获取蛇头坐标

     var    headY = snake[0][1];

     switch(directkey) { //进行按键位判断，蛇转向

         case 37: headX -= 1; break;

         case 38: headY -= 1; break;

         case 39: headX += 1; break

         case 40: headY += 1; break;

     }

     //死亡检测

     if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0  || carrier[headX][headY] == "cover" ) {

         alert("辣鸡高城，你挂了！");

         if((document.getElementById("score").innerHTML)*1 < len)

             {document.getElementById("score").innerHTML=len;}//最高分信息

         btnStart.removeAttribute("disabled");//释放“开始游戏”按钮

         btnStart.style.color = "#000";//释放“开始游戏”按钮

         window.clearInterval(snakeTimer);//清屏

         return;

     }

     //加速，吃到食物后提速

     if(len % 4 == 0 && speed < 60 && carrier[headX][headY] == "food") {

         speed += 5;

         walk();

     }

     if(carrier[headX][headY] != "food") {

         var lastX = snake[snake.length-1][0];//提取蛇的尾部坐标

         var    lastY = snake[snake.length-1][1];//提取蛇的尾部坐标

         carrier[lastX][lastY] = false;//蛇尾移动

         gridElems[lastX][lastY].className = "";//制空单元格背景色

         snake.pop();//删除蛇尾坐标

     }

     else {

         carrier[headX][headY] = false;//记录蛇头和食物重叠，碰撞处，碰撞后：蛇尾不减，false标志重叠

         addObject("food");//添加新的食物；

     }

     snake.unshift([headX,headY]);//将食物作为新的蛇头坐标压入蛇坐标数组，unshift函数为头压入数据，snake长度增加1

     carrier[headX][headY] = "cover";//cover代表为蛇身，此时将标志false改为正常caver

     gridElems[headX][headY].className = "cover";//给移动后的蛇身修改相应的表格单元格颜色

     len = snake.length;

     document.getElementById('nowscore').innerHTML = len;

 }

 //添加物品

 function addObject(name) {

     var p = randomPointer();

     carrier[p[0]][p[1]] = name;

     gridElems[p[0]][p[1]].className = name;//封装投放食物函数

 }

 //产生指定范围随机点，食物和蛇的初始值产生

 function randomPointer(startX,startY,endX,endY) {

     startX = startX || 0;

     startY = startY || 0;

     endX = endX || WIDTH;

     endY = endY || HEIGHT;

     var p = [];

     var    x = Math.floor(Math.random()*(endX - startX)) + startX;//控制产生数据在WIDTH即表格横向范围内

     var    y = Math.floor(Math.random()*(endY - startY)) + startY;//控制产生数据在HEIGHT即表格纵向范围内

     if(carrier[x][y]) //如果产生数据和蛇身重复了，则递归再次产生

     {return randomPointer(startX,startY,endX,endY);}

     p[0] = x;

     p[1] = y;

     return p;//返回一个一维数组，仅两个数（坐标），传至坐标数组

 }

 //产生随机整数

 function randowNum(start,end) {

     return Math.floor(Math.random()*(end - start)) + start;

 }

 //创建二维数组

 function multiArray(m,n) {

     var arr =  new Array(n);

     for(var i=0; i<m; i++)

         arr[i] = new Array(m);//数组套数组

     return arr;

 }

 //清除画面，游戏开始时和死亡后刷新使用

 function clear() {

     for(var y = 0; y < gridElems.length; y++) {

         for(var x = 0; x < gridElems[y].length; x++) {

             gridElems[x][y].className = "";

         }

     }

 }

JS贪吃蛇小游戏的更多相关文章

  1. JS高级---案例：贪吃蛇小游戏

    案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...

  2. C++ 简单的控制台贪吃蛇小游戏

    由于比较懒,所以不怎么写,觉得这样不应该.我应该对自己学的做出整理,不管是高端低端,写出来是自己的. // 贪吃蛇.cpp : 定义控制台应用程序的入口点. // #include "std ...

  3. 贪吃蛇小游戏-----C语言实现

    1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...

  4. Java GUI学习,贪吃蛇小游戏

    JAVA GUI练习 贪吃蛇小游戏 前几天虽然生病了,但还是跟着狂神学习了GUI的方面,跟着练习了贪吃蛇的小项目,这里有狂神写的源码点我下载,还有我跟着敲的点我下载,嘿嘿,也就注释了下重要的地方,这方 ...

  5. 用GUI实现java版贪吃蛇小游戏

    项目结构 新建一个JFrame窗口,作为程序入口 public class GameStart{ public static void main(String[] args) { JFrame jFr ...

  6. Java 用java GUI写一个贪吃蛇小游戏

    目录 主要用到 swing 包下的一些类 上代码 游戏启动类 游戏数据类 游戏面板类 代码地址 主要用到 swing 包下的一些类 JFrame 窗口类 JPanel 面板类 KeyListener ...

  7. 原生JS制作贪吃蛇小游戏

    感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...

  8. 用js写一个贪吃蛇小游戏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. html5面向对象做一个贪吃蛇小游戏

    canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说 ...

随机推荐

  1. 4011: [HNOI2015]落忆枫音

    4011: [HNOI2015]落忆枫音 链接 分析: 原来是一个DAG,考虑如何构造树形图,显然可以给每个点找一个父节点,所以树形图的个数就是$\prod\limits_u deg[u]$. 那么加 ...

  2. bzoj 前100题计划

    bzoj前100题计划 xz布置的巨大的坑.. 有空填题解... 1002 轮状病毒 用python手动matrixtree打表. #include<bits/stdc++.h> #def ...

  3. Zabbix实战-简易教程--业务类

    一.需求 项目要求对线上服务器进行监控,包括服务器本身状态.进程相关数据.业务相关数据. 服务器本身状态可以通过基础模板即可获取数据(CPU.内存.网络.磁盘): 进程相关数据,前面也有相关文章专门监 ...

  4. python基础—字典

    阅读文本需要3分钟,不建议跳读 节目清单 字典是python中最重要的数据类型,字典由“键-值”对组成的集合,字典中的“值”通过“键”来引用.这里将介绍字典的定义.访问.排序等功能. 字典的创建 字典 ...

  5. CAN总线的显性电平为什么能覆盖隐性电平？

    摘要:在CAN总线中,显性电平是强驱动,隐性电平时弱驱动,因此当有的节点发送显性电平有的节点发送隐性电平时,总线上呈现的肯定是强驱动的状态,这就是CAN总线显性电平可以覆盖隐性电平的原因. 大家都知道 ...

  6. java学习（四）修饰符、运算符、循环结构、分支结构

    修饰符 一般是放在定义类,方法,变量的最前端 访问控制修饰符 修饰符 当前类 同一包内 子孙类 其他包 public Y Y Y Y protected Y Y Y N default Y Y N N ...

  7. Python机器学习库SKLearn：数据集转换之管道和特征

    转载自:https://blog.csdn.net/cheng9981/article/details/61918129 4.1 管道和特征:组合估计量 4.1.1 管道:链接估计 管道可以用于将多个 ...

  8. 【推荐系统】neural_collaborative_filtering（源码解析）

    很久没看推荐系统相关的论文了,最近发现一篇2017年的论文,感觉不错. 原始论文 https://arxiv.org/pdf/1708.05031.pdf 网上有翻译了 https://www.cnb ...

  9. Python20-Day03

    ##########文件操作相关########## 一.文件操作 文件就是操作系统提供给应用程序来操作硬盘虚拟概念,用户或应用程序通过操作文件,可以将自己的数据永久保存下来. 文件操作的流程: * ...

  10. （转）一个简单的rest_framework demo

    转发:https://www.cnblogs.com/fu-yong/p/9100559.html models.py 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 from ...