九宫格-踩地雷

96 阅读 0 评论 64 点赞

我是靠谱客的博主聪明小懒虫，最近开发中收集的这篇文章主要介绍九宫格-踩地雷，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、正常显示九宫格图片的内容
2、随机把雷埋入到不同图片下，一个图片只能一个雷
3、点击图片，如果正常，显示红旗，如果是雷游戏结束

<html>
<head><title>踩地雷</title>
<style type="text/css">
#content{width:646px;height:646px;margin:0px auto;}
#content div{
width:202px;height:202px;float:left;margin:5px;cursor:pointer;
background-repeat: no-repeat;
}
</style>
<script>
var count = 1;
//加载图片
function LoadImgs()
{
//声明数组，并把随机生成的值放入数组中
var arr = new Array(count);
for (var i = 1; i <= count; i++) {
arr[i] = RandomNum(8);
}
var arr =new Array(1);
arr[1] = RandomNum(8);
//遍历把九张图片显示出来
for (var i = 1; i <= 9; i++) {
var obj = document.getElementById("d" + i);
obj.style.backgroundImage = "url(images/" + i + ".jpg)";
//判断是否有雷
obj.setAttribute("flag", arr[1] == i ? "dl" : "hq");
//点击事件
obj.onclick = function () {
var flag = this.getAttribute("flag");//找到属性
this.style.backgroundImage = "url(images/" + flag + ".jpg)";
if (flag == "dl") {
alert("游戏结束!");
LoadImgs();
}
}
}
Math.random
}
//生成随机数
function RandomNum(n) {
return Math.floor(Math.random() * n)+1;
}
</script>
</head>
<body οnlοad="LoadImgs()">
<div id="content">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<div id="d9"></div>
</div>
</body>
</html>