第一次写canvas ...demo:http://xiaobude.com/app/snake
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML canvas 贪吃蛇</title>
<style type="text/css">
html,body{overflow:hidden;}
</style>
</head><body>
<canvas id="canvas" style="background:#eee;border:1px solid #ccc;">你的浏览器不支持canvas,请升级你的浏览器</canvas>
<br /><span style="color:#ccc;font-family:Arial;font-size:12px;">laidezhong(at)gmail.com</span><script type="text/javascript">var setting = {
width:50,
height:25,
pixel:10,
fps:3,
gameOver : false,
paush : false,
color : "#ef0f6e",
border: "#ffffff",
level:{
"7":[1,0],
"11":[1,0],
"14":[1,0],
"20":[1,1],
"25":[1,0],
"30":[1,0],
"40":[1,1],
"50":[1,0],
"70":[1,0],
"90":[1,0],
"120":[1,0]
}
};var snake = {
position : [ [2,0],[1,0],[0,0] ],
keyCode:39,
forward:[],
food:[],
draw : function(){
ctx.clearRect(0,0,setting.width*setting.pixel,setting.height*setting.pixel)
var length = this.position.length;
for(var k = length - 1;k >= 0;k--){
this.drawDotted( this.position[k] );
}
for(var k=0,kk=this.food.length;k<kk;k++){
this.drawDotted( this.food[k] );
}
},
next:function(){
var keyCode = snake.keyCode;
var forwardList = {
"37" : [-1,0],
"38" : [0,-1],
"39" : [1,0],
"40" : [0,1]
};
if( forwardList[keyCode] && snake.forward[0] != forwardList[keyCode][0] && snake.forward[1] != forwardList[keyCode][1] ) snake.forward = forwardList[keyCode];
var length = this.position.length;
var last = [ this.position[length-1][0],this.position[length-1][1] ];
for(var k = length - 1;k >= 0;k--){
if(k){
this.position[k][0] = this.position[k-1][0];
this.position[k][1] = this.position[k-1][1];
}
};
this.position[0][0] += this.forward[0];
this.position[0][1] += this.forward[1];
for(var k = length - 1;k >= 0;k--){
if(k){
if( this.position[0][0] == this.position[k][0] && this.position[0][1] == this.position[k][1] )setting.gameOver = true;
if( this.position[0][0] < 0 || this.position[0][1] < 0 || this.position[0][0] >= setting.width || this.position[0][1] >= setting.height)setting.gameOver = true;
}
}
for(var k=0,kk=this.food.length;k<kk;k++){
if( this.position[0][0] == this.food[k][0] && this.position[0][1] == this.food[k][1] ){
this.position.push( last );
this.createFood(k);
}
}
if( setting.level[length]){
if( setting.level[length][0] )setting.fps+=setting.level[length][0];
if( setting.level[length][1] ){
this.createFood(this.food.length)
}
setting.level[length] = false;
}
},
createFood:function(key){
var r = function(n){
return parseInt(Math.random()*n) + 1;
}
var x = r(setting.width-1);
var y = r(setting.height-1);
var length = this.position.length;
for(var k =0;k<length;k++){
if( x == this.position[k][0] && y == this.position[k][1] ){
createFood(key);
return;
}
}
this.food[key] = [x,y];
},
drawDotted:function(pos){
ctx.fillRect( pos[0]*setting.pixel, pos[1]*setting.pixel,setting.pixel,setting.pixel );
ctx.strokeRect( pos[0]*setting.pixel, pos[1]*setting.pixel,setting.pixel,setting.pixel );
}
}document.body.onkeydown = function(e){
e = e || window.event;
var keyCode = e.keyCode;
if(keyCode == 32){
setting.paush = !setting.paush;
return;
};
snake.keyCode = keyCode;
}var canvas = document.getElementById("canvas");
canvas.width = setting.width * setting.pixel;
canvas.height = setting.height * setting.pixel;
var ctx=canvas.getContext("2d");
ctx.fillStyle = setting.color;
ctx.strokeStyle = setting.border;
snake.createFood(0);
loop();
function loop(){
if(!setting.paush){
snake.next();
if(setting.gameOver){
alert("game over");
return;
};
snake.draw();
}
setTimeout( loop,1000/setting.fps );
}
</script></body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML canvas 贪吃蛇</title>
<style type="text/css">
html,body{overflow:hidden;}
</style>
</head><body>
<canvas id="canvas" style="background:#eee;border:1px solid #ccc;">你的浏览器不支持canvas,请升级你的浏览器</canvas>
<br /><span style="color:#ccc;font-family:Arial;font-size:12px;">laidezhong(at)gmail.com</span><script type="text/javascript">var setting = {
width:50,
height:25,
pixel:10,
fps:3,
gameOver : false,
paush : false,
color : "#ef0f6e",
border: "#ffffff",
level:{
"7":[1,0],
"11":[1,0],
"14":[1,0],
"20":[1,1],
"25":[1,0],
"30":[1,0],
"40":[1,1],
"50":[1,0],
"70":[1,0],
"90":[1,0],
"120":[1,0]
}
};var snake = {
position : [ [2,0],[1,0],[0,0] ],
keyCode:39,
forward:[],
food:[],
draw : function(){
ctx.clearRect(0,0,setting.width*setting.pixel,setting.height*setting.pixel)
var length = this.position.length;
for(var k = length - 1;k >= 0;k--){
this.drawDotted( this.position[k] );
}
for(var k=0,kk=this.food.length;k<kk;k++){
this.drawDotted( this.food[k] );
}
},
next:function(){
var keyCode = snake.keyCode;
var forwardList = {
"37" : [-1,0],
"38" : [0,-1],
"39" : [1,0],
"40" : [0,1]
};
if( forwardList[keyCode] && snake.forward[0] != forwardList[keyCode][0] && snake.forward[1] != forwardList[keyCode][1] ) snake.forward = forwardList[keyCode];
var length = this.position.length;
var last = [ this.position[length-1][0],this.position[length-1][1] ];
for(var k = length - 1;k >= 0;k--){
if(k){
this.position[k][0] = this.position[k-1][0];
this.position[k][1] = this.position[k-1][1];
}
};
this.position[0][0] += this.forward[0];
this.position[0][1] += this.forward[1];
for(var k = length - 1;k >= 0;k--){
if(k){
if( this.position[0][0] == this.position[k][0] && this.position[0][1] == this.position[k][1] )setting.gameOver = true;
if( this.position[0][0] < 0 || this.position[0][1] < 0 || this.position[0][0] >= setting.width || this.position[0][1] >= setting.height)setting.gameOver = true;
}
}
for(var k=0,kk=this.food.length;k<kk;k++){
if( this.position[0][0] == this.food[k][0] && this.position[0][1] == this.food[k][1] ){
this.position.push( last );
this.createFood(k);
}
}
if( setting.level[length]){
if( setting.level[length][0] )setting.fps+=setting.level[length][0];
if( setting.level[length][1] ){
this.createFood(this.food.length)
}
setting.level[length] = false;
}
},
createFood:function(key){
var r = function(n){
return parseInt(Math.random()*n) + 1;
}
var x = r(setting.width-1);
var y = r(setting.height-1);
var length = this.position.length;
for(var k =0;k<length;k++){
if( x == this.position[k][0] && y == this.position[k][1] ){
createFood(key);
return;
}
}
this.food[key] = [x,y];
},
drawDotted:function(pos){
ctx.fillRect( pos[0]*setting.pixel, pos[1]*setting.pixel,setting.pixel,setting.pixel );
ctx.strokeRect( pos[0]*setting.pixel, pos[1]*setting.pixel,setting.pixel,setting.pixel );
}
}document.body.onkeydown = function(e){
e = e || window.event;
var keyCode = e.keyCode;
if(keyCode == 32){
setting.paush = !setting.paush;
return;
};
snake.keyCode = keyCode;
}var canvas = document.getElementById("canvas");
canvas.width = setting.width * setting.pixel;
canvas.height = setting.height * setting.pixel;
var ctx=canvas.getContext("2d");
ctx.fillStyle = setting.color;
ctx.strokeStyle = setting.border;
snake.createFood(0);
loop();
function loop(){
if(!setting.paush){
snake.next();
if(setting.gameOver){
alert("game over");
return;
};
snake.draw();
}
setTimeout( loop,1000/setting.fps );
}
</script></body>
</html>
firefox,也可以,刚测试 的。
呵呵,不错的界面,可以把蛇头换个颜色,食物换成绿色
laidezhong(at)gmail.com 无语....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML canvas 贪吃蛇</title>
<style type="text/css">
html,body{overflow:hidden;}
</style>
</head><body>
<div id="canvas" style="background:#eee;border:1px solid #ccc;position:relative;"></div>
<br /><span style="color:#ccc;font-family:Arial;font-size:12px;">laidezhong(at)gmail.com</span><script type="text/javascript">var setting = {
width:50,
height:25,
pixel:10,
fps:3,
gameOver : false,
paush : false,
color : "#ef0f6e",
border: "#ffffff",
level:{
"7":[1,0],
"11":[1,0],
"14":[1,0],
"20":[1,1],
"25":[1,0],
"30":[1,0],
"40":[1,1],
"50":[1,0],
"70":[1,0],
"90":[1,0],
"120":[1,0]
}
};var snake = {
position : [ [2,0],[1,0],[0,0] ],
keyCode:39,
forward:[],
food:[],
draw : function(){
ctx.clearRect(0,0,setting.width*setting.pixel,setting.height*setting.pixel);
var length = this.position.length;
for(var k = length - 1;k >= 0;k--){
this.drawDotted( this.position[k] );
}
for(var k=0,kk=this.food.length;k<kk;k++){
this.drawDotted( this.food[k] );
}
},
next:function(){
var keyCode = snake.keyCode;
var forwardList = {
"37" : [-1,0],
"38" : [0,-1],
"39" : [1,0],
"40" : [0,1]
};
if( forwardList[keyCode] && snake.forward[0] != forwardList[keyCode][0] && snake.forward[1] != forwardList[keyCode][1] ) snake.forward = forwardList[keyCode];
var length = this.position.length;
var last = [ this.position[length-1][0],this.position[length-1][1] ];
for(var k = length - 1;k >= 0;k--){
if(k){
this.position[k][0] = this.position[k-1][0];
this.position[k][1] = this.position[k-1][1];
}
};
this.position[0][0] += this.forward[0];
this.position[0][1] += this.forward[1];
for(var k = length - 1;k >= 0;k--){
if(k){
if( this.position[0][0] == this.position[k][0] && this.position[0][1] == this.position[k][1] )setting.gameOver = true;
if( this.position[0][0] < 0 || this.position[0][1] < 0 || this.position[0][0] >= setting.width || this.position[0][1] >= setting.height)setting.gameOver = true;
}
}
for(var k=0,kk=this.food.length;k<kk;k++){
if( this.position[0][0] == this.food[k][0] && this.position[0][1] == this.food[k][1] ){
this.position.push( last );
this.createFood(k);
}
}
if( setting.level[length]){
if( setting.level[length][0] )setting.fps+=setting.level[length][0];
if( setting.level[length][1] ){
this.createFood(this.food.length)
}
setting.level[length] = false;
}
},
createFood:function(key){
var r = function(n){
return parseInt(Math.random()*n) + 1;
}
var x = r(setting.width-1);
var y = r(setting.height-1);
var length = this.position.length;
for(var k =0;k<length;k++){
if( x == this.position[k][0] && y == this.position[k][1] ){
createFood(key);
return;
}
}
this.food[key] = [x,y];
},
drawDotted:function(pos){
ctx.fillRect( pos[0]*setting.pixel, pos[1]*setting.pixel,setting.pixel,setting.pixel );
ctx.strokeRect( pos[0]*setting.pixel, pos[1]*setting.pixel,setting.pixel,setting.pixel );
}
}document.body.onkeydown = function(e){
e = e || window.event;
var keyCode = e.keyCode;
if(keyCode == 32){
setting.paush = !setting.paush;
return;
};
snake.keyCode = keyCode;
}var canvas = document.getElementById("canvas");
canvas.style.width = setting.width * setting.pixel + 'px';
canvas.style.height = setting.height * setting.pixel + 'px';
/**
* 自定义Context
*/
var apply = function(dest,src){
for(var name in src){
if(!dest[name]){
dest[name] = src[name];
}
}
};var Context = function(canvas){
var publicMethods = {
fillStyle:"#ef0f6e",
strokeStyle:"#ffffff",
canvas:canvas,
clearRect:function(x, y, width, height){
var it = document.createElement('div');
it.style.cssText = 'position:absolute;left:' + x + 'px;top:' + y + 'px;width:' + width + 'px;height:' + height + 'px;background-color:' + this.strokeStyle + ';border:1px solid ' + this.strokeStyle + ';';
this.canvas.appendChild(it);
},
fillRect:function(x, y, width, height){
var it = document.createElement('div');
it.style.cssText = 'position:absolute;left:' + x + 'px;top:' + y + 'px;width:' + width + 'px;height:' + height + 'px;background-color:' + this.fillStyle + ';border:1px solid ' + this.strokeStyle + ';';
this.canvas.appendChild(it);
},
strokeRect:function(x, y, width, height){
}
};
apply(this,publicMethods);
};var ctx=new Context(canvas);//canvas.getContext("2d");
ctx.fillStyle = setting.color;
ctx.strokeStyle = setting.border;
snake.createFood(0);
loop();function loop(){
if(!setting.paush){
snake.next();
if(setting.gameOver){
alert("game over");
return;
};
snake.draw();
}
setTimeout( loop,1000/setting.fps );
}
</script></body>
</html>