继上午发布了一个,象棋小游戏,下午没事,又写了一个贪吃蛇,同样是利用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>