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 相关文章推荐
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
js实现缓动动画
Nov 25 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
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
简单了解django缓存方式及配置
2019/07/19 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python中的延迟绑定原理详解
2019/10/11 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
一些高难度的SQL面试题
2016/11/29 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
质量主管工作职责
2014/09/26 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
Python列表的索引与切片
2022/04/07 Python
python中 .npy文件的读写操作实例
2022/04/14 Python
Golang解析JSON对象
2022/04/30 Golang