亲宝软件园·资讯

展开

js实现贪吃蛇小游戏(加墙)

二百五的春天 人气:0

本文着重为大家仔细讲解了js实现贪吃蛇小游戏,文中代码实例讲解的非常细致,希望能够帮助到您,欢迎大家阅读和收藏


1.贪吃蛇的规则

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

   值得注意的是:1.在函数里所调用的函数的顺序很重要。2.<script src="mygame2.js"></script>必须在<canvas>的下面。

2.实现图:

3.HTML的代码:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>贪吃蛇第二版</title>
  <link rel="stylesheet" href="mygame2.css" rel="external nofollow" type="text/css">
</head>
 
<body >
<div class="container">
  <div class="center">
    <h1>snake</h1>
    <canvas id="myCanvas"></canvas>
    <script src="mygame2.js"></script>
  </div>
</div>
</body>
</html>

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; i<Snakebady.length; i++)
  {
    drawRect(Snakebady[i]);
  }
  drawRect(food);
  wall_location();
}
//绘制单个蛇点
function drawRect(Snakenode)
{
  cxt.beginPath();
  Snakesize = 20;
  cxt.fillStyle = Snakenode.color;
  cxt.fillRect(Snakenode.x * Snakesize, Snakenode.y * Snakesize, Snakesize, Snakesize);//蛇的形状为方形
  //cxt.arc(Snakenode.x * Snakesize,Snakenode.y * Snakesize,12,0,Math.PI*2,true);//蛇的形状为圆形
  cxt.strokeStyle="#484848";
  cxt.lineWidth  = 4;
  cxt.stroke();
  cxt.closePath();
  cxt.fill();
}
//绘制墙
function drawwall (x,y)
{
  wall.push({x:x, y:y, color:"#FFFF00"});
  wall_length++;
  cxt.beginPath();
  cxt.fillRect(Snakesize *x,Snakesize *y,Snakesize,Snakesize);
  cxt.fillStyle = wall.color;
  cxt.strokeStyle="#484848";
  cxt.lineWidth  = 2;
  cxt.stroke();
  cxt.closePath();
  cxt.fill();
}
//墙的位置
function wall_location()
{
  var i,j;
  for( i= 2,j= 5;i<15;i++)
  {drawwall(i,j);}
  for( i=25,j=5;i<38;i++)
  {drawwall(i,j);}
  for( j= 6,i=14;j<15;j++)
  {drawwall(i,j);}
  for( j= 6,i=25;j<15;j++)
  {drawwall(i,j);}
  for( i= 9,j=17;j<26;j++)
  {drawwall(i,j);}
  for(i=29,j=17;j<26;j++)
  {drawwall(i,j);}
  for(i=10,j=25;i<29;i++)
  {drawwall(i,j);}
}
//放置食物,不超过画布,不放在蛇身上,不能放在墙上
function putfood()
{
  var flog=1;
  while(1)
  {
    flog=1;
    var foodx = parseInt(Math.random()*cvsCridx);
    var foody = parseInt(Math.random()*cvsCridy);
    for(var i = 0; i < Snakebady.length; i ++)
    {if(Snakebady[i].x === foodx && Snakebady[i].y === foody) flog = 0;}
    for(var j=0; j<wall_length ; j++)
    {
      if(wall[j].x === foodx && wall[j].y === foody)
        flog = 0;
    }
    if(flog) break;
  }
  food = {x: foodx, y: foody, color: '#B00000'};
}
//先用alert读出位置的ASCLL的值,然后再重新赋值进行定义
document.onkeydown = function(e){
  if(direFlag) return;
  e.preventDefault();//清除页面的滑动带来的上下键的操作
  if(e.keyCode===38|| e.keyCode===87) setDirection(1);//上
  if(e.keyCode===40|| e.keyCode===83) setDirection(-1);//下
  if(e.keyCode===37|| e.keyCode===65) setDirection(2);//左
  if(e.keyCode===39|| e.keyCode===68) setDirection(-2);//右
  if(e.keyCode ===32) speed=100;//****
}
//蛇的移动
function SnakeMove()
{
  var newSnakebady={x:Snakebady[0].x,y:Snakebady[0].y,color:Snakebady[0].color};//改变后蛇头的坐标,不能直接赋值
  if(dre === 1)newSnakebady.y -=1;//蛇头根据键盘事件上下左右移动
  if(dre === -1) newSnakebady.y +=1;
  if(dre === 2) newSnakebady.x -=1;
  if(dre === -2) newSnakebady.x +=1;
  for(var i=Snakebady.length-1;i>0;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<wall_length;i++)
  {
    for(var j=0;j<length;j++)
    {
      if(Snakebady[j].x === wall[i].x && Snakebady[j].y === wall[i].y)
        return goend();
    }
  }
}
//判断边界
function boundary(node)
{
  if(node.x < 0 || node.x > 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);//定时器,让蛇移动起来,可以设置他的速度。

加载全部内容

相关教程
猜你喜欢
用户评论