效果图展示：

具体实现代码如下：

（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. Redis学习之路（一）之缓存知识体系

    转自:https://www.unixhot.com/page/cache 缓存分层 缓存分级 内容 内容简介/主要技术关键词 用户层 DNS 浏览器DNS缓存 Firefox默认60秒,HTML5的 ...

  2. OpenStack入门篇（二十）之实现阿里云ESC多FLAT网络

    1.给两台虚拟机增加网卡,使用仅主机模式,网段为:192.168.57.0/24 2.修改两台主机网卡配置 [root@linux-node1 ~]# cp /etc/sysconfig/networ ...

  3. Laravel 跨框架队列交互

    公司大部分项目是laravel框架,但有些是yii框架,这两个框架之间有消息需要通信,比如在yii框架发布消息,laravel框架中的队列去处理,用redis作为消息连接纽带 laravel 队列原理 ...

  4. mysql查询操作之单表查询、多表查询、子查询

    一.单表查询 单表查询的完整语法: .完整语法(语法级别关键字的排列顺序如下) select distinct 字段1,字段2,字段3,... from 库名.表名 where 约束条件 group ...

  5. 《javascript语言精粹》mindmap

    最近刚刚读完<javascript语言精粹>,感觉其中的内容确实给用js作开发语言的童鞋们提了个醒——js里面坑很多啊 不过,我也并不完全认同书中所讲的所有内容,有些书中认为是糟粕的特性, ...

  6. SpringBoot日记——国际化篇

    听起来高大上的国际化,起始就是在利用浏览器语言,或者页面中的中英文切换,将页面的文字在其他语言和中文进行切换,比如: 我们想让这个功能实现,点击中文,页面就是中文的,点击英文就是英文的. 国际化配置 ...

  7. java学习（二）基础概念、语法

    对象 类的实例(通俗点讲,new出来的玩意好像都是对象?初学者的感觉,不造对错啊,有大神给我解释下可以啊) 类 class嘛,模板嘛,可以给对象实例的嘛 方法 行为,学编程的,方法,这玩意心里都懂吧, ...

  8. MySQL日志系统：redo log与binlog

    日志系统主要有redo log(重做日志)和binlog(归档日志).redo log是InnoDB存储引擎层的日志,binlog是MySQL Server层记录的日志, 两者都是记录了某些操作的日志 ...

  9. PLSQL触发器,游标

    --触发器 drop table emp_log create table emp_log( empno number, log_date date, new_salary number, actio ...

  10. [leetcode-897-Increasing Order Search Tree]

    Given a tree, rearrange the tree in in-order so that the leftmost node in the tree is now the root o ...