JS小游戏挖宝藏v1.0

来源：互联网发布：手机制作价格表软件编辑：程序博客网时间：2024/05/06 16:56

游戏设计：
点击方格，会显示当前位置距离宝藏的步数。依照步数推测宝藏的位置，挖到宝藏为胜利。宝物不会在第一下挖的时候出现。

页面设计：
在页面的左侧显示待挖宝的地面，右侧显示信息。

程序设计：
1、生成100个地块（选择100的原因是这样比较便于计数）。2、写检测鼠标点击的函数，并进行距离判断。如果没有挖到宝，累加挖宝步数；如果挖到了宝，提示挖到了宝并用return语句中断函数执行

页面效果：

程序源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">.inner {width:30px;height:30px;margin:5px;float:left;display:inline;font-size:20px;line-height:30px;text-align:center;font-weight:bold;color:red;}#outside {width:420px;height:420px;margin:0 auto;padding:5px;float:left;}#instruction{float:left; width:300px; height:420px;padding:5px;}#whole{width:800px; margin:0 auto;background:#ccc;}#outside,#instruction,.inner{border:1px solid black;}#outside,#instruction{margin:5px;}.clearFix:after{clear:both;display:block;visibility:hidden;height:0;content:"";}.clearFix{zoom:1;}</style><script type="text/javascript">var t=0;var gold = -1;var find = 0;window.onload = function(){var cell = createCell();//创建宝地for(var i=0;i<100;i++){cell[i].onclick = function(){checkClick(this);//检测点击}}}function checkClick(cell){if(find==1){return;}t++;var cid = parseInt(cell.id.substr(1));//获取id的数字部分if(t==1){do{gold = Math.floor(Math.random()*100);}while(gold==cid)}var count = Math.abs(Math.floor(gold/10)-Math.floor(cid/10))+Math.abs(gold%10-cid%10);if(count==0){var txt = document.createTextNode("宝");cell.appendChild(txt);find=1;var findtxt = document.createTextNode("找到宝藏，点击重挖");var restart = document.getElementById("restart");restart.appendChild(findtxt);return;}var txt = document.createTextNode(count);//创建文本对象if(cell.childNodes[0]) //查找该点是否已经被点击过，如果被点击过，先删除之前显示的文字再添加新的文字{cell.removeChild(cell.childNodes[0]);}cell.appendChild(txt);//添加文本对象var showStep = document.getElementById("showStep");if(showStep.childNodes[0]){showStep.removeChild(showStep.childNodes[0]);}var step = document.createTextNode("你已经挖了"+t+"次");showStep.appendChild(step);}function createCell()//创建宝地{var cell = new Array();//var cell = document.createElement("div");var box = document.getElementById("outside");//获得外面的divfor(var i=0;i<100;i++)//依次添加宝地并设置id{cell[i]=document.createElement("div");cell[i].className = "inner";cell[i].id = "c"+i;box.appendChild(cell[i]);}return cell;}</script></head><body><div id="whole" class="clearFix"><div id="outside"></div><div id="instruction"><p>点击方格，会显示当前位置距离宝藏的步数。依照步数推测宝藏的位置，挖到宝藏为胜利</p><p>当前挖宝情况</p><p id="showStep"></p><p><a href=# id="restart" onclick="window.location.reload();"></a></p></div></div></body></html>

JS小游戏 挖宝藏v1.0

JS小游戏挖宝藏v1.0