JavaScript 遊戲 : 貪吃蛇- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 遊戲 : 貪吃蛇

Javascript: 滚动条代码生成器; NiftyCube：轻松实现圆角边框; 懒就要懒到底：鼠标自动点击（含时间判断）; 简单form标准化实例：语义结构; 超清晰的document对象详解; 用正则获取指定路径文件的名称; 整理的比较不错的JavaScript的方法和技巧; 求得div 下 img的src地址的js代码; js+css实现的仿office2003界面; 一个不错的应用,用于提交获取文章内容，不推荐用; 插件：检测javascript的内存泄漏; 得到文本框选中的文字，动态插入文字的js代码; 翻译整理的jQuery使用查询手册; 一个的简易文本编辑器源码; HTML中不支持静态Expando的元素的问题; 用CSS打造多彩文字链接; 一个不错的用JavaScript实现的UBB编码函数; js实现的非常棒的绿色下拉透明菜单; 优秀js开源框架-jQuery使用手册(1); 学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例

No. « ‹ 193 194 195 196 › »

技术文章搜索

关键字

Javascript 中的 JavaScript 遊戲 : 貪吃蛇

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 199 ::

收藏到网摘: n/a

JavaScript 寫遊戲 : 搬吖 JavaScript 寫時鍾日曆

好像是最快的速度了。。。

說一說原理：
是利用DOM的。
<span>一條蛇，由蛇頭到蛇尾</span>
這樣想到了什麼？蛇尾就是這個span的第一個元素，蛇頭就是最後一個元素啦。當然，調換前後也一樣可以的。

然後建一個二維數組，當是地圖的 x,y 坐標。
然後，每節蛇也有它的 x,y 坐標，分別和上面的二維數組關連起來。
這樣就會得到蛇每一節的位置了，看看有沒有超出數組上限或下限，GameOver。
不過我這裏為了體驗一下速度，沒這個GameOver條件，只有蛇頭和蛇身相撞時就GameOver。

最後就是關件的啦。
蛇要不停地移動，那麼，不停地在上面那個 span 裏添加 <div>我是蛇頭</div> 蛇頭的left top 值要和剛創建的地圖對應啊。
然後在上面那個span 裏刪除那個 <div>我是蛇尾</div> 的元素

再把 span 裏第二個元素設為：我是蛇身。這樣，原本是蛇頭的第二個元素就變成蛇身了。
再把 span 裏最後一個元素設為：我是蛇尾。這樣，原本是蛇身的它，就變成蛇尾了。

完 ^-^

<!--
http://dwin.net
http://dewin.tk

Start 2002-10-12 11:12
Finish 2002-10-16 07:43
-->

<body>

var Rows = 20;
var Cells = 30;

var MapW = 20;
var MapH = 20;

var BorderW = 5;
var oSpeed = 1
var Scores = 0;

var SnakeHeakColor = 'blue';
var SnakeBodyColor = 'orange';
var SnakeTailColor = 'yellow';

function CreatMainMap(){
MainMap = [];
for(var y=0;y<Rows;y++){
MainMap[y] = [];
for(var x=0;x<Cells;x++){
MainMap[y][x] = '';
}
}
}

function CreateFood(){
var x = parseInt(Math.random()*Cells);
var y = parseInt(Math.random()*Rows);
if(MainMap[y][x] == ''){
Score.innerHTML = Scores++;
Base.insertAdjacentHTML("beforeEnd","<div style='position:absolute;left:"+x*MapW+";top:"+y*MapH+";width:"+MapW+";height:"+MapH+";background:red;'>");
MainMap[y][x] = 'F';
}
else CreateFood();
}

function CreateSnake(){
Base.insertAdjacentHTML("beforeEnd","<span x="+SnakeX+" y="+SnakeY+" style='position:absolute;left:"+SnakeX*MapW+";top:"+SnakeY*MapH+";width:"+MapW+";height:"+MapH+";background:"+SnakeHeakColor+";'></span>");
MainMap[SnakeY][SnakeX] = 'S';
}

var GoX = 0;
var GoY = 0;
var GoTime = 0;

function Dir(x,y){
GoX = (-GoX==x)?GoX:x;
GoY = (-GoY==y)?GoY:y;
if(!GoTime) GoTime = setInterval(Move,oSpeed);
}

function document.onkeydown(){
switch(event.keyCode){
case 34:clearInterval(GoTime);oSpeed+=3;GoTime=setInterval(Move,oSpeed);break;//speed up
case 33:if(oSpeed-2>0){clearInterval(GoTime);oSpeed-=2;GoTime=setInterval(Move,oSpeed)};break;//speed down
case 192:alert(oSpeed);break;//speed down
case 37:Dir(-1,0);break;//left
case 38:Dir(0,-1);break;//up
case 39:Dir(1,0);break;//right
case 40:Dir(0,1);break;//down
case 83:clearInterval(GoTime);GoTime=0;break;
}
}

function window.onload(){
var MainMapWidth = 2*BorderW+Cells*MapW;
var MainMapHeight = 2*BorderW+Rows*MapH;
document.body.innerHTML += "<span id='Base' style='position:absolute;left:"+(document.body.clientWidth-MainMapWidth)/2+";top:"+(document.body.clientHeight-MainMapHeight)/2+";width:"+MainMapWidth+";height:"+MainMapHeight+";border:"+BorderW+" inset #0000CC;'></span><br><br><span id='Score'></span><br><br><font color=red>Page Down to Speed down<br>Page Up to Speed up</font>";
SnakeX = parseInt(Math.random()*Cells);
SnakeY = parseInt(Math.random()*Rows);
AllSnakes = Base.all.tags('SPAN');
AllFoods = Base.all.tags('DIV');
window.focus();
CreatMainMap();
CreateSnake();
CreateFood();
}

</script>

JavaScript 寫遊戲 : 搬吖 JavaScript 寫時鍾日曆

Javascript 中的 JavaScript 遊戲 : 貪吃蛇

评论 (0) All