JS实现简单贪吃蛇小游戏


Posted in Javascript onOctober 28, 2020

本文实例为大家分享了JS实现简单贪吃蛇游戏的具体代码,供大家参考,具体内容如下

1、使用语言 HTML+CSS+JavaScript
2、使用工具 visual studio code
3、GitHub项目地址:贪吃蛇
4、项目运行截图:

JS实现简单贪吃蛇小游戏

5、项目功能分析:主要使用数组来存储蛇的位置,地图和蛇都是一个二维数组,对于有蛇的地方,地图的CSS就会发生改变,同时添加了添加了一个音乐播放按钮,通过CSS动画实现旋转。

6、项目代码:(项目代码有详细的注释)

snake.html

<!--
 * @Author: CSU_XZY
 * @Date: 2020-10-13 22:06:51
 * @LastEditors: CSU_XZY
 * @LastEditTime: 2020-10-18 17:08:54
 * @FilePath: \第二天\贪吃蛇\snake.html
 * @Description: just to play
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eatSnake</title>
<head>
 <style type="text/css">
 *{
 margin:0;
 padding:0;
 border: 0px;
 }
 body{
 background: #444;
 }
 table{
 border-collapse:collapse;
 overflow: hidden;
 border:1px solid #ddd;
 margin:10px auto 10px auto;
 }
 td{
 display: table-cell;
 width:20px;
 height:20px;
 background: #fff;
 border:1px #eeeeee solid;
 }
 .snake{
 background: #3388ee;
 }
 .notsnake{
 background: #fff;
 }
 .food{
 background: #33aa33;
 }
 .snake_head{
 background: #dd4444;
 }
 .notice{
 width:450px;
 text-align: center;
 margin:50px auto;
 color:#fff;
 font-size: 14px;
 }
 </style>
</head>
<body>
<p class="notice">提示:空格键控制开始/ 暂停,方向键控制蛇的移动方向,F5刷新</p>
<script type="text/javascript" src="snake.js"></script>
</body>
</html>

snake.js

/*
 * @Author: CSU_XZY
 * @Date: 2020-10-17 12:38:26
 * @LastEditors: CSU_XZY
 * @LastEditTime: 2020-10-18 22:40:24
 * @FilePath: \第二天\snake\snake.js
 * @Description: just to play
 */
window.onload = function(){
 var snake = function(width,height,snakeId,speed){
  this.width = width || 10;
  this.height = height || 10;
  this.snakeId = snakeId || "snake";
  this.goX = 0;
  this.goY = 0;
  this.speed = this.oldSpeed = speed || 10;
  this.Grid = []; //存放td的二维数组
  this.snakeGrid = []; //存放蛇的数组
  this.foodGrid = [];
  this.snakeTimer = null;
  this.derectkey = 39;
  this.stop = true;
  this.init();
  document.getElementById("myAudio").play();
  box.style.animationPlayState = 'running'
 }

 snake.prototype = {
  //创建二维数组
  multiArray : function(m , n)
  {
   var array = new Array(m); //长
   for(let i = 0; i < m; i++)
   {
    array[i] = new Array(n); //宽
   }
   return array;
  },
  //函数修正this
  bind : function(fn,context)
  {
   return function(){
 return fn.apply(context,arguments);
 }
  },
  //移动的主函数
  move:function(){
 var _this = this;
 if(_this.snakeTimer){clearInterval(_this.snakeTimer);}
 _this.snakeTimer = setInterval(_this.bind(_this.main,_this),Math.floor(3000/this.speed));
  },
  //重来
  reset()
  {
   this.goX = 0;
   this.goY = 0;
   this.speed = this.oldSpeed;
   this.derectkey = 39;
   this.stop = true;
   this.init();
  },
  //确定键盘事件
  keyDown : function(e)
  { 
   var e = e || window.event;
   var keycode = e?e.keyCode:0;
   if(keycode == 116 )
   window.location.reload();
   if(keycode == 32)
   {
    if(this.stop)
    {
     this.move();
     this.stop = false;
    }
    else{
     if(this.snakeTimer)
     clearInterval(this.snakeTimer);
     this.stop = true;
    }
   }
   if(keycode>=37 && keycode <= 40)
    {
     if(!this.stop)
     this.derectkey = keycode;
    }
   return false;
  },
  //创建地图
  creatMap : function()
  {
   var table = document.createElement("table");
   var tbody = document.createElement("tbody");
   for(let i = 0; i < this.width; i++)
   {
    var tr = document.createElement("tr");
    for(let j = 0; j < this.height; j++)
    {
     var td = document.createElement("td");
     this.Grid[i][j] = tr.appendChild(td);
    }
    tbody.appendChild(tr);
   }
   table.appendChild(tbody);
   table.id = this.snakeId;
   document.body.appendChild(table);
  },
  //产生随机点
  randomPoint : function(initX,initY,endX,endY)
  {
   var p = []; //用来存放产生的随机点的数组
   var initX = initX || 0;
   var initY = initY || 0;
   var endX = endX || this.width;
   var endY = endY || this.height;
   p[0] = Math.floor(Math.random()*(endX - initX)) + Math.floor(initX);
   p[1] = Math.floor(Math.random()*(endY - initY)) + Math.floor(initY)
   return p;
  },
  //初始化食物的位置
  initFood : function()
  {
   this.foodGrid = this.randomPoint();

   if(this.isInSnake(this.foodGrid))
   {
    this.initFood();
    return false;
   }
   this.Grid[this.foodGrid[0]][this.foodGrid[1]].className = "food";
  },
  //判断点是否在蛇身上
  isInSnake : function(point,pos)
  {
   var snakeGrid = this.snakeGrid;
   if(point instanceof Array)
   {
    let n = snakeGrid.length;
    for(let i = pos || 0; i < n; i++)
    {
     if(point[0] == snakeGrid[i][0] && point[1] == snakeGrid[i][1])
     return true;
    }
   }
   return false;
  },
  //给蛇涂颜色
  paintSnake : function(){
   var snakeGrid = this.snakeGrid;
   for(let i = 0; i < snakeGrid.length; i++)
   {
    this.Grid[snakeGrid[i][0]][snakeGrid[i][1]].className = "snake_body";
   }
  },
  //初始化蛇的位置
  initSnake : function()
  {
   this.snakeGrid = [];

   this.snakeGrid.push([1,3]);
   this.snakeGrid.push([1,2]);
   this.snakeGrid.push([1,1]);

   this.paintSnake();

   this.Grid[this.snakeGrid[0][0]][this.snakeGrid[0][1]].className = "snake_head";
   this.Grid[this.snakeGrid[this.snakeGrid.length-1][0]][this.snakeGrid[this.snakeGrid.length-1][1]].className = "snake_tail";
  },
  //判断蛇是否撞墙
  isInWall : function(point){
   if(point instanceof Array){
    if(point[0] < 0 || point[0] > this.width1 - 1 || point[1] < 0 || point[1] > this.height - 1)
    return true;
   } 
   return false;
  },
  //初始化条件
  
  //控制函数运行的主函数
  main : function(){
   var snakeGrid = this.snakeGrid;
   var temp = snakeGrid[snakeGrid.length-1],
    isEnd = false;
    headX = snakeGrid[0][0];
    headY = snakeGrid[0][1];
    msg = "";
   switch(this.derectkey)
   {
    case 37:
  if(this.goY!=1){this.goY=-1;this.goX=0} //防止控制蛇往相反反方向走
  break;
 case 38:
  if(this.goX!=1){this.goX=-1;this.goY=0}
  break;
 case 39:
  if(this.goY!=-1){this.goY=1;this.goX=0}
  break;
 case 40:
  if(this.goX!=-1){this.goX=1;this.goY=0}
   }
   headX += this.goX;
   headY += this.goY;

   if(headX == this.foodGrid[0] && headY == this.foodGrid[1])
   {
    this.snakeGrid.unshift(this.foodGrid);
    this.initFood();
    if(this.snakeGrid.length>4){ //控制蛇加速
  if(this.snakeGrid.length==5){
  this.speed += 5;
  }
  else if(this.snakeGrid.length==10){
  this.speed += 3;
  }
  else if(this.snakeGrid.length==20){
  this.speed += 3;
  }
  else if(this.snakeGrid.length==30){
  this.speed += 3;
  }
  this.move();
 }
   }
   else
   {
    for(var i=this.snakeGrid.length-1;i>0;i--){
  this.snakeGrid[i] = this.snakeGrid[i-1] ;
 }
    this.snakeGrid[0] = [headX,headY]; 
    if(this.isInSnake(this.snakeGrid[0],1)){
  isEnd=true;
  msg = "哈皮,吃到自己啦!!";
 }
 //判断是否撞墙
 else if(this.isInWall(this.snakeGrid[0])){
  isEnd =true;
  msg = "撒比伟哥,撞墙了!!";
    }
    if(isEnd)
    {
     if(this.snakeTimer)
     clearInterval(this.snakeTimer);
     var score;
     let len = this.snakeGrid.length;
     if(len <= 5)
     score = len-3;
     else if(len>5 && len<=10)
     {
      score = 2 + 2*(len-5)
     }
     else if(len>10 && len <= 20)
     score = 12 + 3*(len-10);
     else
     score = 27 + 5*(len - 15);
     if(confirm(msg+"你的分数是:"+score+"! 是否重新开始?")){
  this.reset();
  }
  return false;
    }
    this.Grid[temp[0]][temp[1]].className = "notSnake";
   }
   this.paintSnake();
   this.Grid[headX][headY].className = "snake_head";
   this.Grid[this.snakeGrid[this.snakeGrid.length-1][0]][this.snakeGrid[this.snakeGrid.length-1][1]].className = "snake_tail";
  },
  init : function(){
   var _this = this;
   snake_id = document.getElementById(_this.snakeId)||0 ;
 if(snake_id){
 document.body.removeChild(snake_id);
 }
   _this.Grid = _this.multiArray(_this.width,_this.height);
   _this.creatMap();
   _this.initSnake();
   _this.initFood();
   document.onkeydown = _this.bind(_this.keyDown,_this);
  }
 }
 new snake(20,20,"snake",10);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 幻灯片的实现
Dec 06 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
javascript中var的重要性分析
Feb 11 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 #Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 #Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 #Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 #Javascript
js 实现碰撞检测的示例
Oct 28 #Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 #Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 #Javascript
You might like
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
pygame实现飞机大战
2020/03/11 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
员工工作自我评价
2014/09/26 职场文书
优秀员工事迹材料
2014/12/20 职场文书
会计试用期自我评价
2015/03/10 职场文书
行政处罚告知书
2015/07/01 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
使用Django实现商城验证码模块的方法
2021/06/01 Python