用canvas和原生js写的一个贪吃蛇游戏
2015-01-13 17:54
615 查看
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" charset="utf-8" content="width=device-width,user-scalable=no，initial-scale=1"/>
<style type="text/css">
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, big, em, font, img, strong, tt, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
outline: none;
border: none;
resize: none;
word-break: break-all;
word-wrap: break-word;
}
html, body {
height: 100%;
margin: 0;
}
.body{width: 100%;height: 100%;background-color: #77c68b;}
#canvas{position: absolute;left:50%;margin-left: -400px;background-color: #fff;}
</style>
</head>
<body>
<div class="body">
<canvas id="canvas" width="800" height="800"></canvas>
<label id="grade"></label>
</div>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var gradelabel=document.getElementById("grade");
var rectcoord=[21,22,23],
rectx=0,
recty=0,
rect=[],
rectnum=0,
mark=true,
speed=100,
dir= 2,
movenum= 1,
foodcoord= 0,
grade= 0,
head=0;
//绑定键盘事件
document.addEventListener("keydown",function(e){
var e=e||event;
var currKey=e.keyCode||e.which||e.charCode;
switch(currKey){
case 37:if(dir!=2){dir=4}break;//左
case 38:if(dir!=3){dir=1}break;//上
case 39:if(dir!=4){dir=2}break;//右
case 40:if(dir!=1){dir=3}break;//下
default:break;
}
});
//绘制蛇身
function snack() {
if(mark){
foodcoord=food();
}
context.clearRect(0,0,canvas.width,canvas.height);
canvas.width=canvas.width;
for(var a=0;a<20;a++){
for(var b=0;b<20;b++){
temp="context.beginPath();context.rect("+rectx+","+recty+", 40, 40);context.fillStyle = 'white';context.fill();" +
"context.strokeStyle = 'white';context.stroke();";
rect.push(temp);
rectx<760?rectx+=40:rectx=0;
}
recty<800?recty+=40:recty=0;
}
var c=rectcoord.length;
for(var d=0;d<c;d++){
rect[rectcoord[d]]=rect[rectcoord[d]].replace(/white/g,"green");
}
rect[foodcoord]=rect[foodcoord].replace(/white/g,"orangered");
eval(rect.join(""));
rect=[],rectx=0,recty=0,mark=false;
snackmove();
gradelabel.innerHTML="得分："+grade+"";
}
//绘制食物
function food(){
var ispass=true;
var a= parseInt(Math.random()*400);
for(var b in rectcoord){
if(a==rectcoord[b]){
ispass=false;
break;
}
}
return ispass?a:food();
}
//死亡
function die(){
var a=rectcoord.length;
var diecoord=rectcoord.slice(0,a-1);
for(var b in diecoord){
if(head==diecoord[b]){
clearInterval(begin);
setTimeout(function(){
context.beginPath();
context.clearRect(0,0,canvas.width,canvas.height);
canvas.width=canvas.width;
context.fillStyle = '#ee6a39';
context.font = '50px Calibri';
context.fillText("游戏结束,得分："+grade+"",220,375);
context.lineJoin = 'miter';
context.stroke();
},1500);
break;
}
}
}
//蛇身移动
function snackmove(){
var b= rectcoord.shift();
var a= rectcoord.pop();
rectcoord.push(a);
switch (dir){
case 1:movenum=-20;if(a+movenum<0){movenum=380;}break;
case 2:movenum=1;if(a%20==19){movenum=-19;}break;
case 3:movenum=20;if(a+movenum>399){movenum=-380;}break;
case 4:movenum=-1;if(a%20==0){movenum=19;}break;
}
head=a+movenum;
rectcoord.push(head);
//吃食物
if(head==foodcoord){
rectcoord.unshift(b);
foodcoord=food();
grade++;
if(grade%50==0){
speed-=10;
}
}
die();
}
var begin=setInterval("snack()",speed);
</script>
</body>
</html>
<html>
<head>
<title></title>
<meta name="viewport" charset="utf-8" content="width=device-width,user-scalable=no，initial-scale=1"/>
<style type="text/css">
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, big, em, font, img, strong, tt, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
outline: none;
border: none;
resize: none;
word-break: break-all;
word-wrap: break-word;
}
html, body {
height: 100%;
margin: 0;
}
.body{width: 100%;height: 100%;background-color: #77c68b;}
#canvas{position: absolute;left:50%;margin-left: -400px;background-color: #fff;}
</style>
</head>
<body>
<div class="body">
<canvas id="canvas" width="800" height="800"></canvas>
<label id="grade"></label>
</div>
<script type="text/javascript">
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var gradelabel=document.getElementById("grade");
var rectcoord=[21,22,23],
rectx=0,
recty=0,
rect=[],
rectnum=0,
mark=true,
speed=100,
dir= 2,
movenum= 1,
foodcoord= 0,
grade= 0,
head=0;
//绑定键盘事件
document.addEventListener("keydown",function(e){
var e=e||event;
var currKey=e.keyCode||e.which||e.charCode;
switch(currKey){
case 37:if(dir!=2){dir=4}break;//左
case 38:if(dir!=3){dir=1}break;//上
case 39:if(dir!=4){dir=2}break;//右
case 40:if(dir!=1){dir=3}break;//下
default:break;
}
});
//绘制蛇身
function snack() {
if(mark){
foodcoord=food();
}
context.clearRect(0,0,canvas.width,canvas.height);
canvas.width=canvas.width;
for(var a=0;a<20;a++){
for(var b=0;b<20;b++){
temp="context.beginPath();context.rect("+rectx+","+recty+", 40, 40);context.fillStyle = 'white';context.fill();" +
"context.strokeStyle = 'white';context.stroke();";
rect.push(temp);
rectx<760?rectx+=40:rectx=0;
}
recty<800?recty+=40:recty=0;
}
var c=rectcoord.length;
for(var d=0;d<c;d++){
rect[rectcoord[d]]=rect[rectcoord[d]].replace(/white/g,"green");
}
rect[foodcoord]=rect[foodcoord].replace(/white/g,"orangered");
eval(rect.join(""));
rect=[],rectx=0,recty=0,mark=false;
snackmove();
gradelabel.innerHTML="得分："+grade+"";
}
//绘制食物
function food(){
var ispass=true;
var a= parseInt(Math.random()*400);
for(var b in rectcoord){
if(a==rectcoord[b]){
ispass=false;
break;
}
}
return ispass?a:food();
}
//死亡
function die(){
var a=rectcoord.length;
var diecoord=rectcoord.slice(0,a-1);
for(var b in diecoord){
if(head==diecoord[b]){
clearInterval(begin);
setTimeout(function(){
context.beginPath();
context.clearRect(0,0,canvas.width,canvas.height);
canvas.width=canvas.width;
context.fillStyle = '#ee6a39';
context.font = '50px Calibri';
context.fillText("游戏结束,得分："+grade+"",220,375);
context.lineJoin = 'miter';
context.stroke();
},1500);
break;
}
}
}
//蛇身移动
function snackmove(){
var b= rectcoord.shift();
var a= rectcoord.pop();
rectcoord.push(a);
switch (dir){
case 1:movenum=-20;if(a+movenum<0){movenum=380;}break;
case 2:movenum=1;if(a%20==19){movenum=-19;}break;
case 3:movenum=20;if(a+movenum>399){movenum=-380;}break;
case 4:movenum=-1;if(a%20==0){movenum=19;}break;
}
head=a+movenum;
rectcoord.push(head);
//吃食物
if(head==foodcoord){
rectcoord.unshift(b);
foodcoord=food();
grade++;
if(grade%50==0){
speed-=10;
}
}
die();
}
var begin=setInterval("snack()",speed);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用canvas和原生JS写的一个flappy bird游戏
- 原生js实现的贪吃蛇网页版游戏完整实例
- 利用Canvas+js编写贪吃蛇游戏
- 原生js写的贪吃蛇网页版游戏
- 纯原生js实现贪吃蛇游戏
- 原始js做的贪吃蛇，如何用JavaScript做一个贪吃蛇游戏，贪吃蛇系列——01初级贪吃蛇_键盘的方向键，吃食物，撞墙死亡
- 一个基于HTML5的canvas的js面向对象贪吃蛇
- canvas+js实现贪吃蛇游戏
- 有趣的Javascript：只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图（有演示demo）
- 原生js实现的贪吃蛇网页版游戏完整实例
- 原生js写的贪吃蛇网页版游戏特效
- canvas原生js写的贪吃蛇
- 多组处理, 仅展开一个区块的折叠效果(原生Js和jQ版)
- HTML5 + js 贪吃蛇游戏设计与实现
- Canvas 游戏——贪吃蛇
- 分享自己写的一个贪吃蛇的游戏(Linux)
- 我的js游戏小引擎 —— 可使用canvas模式或DOM模式
- 游戏编程笔记-起步（一）一个简单的游戏-贪吃蛇
- html5 canvas 自制小游戏系列之 【贪吃蛇】。
- 分享一个超酷的开源html5 canvas互动网络图形效果javascript类库 - sigma.js