js写的贪吃蛇小游戏

最新推荐文章于 2024-05-02 14:46:08 发布

fanzhang1990

最新推荐文章于 2024-05-02 14:46:08 发布

阅读量1.5k

点赞数

分类专栏： h5—canvas简单动画效果

本文链接：https://blog.csdn.net/fanzhang1990/article/details/21986033

版权

h5—canvas简单动画效果专栏收录该内容

3 篇文章 0 订阅

订阅专栏

我看了别人用jquery和html5写了一个简单的贪吃蛇，我看了大致思路，自己也写了一个js的。主要是运用到html5中canvas画图的功能。

setinterval(a,time)定时器函数，原来我一直以为在等待的time中间，程序啥都不干。其实我错了，在time的等待过程中间，程序是运行其他代码的。等time到了，唤醒a函数，就运行a函数。定时器和js其他程序是并行执行的，互不影响！

以下是完整代码：

<!DOCTYPE>
<html>
<head>
<metra charset="UTF-8" />
<title>snake food</title>
<style type="text/css">
#_canvas{

background-color: rgb(240,240,240);
}
</style>
</head>
<body>
<canvas id="_canvas" width="800" height="600">
</canvas>
<script>
window.οnlοad=function(){

var convas2d = document.getElementById("_canvas");

//canvas区域的宽度和高度
var can_width = convas2d.width;
var can_heiht = convas2d.height;

//最小单元格的大小
var cell_wh =10;
//snake用一个数组表示
var snake =[];
//分数
var score = 0;

//当前snake的方向,初始化为向右
var direction =37;

//食物
var food;
var j=0;
convas2d = convas2d.getContext("2d");
convas2d.lineWidth=0;
convas2d.fillStyle="blue";
var sleep=200;

//初始化
function init()
{
snake =[];
direction =37;

create_snake();
create_food();

if(typeof game_loop != "undefined")
clearInterval(game_loop);
game_loop = setInterval(paint,sleep);
//setInterval(paint,sleep);
//alert(sleep);

}

//绘制每一个小单元格
function paint_cell(x,y)
{
convas2d.fillRect(x,y,cell_wh,cell_wh);
convas2d.fillStyle="blue";
convas2d.strokeRect(x,y,cell_wh,cell_wh);
convas2d.strokeStyle="white";
};

//创造snake，初始长度为2
function create_snake()
{
snake.push({x:100,y:50});
snake.push({x:110,y:50});

}

//随机产生的食物点
function create_food()
{
var x1= 10 * Math.floor(Math.random()*70+1);
var y1= 10 * Math.floor(Math.random()*50+1);
food={
x:x1,
y:y1

}
}

function paint()
{
//每次重新绘制之前都要擦除之前的画面
convas2d.clearRect(0,0,800,600);

//获取snake的头部信息
var nx = snake[0].x;
var ny = snake[0].y;

if(direction==39)
nx +=10;
else if(direction==37)
nx -=10;
else if(direction==38)
ny -=10;
else
ny+=10;

//检查碰撞或者缠到自己
if(check_bump(nx,ny) || is_in(nx,ny,snake))
{
init();
return;
}

//头部碰到食物了，头部加入一个cell，剪去尾巴cell
if(is_in(food.x,food.y,snake))
{
create_food();
}
//没碰到食物，就向前移动,最后一个cell移除
else
snake.pop();
//插入头部
snake.unshift({x:nx,y:ny});

//绘制具体的snake链条
for(var i=0;i<snake.length;i++)
paint_cell(snake[i].x,snake[i].y);
//绘制食物
paint_cell(food.x,food.y);

}

//碰撞检测是否出canvas区域
function check_bump(x,y)
{
if(x ==-10 || x==can_width+10 || y==-10 || y==can_heiht+10)
return true;
else
return false;
}

//头部是否在已知的数组中
function is_in(x,y,array)
{
for(var i=0;i<array.length;i++)
if(x == array[i].x && y==array[i].y)
return true;

return false;
}

init();

document.onkeydown = function()
{

var oEvent = window.event;
oEvent = oEvent.keyCode;
if(oEvent == 37 &&direction!=39) { //left
direction =37;
}
else if(oEvent == 38&&direction!=40){ //up
direction =38;
}
else if(oEvent == 39&&direction!=37){ //right
direction =39;
}
else if(oEvent == 40&&direction!=38){ //down
direction =40;
}
else
{}
}

};
</script>
</body>
</html>

fanzhang1990

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js写的贪吃蛇小游戏

我看了别人用jquery和html5写了一个简单的贪吃蛇，我看了大致思路，自己也写了一个js的。主要是运用到html5中canvas画图的功能。setinterval(a,time)定时器函数，原来我一直以为在等待的time中间，程序啥都不干。其实我错了，在time的等待过程中间，程序是运行其他代码的。等time到了，唤醒a函数，就运行a函数。定时器和js其他程序是并行执行的，互不影响！
复制链接

扫一扫