自己写的贪吃蛇小游戏用canvas做的,没有引用excanvas.js所以不支持ie ~ 还有同时按多个方向键会有bug, 喜欢的复值 code拿去玩吧~
算法上也可以用 正则 判断数组是否有重复,不一定要用循环,性能上会更好 :)
代码
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" lang ="gb2312" >
< head >
< title > - S n a k e - title >
< meta http-equiv ="content-type" content ="text/html; charset=gb2312" />
< meta name ="author" content ="Aissa" />
< meta name ="keywords" content ="" />
< meta name ="description" content ="" />
< style type ="text/css" >
body { background-color : #000 ; text-align : center ; }
canvas { margin : 100px ; border : solid 1px #ccc ; }
style >
head >
< body >
< input id ="btn" type ="button" value ="start!!" />
< canvas id ="cvSnake" width ="400" height ="300" > canvas >
body >
< script type ="text/javascript" >
var Aissa = {}, cv, ctx, point = [[ 31 , 1 ], [ 21 , 1 ], [ 11 , 1 ], [ 1 , 1 ]], mx = 4 , direction = 2 , eX = 0 , eY = 0 , sil;
function drawPoint(x, y, c) {
ctx.fillStyle = c;
ctx.fillRect(x, y, 9 , 9 );
}
function changeEggXY(w, h) {
var count = 0 ;
do {
count = 0 ;
eX = Math.floor(Math.random() * ((w - 10 ) / 10 )) * 10 + 1 ;
eY = Math.floor(Math.random() * ((h - 10 ) / 10 )) * 10 + 1 ;
for ( var i = 0 , len = point.length; i < len; i ++ ) {
if (point[i][ 0 ] == eX && point[i][ 1 ] == eY) {
count = 1 ;
break ;
}
}
} while (count == 1 )
}
function setEgg() {
drawPoint(eX, eY, ' #f70 ' );
}
Aissa.Game = {};
Aissa.Game.Snake = function (cvId) {
this .init(cvId);
}
Aissa.Game.Snake.prototype = {
init: function (cvId) {
var t = this ;
cv = document.getElementById(cvId);
if ( ! cv) return ;
ctx = cv.getContext( ' 2d ' );
/* set egg xy */
changeEggXY(cv.width, cv.height);
/* set snake */
for ( var i = 0 , len = point.length; i < len; i ++ ) {
drawPoint(point[i][ 0 ], point[i][ 1 ], ' #fff ' );
}
t.changeDirection();
sil = setInterval(t.loop, 100 );
},
loop: function () {
var t = this , newXY = [], x = point[ 0 ][ 0 ], y = point[ 0 ][ 1 ], i, len;
ctx.clearRect( 0 , 0 , cv.width, cv.height);
switch (direction) {
case 1 :
newXY = [x, y -= 10 ];
break ;
case 2 :
newXY = [x += 10 , y];
break ;
case 3 :
newXY = [x, y += 10 ];
break ;
case 4 :
newXY = [x -= 10 , y];
break ;
}
point.reverse();
point.push(newXY);
point.reverse();
point.length = mx;
for (i = 0 , len = point.length; i < len; i ++ ) {
drawPoint(point[i][ 0 ], point[i][ 1 ], ' #fff ' );
}
/* die */
var count = 0 ;
for (i = 1 ; i < len; i ++ ) {
if (point[ 0 ][ 0 ] == point[i][ 0 ] && point[ 0 ][ 1 ] == point[i][ 1 ]) {
count = 1 ;
// break;
}
}
if (count == 1 || point[ 0 ][ 0 ] < 0 || point[ 0 ][ 0 ] > cv.width || point[ 0 ][ 1 ] < 0 || point[ 0 ][ 1 ] > cv.height) {
alert( ' die ' );
location.reload();
}
/* eat */
if (point[ 0 ][ 0 ] == eX && point[ 0 ][ 1 ] == eY) {
mx += 1 ;
changeEggXY(cv.width, cv.height);
}
setEgg();
},
changeDirection: function () {
var t = this ;
window.onkeydown = function (e) {
// left: 37 4 up: 38 1 right: 39 2 down: 40 3
switch (e.keyCode) {
case 38 :
if (direction == 3 ) return ;
direction = 1 ;
break ;
case 39 :
if (direction == 4 ) return ;
direction = 2 ;
break ;
case 40 :
if (direction == 1 ) return ;
direction = 3 ;
break ;
case 37 :
if (direction == 2 ) return ;
direction = 4 ;
break ;
default :
return ;
}
}
}
}
document.getElementById( ' btn ' ).onclick = function (){
new Aissa.Game.Snake( ' cvSnake ' );
document.getElementById( ' btn ' ).disabled = true ;
}
script >
html >
< html xmlns ="http://www.w3.org/1999/xhtml" lang ="gb2312" >
< head >
< title > - S n a k e - title >
< meta http-equiv ="content-type" content ="text/html; charset=gb2312" />
< meta name ="author" content ="Aissa" />
< meta name ="keywords" content ="" />
< meta name ="description" content ="" />
< style type ="text/css" >
body { background-color : #000 ; text-align : center ; }
canvas { margin : 100px ; border : solid 1px #ccc ; }
style >
head >
< body >
< input id ="btn" type ="button" value ="start!!" />
< canvas id ="cvSnake" width ="400" height ="300" > canvas >
body >
< script type ="text/javascript" >
var Aissa = {}, cv, ctx, point = [[ 31 , 1 ], [ 21 , 1 ], [ 11 , 1 ], [ 1 , 1 ]], mx = 4 , direction = 2 , eX = 0 , eY = 0 , sil;
function drawPoint(x, y, c) {
ctx.fillStyle = c;
ctx.fillRect(x, y, 9 , 9 );
}
function changeEggXY(w, h) {
var count = 0 ;
do {
count = 0 ;
eX = Math.floor(Math.random() * ((w - 10 ) / 10 )) * 10 + 1 ;
eY = Math.floor(Math.random() * ((h - 10 ) / 10 )) * 10 + 1 ;
for ( var i = 0 , len = point.length; i < len; i ++ ) {
if (point[i][ 0 ] == eX && point[i][ 1 ] == eY) {
count = 1 ;
break ;
}
}
} while (count == 1 )
}
function setEgg() {
drawPoint(eX, eY, ' #f70 ' );
}
Aissa.Game = {};
Aissa.Game.Snake = function (cvId) {
this .init(cvId);
}
Aissa.Game.Snake.prototype = {
init: function (cvId) {
var t = this ;
cv = document.getElementById(cvId);
if ( ! cv) return ;
ctx = cv.getContext( ' 2d ' );
/* set egg xy */
changeEggXY(cv.width, cv.height);
/* set snake */
for ( var i = 0 , len = point.length; i < len; i ++ ) {
drawPoint(point[i][ 0 ], point[i][ 1 ], ' #fff ' );
}
t.changeDirection();
sil = setInterval(t.loop, 100 );
},
loop: function () {
var t = this , newXY = [], x = point[ 0 ][ 0 ], y = point[ 0 ][ 1 ], i, len;
ctx.clearRect( 0 , 0 , cv.width, cv.height);
switch (direction) {
case 1 :
newXY = [x, y -= 10 ];
break ;
case 2 :
newXY = [x += 10 , y];
break ;
case 3 :
newXY = [x, y += 10 ];
break ;
case 4 :
newXY = [x -= 10 , y];
break ;
}
point.reverse();
point.push(newXY);
point.reverse();
point.length = mx;
for (i = 0 , len = point.length; i < len; i ++ ) {
drawPoint(point[i][ 0 ], point[i][ 1 ], ' #fff ' );
}
/* die */
var count = 0 ;
for (i = 1 ; i < len; i ++ ) {
if (point[ 0 ][ 0 ] == point[i][ 0 ] && point[ 0 ][ 1 ] == point[i][ 1 ]) {
count = 1 ;
// break;
}
}
if (count == 1 || point[ 0 ][ 0 ] < 0 || point[ 0 ][ 0 ] > cv.width || point[ 0 ][ 1 ] < 0 || point[ 0 ][ 1 ] > cv.height) {
alert( ' die ' );
location.reload();
}
/* eat */
if (point[ 0 ][ 0 ] == eX && point[ 0 ][ 1 ] == eY) {
mx += 1 ;
changeEggXY(cv.width, cv.height);
}
setEgg();
},
changeDirection: function () {
var t = this ;
window.onkeydown = function (e) {
// left: 37 4 up: 38 1 right: 39 2 down: 40 3
switch (e.keyCode) {
case 38 :
if (direction == 3 ) return ;
direction = 1 ;
break ;
case 39 :
if (direction == 4 ) return ;
direction = 2 ;
break ;
case 40 :
if (direction == 1 ) return ;
direction = 3 ;
break ;
case 37 :
if (direction == 2 ) return ;
direction = 4 ;
break ;
default :
return ;
}
}
}
}
document.getElementById( ' btn ' ).onclick = function (){
new Aissa.Game.Snake( ' cvSnake ' );
document.getElementById( ' btn ' ).disabled = true ;
}
script >
html >