我写的Javascript贪食蛇v1

最新推荐文章于 2021-05-31 09:52:00 发布

cuixiping

最新推荐文章于 2021-05-31 09:52:00 发布

阅读量2.8k

点赞数 2

分类专栏： Original Works JavaScript Games 文章标签： javascript function 游戏 div html border

本文链接：https://blog.csdn.net/cuixiping/article/details/4425159

版权

Original Works 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

JavaScript Games

12 篇文章 0 订阅

订阅专栏

贪食蛇，也叫贪吃蛇，对于Javascript游戏来说，属于入门级的。

先上图：

贪食蛇v1截图

在线试玩：v1.0 v2.0(小花蛇)

题外话，先介绍一下贪食蛇。

维基百科中文上关于贪食蛇的词条是这么说的：

“贪食蛇”是一个产生于1970年代中后期的计算机游戏，也叫贪吃蛇。该游戏在1990年代由于一些手机将其引入而一时间再度流行起来。在游戏中，玩家操控一条细长的蛇爬行于一个带边界的平面之上，一路拾起触碰到之事物或其它类似的物件，并要避免触碰到自身或者包围着游戏区的“墙”。每次贪食蛇吃掉一件食物，它的身体便增长一些，这让游戏的难度渐渐变大。操控贪食蛇时，玩家操控贪食蛇的头部的朝向（向上、向下、向左或向右）控制贪食蛇的进行方向，贪食蛇的身体将跟随着其头部行进。另外，玩家不可在游戏中途停止贪食蛇的进行。但于移植到手提电话时，为了手机的本义——通讯——而妥协成可以暂停游戏。

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>snake (by cuixiping)</title>

<style type="text/css">
body { overflow:hidden; text-align:center; background-color:lavender; }
div#main { position:relative; overflow:hidden; margin:10px auto; border: 1px solid green; width:400px; height:400px; }
div#main div { position:absolute; font-size:0; background-color:green; width:10px; height:10px; }
div#main div#head { background-color:red; }
div#main div#food { background-color:green; }
</style>
</head>
<body>
<div>贪食蛇 v1(cuixiping, 2009-8-7)</div>
<div id="main"><div id="head"></div><div id="food" style='visibility:hidden;'></div></div>
<div>←↑→↓控制，长按加速，<Enter>暂停/继续。</div>
<script type="text/javascript">
var w=40, h=40, n=10, m=200;
var S={},X=[],B=[],L=[],T=[],dirs=[-1,-w,1,w],dir=2,ifood=-5,pause,f,timer,D=document;
function rnd(){return Math.floor(Math.random()*w*h)}
function newd(i){var div=main.appendChild(D.createElement("div"));p(div,i);return div;}
function p(o,i){o.style.left=L[i]+'px';o.style.top=T[i]+'px';}
function m(o,dir){p(o,i);}
function $(id){ return D.getElementById(id); }
function cli(){ clearInterval(tmr); }
function sei(m){ tmr=setInterval(Main,m); }

function Main(){
if(pause)return;
var ox=X[0],x=ox%w,y=(ox-x)/h,eat,die;
X[0]+=dirs[dir];
if(x==0&&dir==0||x==w-1&&dir==2||y==0&&dir==1||y==h-1&&dir==3)die='撞墙死掉啦！';
else if(S[X[0]])die='咬到自己死掉啦！';
if(die){
cli();
alert(die+'/n/n共吃到毒蘑菇【'+(B.length-1)+'】个');
restart();
return;
}
if(ifood==X[0]){
eat=true;
food.style.visibility='hidden';
ifood=-5;
B.unshift(newd(ox));
}else if(ifood==-1){
while(S[ifood=rnd()]);
food.style.visibility='visible';
p(food,ifood);
}else if(ifood<-1){ifood++}
p(head,X[0]);
X.unshift(X[0]);
X[1]=ox;
S[X[0]]=true;
if(!eat){delete S[X.pop()];B.unshift(B.pop());p(B[0],ox);}
}
D.οnkeydοwn=function(evt){
var c=(evt||window.event).keyCode-37;
if(c==-24)pause=!pause;
else if(c>=0&&c<4){
if(dir==c){if(!f){f=true;cli();sei(m/2)}}
else if(dir%2!=c%2)dir=c;
}
}
D.οnkeyup=function(evt){
var c=(evt||window.event).keyCode-37;
if(dir==c&&f){f=false;cli();sei(m)}
}

for(var i=w*h-1;i>=0;i--){L[i]=i%w*n, T[i]=(i-i%w)*n/h}
var main=$("main"), head=$("head"), food=$("food");
function restart(){
S={},X=[],B=[],dir=2,ifood=-5,pause=f=false;
while(main.childNodes.length>2)main.removeChild(main.lastChild);
food.style.visibility='hidden';
X[1]=w*h/2;
X[0]=X[1]+1;
p(head,X[0]);
B[0]=newd(X[1]);
S[X[0]]=S[X[1]]=true;
sei(m);
}
restart();
</script>
</body>
</html>

cuixiping

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
我写的Javascript贪食蛇v1

贪食蛇，也叫贪吃蛇，对于Javascript游戏来说，属于入门级的。先上图：在线试玩：v1.0 v2.0(小花蛇)题外话，先介绍一下贪食蛇。维基百科中文上关于贪食蛇的词条是这么说的：“贪食蛇”是一个产生于1970年代中后期的计算机游戏，也叫贪吃蛇。该游戏在1990年代由于一些手机将其引入而一时间再度流行起来。在游戏中，玩家操控一条细长的蛇爬行于一
复制链接

扫一扫