<html>
<head>
<meta charset="utf-8">
<title>game</title>
</head>
<body style="margin:0px;text-align:center;" onload="init();">
<br>
<br>
<br>
<div id="box">
<p>W S A D移动，p暂停</p>
<canvas id="myCanvas"></canvas>
<p>score：<text id="ttt">0</text></p>
</div>
</body>
<script>
var c=document.getElementById("myCanvas");
c.width="600";//注意：没有单位
c.height="400";//注意：没有单位
var ctx=c.getContext("2d");
var WIDTH;
var HEIGHT;
var block_size;
var p_x;//1-58
var p_y;//1-38
var live;
var direction;//1上 2下 3左 4右
var food_x;
var food_y;
var p;
//var text = document.getElementById('t');
setInterval(run, (60));//100 40 10
function init(){
alert("点击以开始");
WIDTH = 600;
HEIGHT = 400;
block_size = 10;
//p_x = 10;//1-58
//p_y = 18;//1-38
body = [
{x:10,y:18},
{x:9,y:18},
{x:8,y:18},
];
temp_x = -1;//记录增加的身体
temp_y = -1;
live = true;
direction = 4;//1上 2下 3左 4右
food_x = -1;
food_y = -1;
p = true;
speed = 1;
document.getElementById("ttt").innerHTML = 0;
}
function run(){
if(p){
//console.log(direction);
if(direction==1){
body[0].y-=speed;
}else if(direction==2){
body[0].y+=speed;
}else if(direction==3){
body[0].x-=speed;
}else if(direction==4){
body[0].x+=speed;
}
for (i=body.length-1; i>0; i--) {
body[i].x = body[i-1].x;
body[i].y = body[i-1].y;
}
if(body[0].x<1||body[0].x>58||body[0].y<1||body[0].y>38){//撞墙
alert("啊哈哈哈哈哈，菜鸡");
init();
}
for(i=2;i<body.length;i++){
if(body[0].x==body[i].x && body[0].y==body[i].y){
alert("啊哈哈哈哈哈，菜鸡");
init();
}
}
/*吃食物*/
if(body[0].x==food_x && body[0].y==food_y){
temp_x = body[body.length-1].x;
temp_y = body[body.length-1].y;
food_x = -1;
food_y = -1;
document.getElementById("ttt").innerHTML = parseInt(document.getElementById("ttt").innerHTML)+1;
}
if(temp_x!=-1 && temp_y!=-1){
body.push({x:temp_x,y:temp_y});
temp_x=-1;
temp_y=-1;
}
if(food_x == -1 && food_y == -1){
food_x = Math.floor(Math.random()*57)+1;
food_y = Math.floor(Math.random()*37)+1;
}
draw();
}
}
function draw(){
ctx.clearRect(0,0,WIDTH,HEIGHT);
ctx.fillStyle="#222222";
ctx.fillRect(0,0,WIDTH,HEIGHT);
ctx.fillStyle="#c2c2c2";
ctx.fillRect(block_size,block_size,WIDTH-2*block_size,HEIGHT-2*block_size);
ctx.fillStyle="#125648";//画身体
for(i=0;i<body.length;i++){
ctx.fillRect(body[i].x*block_size,body[i].y*block_size,block_size,block_size);
}
//画食物
ctx.fillRect(food_x*block_size,food_y*block_size,block_size,block_size);
ctx.restore();
}
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
//console.log(e.keyCode);
if (e && e.keyCode == 87) {
if(direction!=2){
direction = 1;
}
}else if(e && e.keyCode == 83){
if(direction!=1){
direction = 2;
}
}else if(e && e.keyCode == 65){
if(direction!=4){
direction = 3;
}
}else if(e && e.keyCode == 68){
if(direction!=3){
direction = 4;
}
}else if(e && e.keyCode == 80){
p=!p;
}
};
</script>