<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>无标题文档</title>
<style>
table{ width:auto height:12px}
table tr{ border-right: 1px solid #808080 float:left}
table td{border: 1px solid #808080 border-right:none float:leftwidth: 10pxheight: 10pxfont-size: 0line-height: 0overflow: hidden margin:0px padding:0px}
.hs{ background:#000}
.hs{ background:#ffff}
</style>
</head>
<body>
<script>
function a()
{
for (i=1i<=10i++)
{
document.getElementById("d"+i).className="hs"
}
}
var sudu = 1//速度
var tar = 1//当前目标
var flag = true//正反向
var tar_pre//上一个
var tar_next//下一个
function a1(){
var tarTd = document.getElementById("d"+tar).className="hs"
if(flag){
tar_pre = tar -1//用于灭掉前面的背景,当然如果是上下移动就不是减1了,你可以再研究
tar_next = tar+1//试探下一个是否有
if(document.getElementById("d"+tar_next)!=null){
tar+=1//这里加1也是只针对于横向
}else{
flag = false
tar-=1
}
}else{
tar_pre = tar +1
tar_next = tar-1//试探下一个是否有
if(document.getElementById("d"+tar_next)!=null){
tar-=1//这里加1也是只针对于横向
}else{
flag = true
tar+=1
}
}
if(document.getElementById("d"+tar_pre)!=null){
document.getElementById("d"+tar_pre).className="hs1"
}
setTimeout("a1()",1000)
}
</script>
<table border="0">
<tr>
<td width="10" height="10" id="d1"> </td>
<td width="10" height="10" id="d2"> </td>
<td width="10" height="10" id="d3"> </td>
<td width="10" height="10" id="d4"> </td>
<td width="10" height="10" id="d5"> </td>
<td width="10" height="10" id="d6"> </td>
<td width="10" height="10" id="d7"> </td>
<td width="10" height="10" id="d8"> </td>
<td width="10" height="10" id="d9"> </td>
<td width="10" height="10" id="d10"> </td>
</tr>
</table>
<input name="" type="button" value="开始" onclick="a1()" />
</body>
</html>
我没写过贪吃蛇,不过可以一起学习,这是我的一个思路,望交流,qqqun21.77/7/12
我突然觉得更好的办法是用二维数组
吃掉一个后 clearIntervar(变量) 然后再重新定义一个 setInterval(function(){}, 250)var speed = 500
var go = function(){
//蛇运动的方法
if(吃到一个){
clearIntervar(_intervar )
_intervar = setsetInterval(go,speed*0.9)
}
}
var _intervar = setsetInterval(go,speed)
我原来用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 37
up arrow 38
right arrow 39
down arrow 40
//keyboard event listener
function attachEvents(e) {
e = e || event
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode : directkey
return false
}