JS实现简单贪吃蛇小游戏

程序员文章站 2022-06-26 13:47:28

本文实例为大家分享了js实现简单贪吃蛇游戏的具体代码，供大家参考，具体内容如下1、使用语言 html+css+javascript2、使用工具 visual studio code3、github项目...

本文实例为大家分享了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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

JS实现简单贪吃蛇小游戏

用js实现计算代码行数的简单方法附代码_javascript技巧

利用原生js实现html5小游戏之打砖块（附源码）

Node.js 实现简单的无侵入式缓存框架的方法

js实现瀑布流的一种简单方法实例分享_javascript技巧

非node环境下的vue.js 实现简单的购物车计算功能样式请无视

pygame实现贪吃蛇小游戏

JS路由跳转的简单实现代码

js实现简单选项卡与自动切换效果的方法_javascript技巧

使用Angular.js实现简单的购物车功能

nodejs中简单实现Javascript Promise机制的实例_node.js

JS实现简单贪吃蛇小游戏

用js实现计算代码行数的简单方法附代码_javascript技巧

利用原生js实现html5小游戏之打砖块（附源码）

Node.js 实现简单的无侵入式缓存框架的方法

js实现瀑布流的一种简单方法实例分享_javascript技巧

非node环境下的vue.js 实现简单的购物车计算功能 样式请无视

pygame实现贪吃蛇小游戏

JS路由跳转的简单实现代码

js实现简单选项卡与自动切换效果的方法_javascript技巧

使用Angular.js实现简单的购物车功能

nodejs中简单实现Javascript Promise机制的实例_node.js

非node环境下的vue.js 实现简单的购物车计算功能样式请无视