效果图展示：

具体实现代码如下：

（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. Java动态代理：一个面包店的动态代理帝国

    文章首发于[博客园-陈树义],点击跳转到原文大白话说Java动态代理:一个面包店的动态代理帝国 代理模式是设计模式中非常重要的一种类型,而设计模式又是编程中非常重要的知识点,特别是在业务系统的重构中, ...

  2. 用Angule Cli创建Angular项目

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...

  3. 【日常训练】Volleyball（CodeForces-96D）

    题意与分析 这题也是傻逼题,可是我当时打比赛的时候板子出问题了- -|||,怎么调也调不过. 不过思路是很清晰的:先做n次dijkstra然后重新建图,建完了以后根据新的单向图再跑一次dijkstra ...

  4. java学习（一） 环境搭建、hello world的demo

    本程序媛搞前端的,上班偶有空闲,不妨来学习学习,不然怎么包养小白脸,走上人生巅峰? 说实话,每个语言都相通,有了javascript的基础,并且有了两三年跟java打交道的经验,简单学习下java想必 ...

  5. Netty源码分析第4章(pipeline)---->第6节: 传播异常事件

    Netty源码分析第四章: pipeline 第6节: 传播异常事件 讲完了inbound事件和outbound事件的传输流程, 这一小节剖析异常事件的传输流程 首先我们看一个最最简单的异常处理的场景 ...

  6. 搭建好看的静态博客（使用Hexo进行搭建）

    经常看到大牛的博客非常的高大帅气,虽然我很渣,但是逼格不能输,所以有了以下的搭建记录. 我的成果ninwoo,喜欢的可以参考下面的记录一起来动手搞起来. 安装Git Bash 访问git下载最新版本的 ...

  7. Vue+webpack项目中,运行报错Cannot find module 'chalk'的处理

    刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'cha ...

  8. python3去除字符串中括号及括号里面的内容

    a = """ <option value="search-alias=arts-crafts-intl-ship">Arts & ...

  9. linux安装nginx并配置负载均衡

    linux上安装nginx比较简单: 前提是需要有gcc或者g++ 1.yum需要的依赖  yum -y install openssl openssl-devel 2.解压pcre库.zlib库   ...

  10. 基于spec评论作品

    组名:杨老师粉丝群 组长:乔静玉 组员:吴奕瑶  刘佳瑞  公冶令鑫  杨磊  杨金铭  张宇  卢帝同 一.测试目标:拉格朗日2018——飞词 下面是他们的小游戏在运行时的一些截图画面: 1.开始: ...