我写的Javascript贪食蛇v1

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

先上图：

在线试玩：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); }

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>

我写的Javascript贪食蛇v1相关推荐

在微信小游戏中开发一个贪食蛇
为什么80%的码农都做不了架构师?>>> 我自己也写过一个贪食蛇的小游戏,不过是对dom的操作,微信小游戏是采用js语法基于canvas的开发.为了省事在网上直接搜了一个基于c ...
网页版贪食蛇【基于HTML+CSS+JavaScript】实现
最终效果 HTML代码 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
js 贪食蛇-双蛇抢食
最近在看javascript权威指南,真是写的好啊,在没看html5之前先写个小游戏练练手,看完全部以后策划一个html5游戏,这个游戏断断续续写了大概一周时间,采用面向对象的方式开发的,完成以后还是 ...
[原]Console小技巧——Console版贪食蛇
这一篇是我的Console小技巧的最后一篇文章,以下是索引: 1.[原]Console小技巧--七彩输出 2.[原]Console小技巧--字符涂鸦 3.[原]Console小技巧--Console版 ...
java小程序贪吃蛇代码_微信小程序Demo之贪食蛇
原标题:微信小程序Demo之贪食蛇差不多大半年前,笔者发布了一篇关于OC版贪食蛇开发的文章,时隔多月,微信小程序横空出世,于是闲来无事的我又写了一个小程序版. 01页面布局关于小程序笔者就不做介绍 ...
Android 贪食蛇
初级贪食蛇文章目录初级贪食蛇效果展示: 界面设计算法设计游戏面板类蛇身类蛇类方向类主函数类效果展示: 界面设计游戏界面的设计布局我们采用"相对布局中嵌套线性布局&quo ...
使用C++设计贪食蛇小游戏
说明:所有代码均可在Visual Studio 2013上编译执行.并未测试在其它编译器上编译情况. 游戏规则贪食蛇游戏要求玩家控制方向键(或WSAD键)来控制小蛇的前进方向,以使蛇吃掉面板上随即位 ...
typescript学习记录-练习项目-贪食蛇
参考文章:https://www.bilibili.com/video/BV1Xy4y1v7S2?p=22 项目搭建将之前的package.json,tsconfig.json,webpack.co ...
as 贪食蛇小游戏（一）
刚想学as制作游戏,所以打算先写个贪食蛇小游戏练习下.. 说明:使用的开发工具为 flash builder4.6 首先创建一个as项目. 然后我们先来添加一个config as类将游戏的所有设置都存 ...

我写的Javascript贪食蛇v1

我写的Javascript贪食蛇v1相关推荐

最新文章

热门文章