js实现贪吃蛇小游戏（加墙）

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

1.贪吃蛇的规则

    作为一款经典游戏，很多人玩他其实就是一种怀念。但是他不应该那么单一，应该有更多新的元素出现。然后我是个新手，希望我以后继续学习的途中能够再次回头重写一遍贪吃蛇。他的规则是;a.超出边界会死  b.碰到自身会死  c.吃食物会变长。

   值得注意的是：1.在函数里所调用的函数的顺序很重要。2.必须在的下面。

2.实现图：

3.HTML的代码：

  
  
  
  
  
  

 


  

    
snake
    
    
  

4.CSS的代码（mygame2.css）:

*{
  padding: 0;
  margin: 0;
}
.container
{
  text-align:center;
}
.center
{
  margin-left:auto;
  margin-right:auto;
  width:70%;
}
#myCanvas
{
  border-style:solid;
  border-color:#A9A9A9;
  background-color: #E0FFFF;
}

5.js的代码（mygame2.js）

/**
 * Created by Administrator on 2017/6/30.
 */
//画布
var cvs=document.getElementById("myCanvas");
var cxt=cvs.getContext("2d");
cvs.height=600;
cvs.width=800;
 
var Snakesize=20;
var cvsCridx=cvs.width/Snakesize;//格子化
var cvsCridy=cvs.height/Snakesize;
var length=0;
var wall_length=0;
var Snakebady=[];
var dre =2;
var food = {};
var direFlag = 0;//程序存在的bug，按上左会刷新界面，用标记解决
var speed=0;
var wall=[];
//初始化
function init()
{
  Snakebady=[];
  length=0;
  dre  =2;
  for(var i= 0;i<3;i++)
  {
    CreateSnakeNode(parseInt(cvsCridx/2)+i,parseInt(cvsCridy/2));
  }
  drawSnake();
  putfood();
}
//放蛇身
function CreateSnakeNode(x,y)
{
  Snakebady.push({x:x , y:y, color:length===0 ? "#000000" : "#778899" });
  length ++;
}
//绘制蛇身（连续的蛇点）
function drawSnake()
{
  cxt.clearRect(0, 0, cvs.width, cvs.height);
  for( i=0; i0;i--)//蛇身的更替，用后一个位置等于前一个位置的坐标
  {
    Snakebady[i].x=Snakebady[i-1].x;
    Snakebady[i].y=Snakebady[i-1].y;
    if(Snakebady[i].x===newSnakebady.x&&Snakebady[i].y===newSnakebady.y)//判断撞自己
      return goend();
  }
  Snakebady[0]=newSnakebady;
  direFlag = 0;
  boundary(Snakebady[0]);
  isgetfood(Snakebady[0]);
  strike_wall();
}
//得到食物后的蛇身在最后面加上一个蛇点
function isgetfood(nood)
{
  if(nood.x===food.x&&nood.y===food.y)
  {
    putfood();
    Snakebady.push({x:Snakebady[Snakebady.length-1].x, y:Snakebady[Snakebady.length-1].y,color:"#778899"});//增加蛇身
  }
}
//判断墙
function strike_wall()
{
  for(var i=0;i cvsCridx - 1 || node.y < 0 || node.y > cvsCridy - 1) goend();
}
//进行键位判断
function setDirection(dir){
  direFlag = 1;
  if(Math.abs(dir)===Math.abs(dre)) return;//往上不能往下
  dre=dir;
}
//*******
function goend()
{
  init();
}
init();
speed=200-speed;//****
setInterval(function(){
  SnakeMove();drawSnake();},150);//定时器，让蛇移动起来，可以设置他的速度。

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