怎么用javascript写一个贪吃蛇
日期：2014-05-16 浏览次数：20376 次
如何用javascript写一个贪吃蛇
2.用js画出格子
4.方向键按下动作事件监听：
我原来用C语言，借助curses库实现了linux 终端下的贪吃蛇游戏。
这个javascript版本的贪吃蛇是http://www.veryhuo.com/game/tanchishe.html 的学习笔记，实现的原理和C版本基本一样。
--------------------
1.怎样表示一条snake
用一个二维数组存snake的各个点(x,y)，同时标记这些点(x,y)为“cover”，这是用于以后检查snake的头是否撞到了snake的body。
//initialize snake
function initSnake() {
var pointer = randomPointer(len-1, len-1, WIDTH/2);
for(var i = 0; i < len; i++) {
var x = pointer[0] - i,
y = pointer[1];
snake.push([x,y]);
carrier[x][y] = "cover"; //标记snake body
}
}2.用js画出格子
用document.createElent()方法创建出table->tr->td, 然后用document.appendChild()方法追加到id为“snakewrap”的元素上：
//initialize grid
function initGrid() {
var body = document.getElementsByTagName("body")[0];
var table = document.createElement("table"),
tbody = document.createElement("tbody")
for(var j = 0; j < HEIGHT; j++) {
var col = document.createElement("tr");
for(var i = 0; i < WIDTH; i++) {
var row = document.createElement("td");
gridElems[i][j] = col.appendChild(row);
}
tbody.appendChild(col);
}
table.appendChild(tbody);
document.getElementById("snakewrap").appendChild(table);
}
3.生成食物的随机坐标
function randomPointer(startX,startY,endX,endY) {
startX = startX || 0;
startY = startY || 0;
endX = endX || WIDTH;
endY = endY || HEIGHT;
var p = [],
x = Math.floor(Math.random()*(endX - startX)) + startX,
y = Math.floor(Math.random()*(endY - startY)) + startY;
//如果(x,y)有物体，则重新生成坐标
if(carrier[x][y]) {
return randomPointer(startX,startY,endX,endY);
}
p[0] = x;
p[1] = y;
return p;
}
添加新的食物：
//addObject("food")
function addObject(name) {
var p = randomPointer(); //get random position
var x = p[0];
var y = p[1];
carrier[x][y] = name;
gridElems[x][y].className = name;
}4.方向键按下动作事件监听：
允许左上右下这4个按键来改变snake的运动方向，注意，如果方向相反的话，不生效。
对于键盘上的每一个按键，都有一个key cord,我的这篇博客记录了javascript的key cord,可看到：
| left arrow |
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
