您的位置：首页 > Web前端 > JavaScript

JS小游戏 挖宝藏v1.0

2013-02-17 17:02 295 查看
游戏设计：

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

页面设计：

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

程序设计：

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");//获得外面的div
for(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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航