简易html5贪吃蛇

1. [图片] E6~0%QPA46ER843UQJ$0Z`H.jpg

2. [文件] snake.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The snake game</title>
</head>
<script type="text/javascript">
function log(msg) {
console.log(msg);
}
</script>

<body>

<canvas id="canvas">
Your browser cannot support html5.
</canvas>

<script type="text/javascript">
this.onkeydown = function(e) {
var code = e.keyCode;
if (code == 37)
changeMove(3);
if (code == 38)
changeMove(0);
if (code == 39)
changeMove(1);
if (code == 40)
changeMove(2);
}
function changeMove(val) {
if ((move == 0 || move == 2) && (val == 2 || val == 0))
return;http://www.huiyi8.com/hunsha/chuangyi/
if ((move == 3 || move == 1) && (val == 1 || val == 3))
return;创意婚纱照片
move = val;
}

function dead(snake) {
// 撞墙壁
switch (move) {
case 0:
if (snake[0] < 0) {
log('up:' + snake[0]);
return true;
}
break;
case 1:
if (snake[0] % 20 == 0) {
log('right:' + snake[0]);
return true;
}
break;
case 2:
if (snake[0] >= 400) {
log('down:' + snake[0]);
return true;
}
break;
case 3:
if ((snake[0] + 1) % 20 == 0) {
log('left:' + snake[0]);
return true;
}
break;
default:
break;
}
// 咬自己
for(var i = 1; i < snake.length ; i ++) {
if(snake[0] == snake[i]) {
log('self:' + snake[0]);
return true;
}
}
return false;
}
// rand=-1表示食物被吃，要求重新生成食物
function run(rand) {
//ctx.fillStyle = '#000000';
ctx.clearRect(100, 100, 300, 300);
// 画布容器
var container = new Array(400);
for ( var i = 0; i < container.length; i++) {
container[i] = 0;
}
for ( var i in snake) {
container[snake[i]] = 1;
}
// 生成食物
if(rand == -1) {
var rands = [];
for ( var i in container) {
if (container[i] == 0)
rands.push(i);
}
rand = rands[parseInt(Math.random() * rands.length)];
}
// 放入画布容器
container[rand] = 1;
for ( var i = 0; i < container.length; i++) {
if (container[i] == 0) {
ctx.fillRect(100 + sw * (i % 20),
100 + sw * parseInt((i / 20)), sw, sw);

ctx.strokeRect(100 + sw * (i % 20),
100 + sw * parseInt((i / 20)), 10, sw);
} else {
ctx.strokeRect(100 + sw * (i % 20),
100 + sw * parseInt((i / 20)), sw, sw);
}
}
var slen = snake.length;
var shead = snake[0], send = snake[slen - 1];
ctx.fillStyle = '#000000';
ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);
//ctx.fillRect(100 + sw * (shead % 20), 100 + sw * parseInt((shead / 20)), sw, sw);
ctx.fillStyle = '#ff0000';
ctx.beginPath();
ctx.arc((100 + sw * (shead % 20)) + sw / 2, (100 + sw * parseInt((shead / 20))) + sw / 2, sw / 2, 0, Math.PI * 2, false);
//不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果
ctx.closePath();
ctx.fill();
ctx.fillStyle = '#000000';
//ctx.strokeRect(100 + sw * (shead % 20), 100 + sw
// * parseInt((shead / 20)), sw, sw);
for ( var i = slen - 1; i > 0; i--) {
snake[i] = snake[i - 1];
}
switch (move) {
case 0:
snake[0] = shead - 20;
break;
case 1:
snake[0] = shead + 1;
break;
case 2:
snake[0] = shead + 20;
break;
case 3:
snake[0] = shead - 1;
break;
default:
break;
}
// 死亡
if (dead(snake)) {
alert('game over');
return false;
}
// 蛇吃到食物，增加移动次数，到达蛇尾，把食物放到蛇数组
if (eat && ms++ == slen) {
ms = 0;
snake.push(send);
eat = false;
}
// 吃到食物，重新生成食物
if (snake[0] == rand) {
eat = true;
rand = -1;
}
setTimeout('run(' + rand + ')', speed);
}
//log(snake);
//for(var i = 0; i < 300; i ++)
var canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext('2d');
var snake = []; // 蛇对象
snake.push(205);
snake.push(204);
snake.push(203);
snake.push(202);
snake.push(201);
// move：移动方式[0, 1, 2, 3] = [up, right, down, left]
// ms：当蛇吃到食物后的移动次数，以此来判断增加蛇数组长度
// eat：蛇是否吃到食物
// sw：蛇方块宽度
// speed：速度ms
var move = 1, ms = 0, eat = false, sw = 10, speed = 50;
run(-1);

log(canvas);
</script>
</body>
</html>

巴特西

简易html5贪吃蛇

1. [图片] E6~0%QPA46ER843UQJ$0Z`H.jpg

最新文章

热门文章