用HTML写一个扫雷
小游戏
<html>
<head>
<title>扫雷小游戏</title>
<style type="text/css">
#game-board {
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 0 auto;
}
.cell { /* 格子样式 */
float: left;
width: 40px; /* 格子宽度，根据设置的地雷数量可以调整 */ /* 内外边距 */ padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; margin-left:-1.5 px ; color:#555 ; font-size : 15pt ; font-weight : bold ; text -align : center ; background -color:#eee ; border : 1 px solid #ccc ; cursor : pointer ; }
.mine { /* 地雷标识 */ background -image : url( mine.png ) !important;}
.flag { /* 旗帜标识 */ background -image : url( flag.png ) !important;}
</style>
<script type="text/javascript">
// 表示地图中的元素：0表示空，1表示地雷，2表示旗帜, 3表示已打开的方块。 var map = [ [ 0, 0, 0, 0, 0 ],[ 1, 1, 2 ,0 ,0 ],[ 2 ,1 ,3 ,1 ,0 ],[ 3 ,3 ,3 ,2 ,0 ],[ 4 ,4 ,4 3 ，2 ]]; // 初始化地图 function initMap (){ for (var i=0 i<map.length i++){ for (var j=0 j<map[i].length j++){ // 如果是旗帜或者已打开的方块则不画 if ( map [i] [j] == 2 || map [i] [j] == 3) continue var cell = document.createElement ("div"); cell.className = "cell"; // 设定id cell.id = "cell_" + i + "_" + j document.getElementById("game board").appendChild(cell); } } } window onload = initMap(); // 点击事件 function clickCell (){ // 获取当前元素 var currCellId = this id var row colum n= currCellId split(" _"); row=parseInt(row); column=parseInt(column); if (map[row][column]==1){ alert("Game Over!"); return false;} else if (map[row][column]==2){ alert("You Win!"); return false;} else{ this className="open"; map[row][column]=3;} checkWin ();} // 检查是否胜利 function checkWin(){ for (var i=0 i<map length i++) { for (var j=0 j<map length j++) { if(map[i][j]==1 || map[i][j]==2) return false} alert ("You Win!") return true} </script> </head><body><div id="game board"></div></body></html>
创作工场
免责声明：
以上内容除特别注明外均来源于网友提问，创作工场回答，未经许可，严谨转载。
点击这里>>使用🔥专业版，更聪明、更完整、更原创！