用JS写贪吃蛇游戏的问题

JavaScript019

用JS写贪吃蛇游戏的问题,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<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

}