用HTML和jquery写一个简单的扫雷小游戏
程序员文章站
2022-04-24 12:39:24
...
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扫雷3.0</title>
<script src="jquery-1.11.0.js"></script>
<style>
.button{
background-color: crimson;
color: white;
display: inline-block;
font-size: 16px;
width:150px;
height:50px;
}
.square{
width: 41px;
height: 41px;
font-size: 16px;
color: black;
margin-left: 3px;
margin-top: 2px;
}
#mas{
width: 300px;height:30px;
position: absolute;
left: 1030px;
top: 570px;
font-size: 17px;
color: red;
}
</style>
</head>
<body bgcolor="#deb887">
<div style="float: top;
border:2px solid grey ;
width:100%;
height:100px;
margin: 0 auto; ">
</div>
<div id ="panel" style="float: top;
border:2px solid grey ;
width:400px;
height:400px;
margin: 0 auto; background-color: grey">
</div>
<div style="float: top;
border:2px solid grey ;
width:100%;
height:100px;
margin: 0 auto; ">
<input type="button"value="消除/插旗" style="position:relative;
margin-left: 500px;top: 10px" class="button" οnclick="mchange()">
<input type="button"value="重新开始" class="button" style="position:relative;
margin-left: 50px;top: 10px" οnclick="location.reload()">
<input type="text" id="mas" value="模式：消除">
</div>
</body>
<script>
var model=1;
var victory=0;//消除的方块数
var sqnums=new Array();
var sqable=new Array();//判断方块是否可操作
$(function () {
for(var i=0;i<9;i++){
for(var j=0;j<9;j++){
$("#panel").append("<input type='button' id='"+(i*9+j)+"' value=' ' class='square' οnclick='caozuo(this.id)'>")
}
$("#panel").append("</br>")
}
pfresh();
});
function shuffle(arr) {
var i = arr.length, t, j;
while (i) {
j = Math.floor(Math.random() * i--);
t = arr[i];
arr[i] = arr[j];
arr[j] = t;
}
return arr;
}
function pfresh() {
for(var i=0;i<10;i++){
sqnums.push(-1);
sqable.push(1);//可操作
}
for(var i=0;i<71;i++){
sqnums.push(0);
sqable.push(1);//可操作
}
sqnums=shuffle(sqnums);
for(var i=0;i<81;i++){
if(sqnums[i]!=-1) {
if (i - 10 >= 0 && i - 10 <= 81 && sqnums[i - 10] == -1&&i%9!=0) {
sqnums[i] = sqnums[i] + 1;
}
if (i - 9 >= 0 && i - 9 <= 81 && sqnums[i - 9] == -1) {
sqnums[i] = sqnums[i] + 1;
}
if (i - 8 >= 0 && i - 8 <= 81 && sqnums[i - 8] == -1&&i%9!=8) {
sqnums[i] = sqnums[i] + 1;
}
if (i - 1 >= 0 && i - 1 <= 81 && sqnums[i - 1] == -1&&i%9!=0) {
sqnums[i] = sqnums[i] + 1;
}
if (i + 1 >= 0 && i + 1 <= 81 && sqnums[i + 1] == -1&&i%9!=8) {
sqnums[i] = sqnums[i] + 1;
}
if (i + 8 >= 0 && i + 8 <= 81 && sqnums[i + 8] == -1&&i%9!=0) {
sqnums[i] = sqnums[i] + 1;
}
if (i + 9 >= 0 && i + 9 <= 81 && sqnums[i + 9] == -1) {
sqnums[i] = sqnums[i] + 1;
}
if (i + 10 >= 0 && i + 10 <= 81 && sqnums[i + 10] == -1&&i%9!=8) {
sqnums[i] = sqnums[i] + 1;
}
}
//$("#"+i).val(sqnums[i]);
}
}
function caozuo(id) {
if(model==1){
if(sqable[id]==1) {//方块没有点击过,避免死循环
sqable[id] = 0;
victory++;
$("#" + id).css({backgroundColor: "#52A4A1"});
//alert(sqnums[id]);
if (sqnums[id] == 0) {
id = parseInt(id);
if (id - 10 >= 0 && id - 10 <= 81 && id % 9 != 0) {
if (sqnums[id - 10] != -1 && sqable[id - 10] == 1)
caozuo(id - 10);
}
if (id - 9 >= 0 && id - 9 <= 81) {
if (sqnums[id - 9] != -1 && sqable[id - 9] == 1)
caozuo(id - 9);
}
if (id - 8 >= 0 && id - 8 <= 81 && id % 9 != 8) {
if (sqnums[id - 8] != -1 && sqable[id - 8] == 1)
caozuo(id - 8);
}
if (id - 1 >= 0 && id - 1 <= 81 && id % 9 != 0) {
if (sqnums[id - 1] != -1 && sqable[id - 1] == 1)
caozuo(id - 1);
}
if (id + 1 >= 0 && id + 1 <= 81 && id % 9 != 8) {
if (sqnums[id + 1] != -1 && sqable[id + 1] == 1)
caozuo(id + 1);
}
if (id + 8 >= 0 && id + 8 <= 81 && id % 9 != 0) {
if (sqnums[id + 8] != -1 && sqable[id + 8] == 1)
caozuo(id + 8);
}
if (id + 9 >= 0 && id + 9 <= 81) {
if (sqnums[id + 9] != -1 && sqable[id + 9] == 1)
caozuo(id + 9);
}
if (id + 10 >= 0 && id + 10 <= 81 && id % 9 != 8) {
if (sqnums[id + 10] != -1 && sqable[id + 10] == 1)
caozuo(id + 10);
}
} else if (sqnums[id] == -1) {
alert("你输了！");
victory=0;
$(".square").attr('disabled', true);
for (var i = 0; i < 81; i++) {
if (sqnums[i] == 0) {
$("#" + i).css({backgroundColor: "#52A4A1"});
} else if (sqnums[i] == -1) {
$("#" + i).css({backgroundColor: "#52A4A1"});
$("#" + i).val("????");
} else {
$("#" + i).css({backgroundColor: "#52A4A1"});
$("#" + i).val(sqnums[i]);
}
}
} else {
$("#" + id).val(sqnums[id]);
}
}
if(victory==71){
alert("你赢了！");
$(".square").attr('disabled', true);
}
}else {
if (sqable[id] == 1) {
if ($("#" + id).val() ==" ")
{$("#" + id).val("????");}
else
{$("#" + id).val(" ");}
}
}
}
function mchange() {
if(model==1){
model=0;
$("#mas").val("模式：插旗");
}else {
model=1;
$("#mas").val("模式：消除");
}
}
</script>
</html>
使用jquery是为了简化代码，jquery.js可以在这里下：
https://jquery.com/download/
效果如下
上一篇： 40岁程序员学Flink, 模拟事件处理
下一篇： 张温原本可以除掉董卓 最后却被董卓反杀
推荐阅读
-
用html5的canvas和JavaScript创建一个绘图程序的简单实例
-
用python和pygame写一个简单的挡板弹球游戏
-
用Html写一个简单的登陆界面_html/css_WEB-ITnose
-
用C3中的animation和transform写的一个模仿加载的时动画效果_html/css_WEB-ITnose
-
用jquery和bootstrap写一个简单备忘录
-
用jquery和bootstrap写一个简单备忘录
-
用C3中的animation和transform写的一个模仿加载的时动画效果_html/css_WEB-ITnose
-
用HTML和jquery写一个简单的扫雷小游戏
-
用CSS和Vue框架+axios写一个简单的天气查询网页
-
小demo | 用HTML和CSS写一个简单的菜单栏块