效果图展示：

具体实现代码如下：

（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. Deep Learning 资料总结

    http://colah.github.io/posts/2014-03-NN-Manifolds-Topology/ : 理解神经网络   ELU:

  2. cvc-complex-type.2.4.a: Invalid content was found starting with element 'display-name'

    cvc-complex-type.2.4.a: Invalid content was found starting with element 'display-name'. One of '{&qu ...

  3. P4284 [SHOI2014]概率充电器

    P4284 [SHOI2014]概率充电器 今天上课讲到的题orz,第一次做这种上下搞两次dp的题. g[i]表示i的子树(包括i)不给i充电的概率. f[i]表示i的父亲不给i充电的概率. g[]可 ...

  4. python之GIL(Global Interpreter Lock)

    一 介绍 ''' 定义: In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple nati ...

  5. WinForm 捕获系统关机、重启、注销事件

    Public Class App Public Shared Sub Main() ' 关联事件 AddHandler Microsoft.Win32.SystemEvents.SessionEndi ...

  6. python自编程序实现——robert算子、sobel算子、Laplace算子进行图像边缘提取

    实现思路: 1,将传进来的图片矩阵用算子进行卷积求和(卷积和取绝对值) 2,用新的矩阵(与原图一样大小)去接收每次的卷积和的值 3,卷积图片所有的像素点后,把新的矩阵数据类型转化为uint8 注意: ...

  7. InnoDB表优化

    InnoDB表存储优化 适时的使用 OPTIMIZE TABLE 语句来重组表,压缩浪费的表空间.这是在其它优化技术不可用的情况下最直接的方法. OPTIMIZE TABLE 语句通过拷贝表数据并重建 ...

  8. Spring AOP 报错org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'XXXXXX' defined in class path resource..........

    完整报错如下: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'befo ...

  9. jsp servlet路径问题

    最近做小作业时饱受路径问题的困扰,记录一下: 当工程目录如上所示时,路径应该这么写: 情况1:根目录下 login.jsp中的表单提交给Servlet时,可以直接写Servlet名: <form ...

  10. linux执行命令返回码释义

    Linux 操作系统错误代码解释 0.错误代码1-10 OS error code 0: Success 操作系统错误代码0:成功 OS error code 1: Operation not per ...