[原] html5 canvas 贪吃蛇小游戏~~
2010-02-03 12:11
603 查看
自己写的贪吃蛇小游戏用canvas做的，没有引用excanvas.js所以不支持ie ~ 还有同时按多个方向键会有bug， 喜欢的复值 code拿去玩吧~
算法上也可以用 正则 判断数组是否有重复，不一定要用循环，性能上会更好 ：）
canvas{margin:10px; border:solid 1px #ccc;}
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], '#000');
}
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], '#000');
}
/* 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;
}
代码
<!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>
算法上也可以用 正则 判断数组是否有重复，不一定要用循环，性能上会更好 ：）
canvas{margin:10px; border:solid 1px #ccc;}
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], '#000');
}
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], '#000');
}
/* 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;
}
代码
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html5 贪吃蛇canvas小游戏
- html5 canvas 自制小游戏系列之 【贪吃蛇】。
- HTML5 Canvas 射击类小游戏 平滑的移动 思路
- 如何开发一个简单的HTML5 Canvas 小游戏
- 利用HTML5 <canvas>实现2048小游戏
- HTML5 Canvas实现贪吃蛇（一）
- HTML5 Canvas实现贪吃蛇（二）
- 如何开发一个简单的HTML5 Canvas 小游戏
- html5贪吃蛇小游戏
- html5实现贪吃蛇小游戏
- HTML5 canvas 小游戏练手
- html5 canvas 实现简易马祖小游戏
- 贪吃蛇 HTML5 Canvas代码
- 一个基于HTML5的canvas的js面向对象贪吃蛇
- 最近学习到H5的canvas,一时兴起写了个经典的“贪吃蛇”小游戏
- 用html5中canvas标签写个贪吃蛇
- limej 写一个HTML5的贪吃蛇小游戏
- HTML5写了个贪吃蛇，1.0版。主要玩玩canvas画画和初体验Web存储-localStorage
- 网页HTML5--飞机大战小游戏开发--canvas的应用
- javascript+canvas实现小游戏-贪吃蛇