当前位置: 代码迷 >> JavaScript >> 贪吃蛇,创建地图、蛇、食物后怎么设计代码啊
  详细解决方案

贪吃蛇,创建地图、蛇、食物后怎么设计代码啊

热度:396   发布时间:2012-04-19 14:36:43.0
贪吃蛇,创建地图、蛇、食物后如何设计代码啊?
HTML code
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>贪吃蛇</title>
<style>

#mydiv{
    border:0px solid blue;
    width:520px;
    margin:50px;
}
table{
    margin:10px;
    border-collapse: collapse;
    border-spacing:0;
    }
td{width:10px;height:10px;border:1px solid black;}

</style>

<script type="text/javascript" language="javascript">

//行和列
var rows=20;
var cols=20;

//蛇的随机坐标
var snake_x=parseInt(Math.random()*rows);
var snake_y=parseInt(Math.random()*cols);

//食物的随机坐标
var food_x=parseInt(Math.random()*rows);
var food_y=parseInt(Math.random()*cols);

//创建地图
function map()
{
    var mydiv = document.getElementById("mydiv");// 获取div
    var mytable = document.createElement("table");// 创建<table>元素

    for(var j = 0; j < rows; j++)
    {
        var row = document.createElement("tr");
        for(var i = 0; i < cols; i++)
        {
            var cell = document.createElement("td");
            row.appendChild(cell);
        }
        mytable.appendChild(row);
    }
    mydiv.appendChild(mytable);
    food();
    snake();
}

//创建食物
function food()
{    
    
    //忽略节点间的空文本
    x=document.getElementById('mydiv').childNodes;
    for(i=0;i<x.length;i++)
    {
        if(x[i].nodeType==1)
            var getNode=x[i];
    }
        
    //得到列的集合
    food_cells=getNode.rows[food_x-1].cells;
    //显示食物颜色
    food_cells[food_y-1].style.background="blue";
}

//创建蛇
function snake()
{

    //忽略节点间的空文本
        x=document.getElementById('mydiv').childNodes;
        for(i=0;i<x.length;i++)
        {
            if(x[i].nodeType==1)
                var getNode=x[i];
        }
            
        //得到列的集合
        food_cells=getNode.rows[snake_x-1].cells;
        //显示蛇的颜色
        food_cells[snake_y-1].style.background="red";
        
}

</script>

</head>
<body onload="map()">
<div id="mydiv">

</div>
</body>
</html>




接下来要让贪吃蛇在它随机出现的地方开始移动怎么设计啊

------解决方案--------------------
精华帖里面 贪吃蛇不少的...
  相关解决方案