DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 網頁特效代碼 >> jQuery制作的掃雷游戲
jQuery制作的掃雷游戲
編輯:網頁特效代碼     
《掃雷》是一款大眾類的益智小游戲,於1992年發行。
游戲目標是在最短的時間內根據點擊格子出現的數字找出所有非雷格子,同時避免踩雷。

在線試玩

鼠標左鍵標記非雷格子,右鍵標記地雷。如果左鍵點到地雷游戲失敗。

這是何問起掃雷成功的一個例子:


HTML文檔代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery掃雷游戲源碼下載 - 何問起</title>
<base target="_blank" />
<link rel="stylesheet" type="text/css" media="screen" href="http://hovertree.com/texiao/game/7/css/styles.css" />

</head>
<body>
<div class="wrapper">
<h1>掃雷 Minesweeper</h1>
<div id="minesweeper">
<ul class="level-select">
<li><button data-level="easy">Easy</button></li>
<li><button data-level="mid">Medium</button></li>
<li><button data-level="hard">Hard</button></li>
</ul>
<div class="menu">
<ul>
<li class="timer">000</li>
<li class="reset"><button> :) </button></li>
<li class="mine-count">010</li>
</ul>
</div>
<div id="mine-grid"></div>
</div>
</div>
<script src="http://down.hovertree.com/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/game/7/js/JSweeper.js"></script>

<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用浏覽器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏覽器。</p>
<p>來源:<a href="http://hovertree.com/">何問起</a> <a href="http://hovertree.com/menu/texiao/">網頁特效</a>
<a href="http://hovertree.com/h/bjaf/xbw6ou63.htm">代碼說明</a></p>
</div>
</body>
</html>


推薦:http://hovertree.com/texiao/game/

http://hovertree.com/texiao/html5/33/

http://hovertree.com/game/10/

http://hovertree.com/game/
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved