[原] html5 canvas 贪吃蛇小游戏~~
自己写的贪吃蛇小游戏用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>
