超级简单的纯js 贪吃蛇,看一遍你也会写

最新推荐文章于 2022-07-11 22:13:30 发布

很甜的西瓜

最新推荐文章于 2022-07-11 22:13:30 发布

阅读量3.1k

点赞数

本文链接：https://blog.csdn.net/long5305350/article/details/44063945

版权

继上午发布了一个，象棋小游戏，下午没事，又写了一个贪吃蛇，同样是利用canvas 画布完成.

贪吃蛇逻辑稍为比象棋复杂一些，需要加速，有不同的关卡设置，有食物，有障碍物

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>

<canvas id="canvasTCS">

</canvas>

<script>
var tcs=function(id)
{

this.element = document.getElementById(id);
this.element.width = this.column*this.cellSize + 200
this.element.height = this.row*this.cellSize + 200;
this.ctx = this.element.getContext("2d");
this.bodys = [];
this.init();
this.drawMap();

}
// 设置他的基础属性
tcs.prototype = {
cellSize:30,
row:20,
column: 20,
level:1,// 默认第一关
tcsOptions: {
hColor: "green",
sColor: "gray",
shiwuColor: "blue",
zawColor:"#000",
bodyLength: 5


}, // 地图
maps: [
'',
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
],
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 0,0, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]
],
drawMap:function()
{
var
that = this,
maps=that.maps,
bodys=that.bodys,
ctx=this.ctx,
cellSize = that.cellSize,
row = that.row,
column = that.column,
width = column * cellSize,
height = row * cellSize,
startX = 100,
startY = 100,
x = 0.5
;
if (maps.length == 1)
{
return;
}
if (that.level > maps.length)
{
that.level=1;
}

ctx.lineWidth = 1;
ctx.strokeStyle = "#000";
ctx.beginPath();
for (var i = 0; i <= row; i++) {
ctx.moveTo(startX + x, startY + (i * cellSize) + x);
ctx.lineTo(startX + width+x, startY + (i * cellSize)+x)
}
for (var i = 0; i <= column; i++) {
ctx.moveTo(startX + (i * cellSize)+x, startY +x);
ctx.lineTo(startX + (i * cellSize)+x, startY + height+x)
}
for (var i = 0; i < row;i++)
{
bodys[i] = [];

for (var c = 0; c < column; c++) {

bodys[i][c] = {
x: startX + (c * cellSize) +1,
y: startY + (i * cellSize) + 1,
w:cellSize-1,
h: cellSize - 1,
color:maps[this.level][i][c]==0?"":this.tcsOptions.zawColor

};

}
}
ctx.stroke();
this.createTcs();
this.drawBody();

this.isStartGame = false;
this.direction = 39;
this.speed = 500;
this.gameover = false;
this.isAddSpeed = true;

this.movecomplete = false;
},
drawBody:function()
{
var bodys = this.bodys, len = bodys.length;
for (var i = 0; i < len; i++) {

for (var c = 0,len2=bodys[i].length; c < len2; c++) {

this.drawPoint(bodys[i][c]);

}
}
},
drawPoint:function(d)
{
this.ctx.fillStyle = d.color||"#fff";
this.ctx.fillRect(d.x, d.y,d.w,d.h);
},
createTcs:function()
{
var that = this, sheSheng = that.sheSheng = [];
for (var i = 2, len = this.tcsOptions.bodyLength + i; i < len;i++)
{

sheSheng.push({
r: 1,
c:i
});
}
this.drawTcs();
that.createSW(1);
},
drawTcs:function()
{
for(var i=0;i<this.sheSheng.length;i++)
{
this.bodys[this.sheSheng[i].r][this.sheSheng[i].c].color = this.gameover?this.tcsOptions.sColor:this.tcsOptions.hColor;
}
},

eachSheSheng:function(fn)
{
for (var i = 0; i < this.sheSheng.length; i++) {
fn.call(this.sheSheng[i]);
}
},
startGame:function()
{
var that = this,
maxLen = 15,
speed = that.speed/maxLen,
maxR=that.row,
maxC=that.column,
first,
movehandler=function()
{
if (that.sheSheng.length>=maxLen)
{

that.level ++;
that.drawMap();
return;
}
var first, last = that.sheSheng[that.sheSheng.length - 1], r = 0, c = 0;
if (that.direction==39)
{
r = last.r;
c = last.c + 1;

} else if (that.direction==38)
{

r = last.r-1;
c = last.c;

} else if (that.direction == 37) {
r = last.r;
c = last.c -1;
} else if (that.direction == 40) {
r = last.r+1;
c = last.c;
}
if (r < 0 || r >= maxR || c < 0 || c >= maxC)
{
that.gameover = true;
that.drawTcs();
that.drawBody();
return;
}
else if (that.bodys[r][c].color==that.tcsOptions.zawColor)
{
that.gameover = true;
that.drawTcs();
that.drawBody();
return;
} else if (that.bodys[r][c].color == that.tcsOptions.shiwuColor)
{
that.swCount--;
if (that.swCount == 0) {
that.createSW(that.level);
}
} else
{
first = that.sheSheng.shift()
that.bodys[first.r][first.c].color = "";
}

that.sheSheng.push({r:r,c:c});

that.drawTcs();
that.drawBody();
that.movecomplete = false;
setTimeout(movehandler, that.speed - speed * that.sheSheng.length);
},
gameTime = setTimeout(movehandler, that.speed - speed * that.sheSheng.length);
},
createSW:function(count)
{
this.swCount = 0;
var maxR = this.row,
maxC = this.column, r = 0, c = 0;
do {
r = Math.floor(Math.random() * maxR);
c = Math.floor(Math.random() * maxC);
if(this.bodys[r][c].color!="")
{
count++;
}else
{
this.bodys[r][c].color = this.tcsOptions.shiwuColor;

}
this.swCount++;
} while (--count);

},

init: function ()
{
var that = this;

document.addEventListener("keydown", function (e) {
if (that.gameover == true) {
return;
}
if (!that.isStartGame)
{
that.isStartGame = true;
that.startGame();
}
if (that.movecomplete)
{
return;
}
var keycode = e.which || e.keyCode;
if(keycode>=37&&keycode<=40)
{
that.movecomplete = true;
if (that.direction == 39 && keycode == 37 || that.direction == 38 && keycode == 40 || that.direction == 40 && keycode == 38 || that.direction == 37 && keycode == 39)
{
return;
}
that.direction=keycode;
}


});

}

};

var t = new tcs("canvasTCS");


</script>
<style>
aa
{
color:#
}
</style>
</body>
</html>
</html>

很甜的西瓜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
超级简单的纯js 贪吃蛇,看一遍你也会写

继上午发布了一个，象棋小游戏，下午没事，又写了一个贪吃蛇，同样是利用canvas 画布完成.贪吃蛇逻辑稍为比象棋复杂一些，需要加速，有不同的关卡设置，有食物，有障碍物 var tcs=function(id) {
复制链接

扫一扫