日期:2014-05-16 浏览次数:20392 次
<!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>