贪吃蛇小游戏(Html版)

Html / 
<!DOCTYPE html>
<html>
<head>
<title>Snake</title>
</head>
<body style="text-align:center;margih:100px;background-color:#aaaaaa">
<canvas id="canv" width="400" height="400" style="background-color:gray">
</canvas>
<script>
//声明变量
var box=document.getElementById('canv').getContext('2d');
var snake;
var direction;//1向右，-1向左，20向下，-20向上
var n;//下次移动相关
var food;
var istrue;
//绘制地图
function draw(point,color){
box.fillStyle=color;
box.fillRect(point%20*20+1,~~(point/20)*20+1,18,18);
}

(function() {ready() ; } () );

function ready(){
for(var i=0;i<400;i++){
draw(i,"#313131");}
snake=[66,65,64];
direction=1;
food=344;
istrue=true;
draw(food,"yellow");
draw(66,"#00b7ee");
draw(65,"#00b7ee");
draw(64,"#00b7ee");
}

//核心算法
function run(){
istrue=true;
document.getElementById("butn").setAttribute("disabled",true);
snake.unshift(n=snake[0]+direction);
if(snake.indexOf(n,1)>0||n<0||n>399||(direction==-1&&n%20==19)||(direction==1&&n%20==0)){
ready();
document.getElementById("butn").removeAttribute("disabled");
return alert("游戏结束");}
draw(n,"#00b7ee");
if(n==food)
{
while(snake.indexOf(food=~~(Math.random()*400))>0){continue;};
draw(food,"yellow");
}
else{
draw(snake.pop(),"#313131");
}
setTimeout(arguments.callee,200);//每过200ms执行一次事件
}

//添加键盘事件
document.onkeydown=function(e){
if(istrue){
if(direction==1||direction==-1){
if(e.keyCode==38)
{direction=-20;istrue=false;}
if(e.keyCode==40)
{direction=20;istrue=false;}}
if(direction==20||direction==-20){
if(e.keyCode==39)
{direction=1;istrue=false;}
if(e.keyCode==37)
{direction=-1;istrue=false;}
}}}

</script>
<div>
<button id="butn" type="button" onclick="run()">开始游戏</button>
</div>
</body>
</html>

 

阅读: 47,571

4,133人评论了“贪吃蛇小游戏(Html版)”

  1. fleck 5600 timer

    We’re a gaggle of volunteers and starting a brand new scheme in our community.

    Your website provided us with valuable information to work on. You’ve done a formidable
    process and our entire community will be grateful to you.

    回复
  33. sloth hiking team t shirt

    I have been browsing online more than 3 hours as of late, but I by
    no means found any interesting article like yours. It is pretty worth enough for me.
    Personally, if all website owners and bloggers made excellent content as
    you did, the web will likely be a lot more helpful
    than ever before.

    回复
  137. Royal CBD

    Excellent pieces. Keep writing such kind of information on your blog.
    Im really impressed by your site.
    Hello there, You have done a great job. I’ll certainly
    digg it and in my opinion recommend to my friends.
    I’m confident they will be benefited from this website.

    回复
  170. Terrysoync

    no sign up sex cams [url=https://sexcams00.live]sex cams reviews [/url] real life cams fric and julia sex.
    paid sex cams [url=https://sexcams00.website]sexcams00[/url] live sex cams from home.
    naked sex cams [url=https://sexcams00.work]voyeur sex cams [/url] secret office sex cum cams.
    sex cams tumblr [url=https://sexcams00.site]sexcams00[/url] real sex cams united states.
    teen live sex cams [url=https://sexcams00.space]sexcams00[/url] live adult sex cams.
    free girl sex cams [url=https://sexcams00.club]sex cams for free [/url] black girl sex cams.
    sex cams videos [url=https://sexcams00.online]sexcams00[/url] crazy hidden sex cams.
    real free live sex cams [url=https://sexcams00.xyz]home milf amateurs sex cams [/url] 2 way sex cams.

    回复
  484. Carlben

    [url=https://ataraxrx.com/]atarax without prescription[/url] [url=https://ciprorx.com/]where can i buy cipro online[/url] [url=https://albenzamed.com/]generic albenza[/url] [url=https://zoloftsert.com/]zoloft 50 mg[/url] [url=https://amoxicillin05.com/]best amoxicillin brand[/url]

    回复