首先引入jquery.js
1.css
html, body, .contain { width: 100%; height: 96%; overflow: hidden; background-color: #FFFFCC; } .text-center { text-align: center; } .score { font-size: 25px; color: #CB2D01; margin-top: 20px; margin-bottom: 20px; } .score lable{ padding: 0 20px; } .main { position: relative; text-align: center; width: 100%; height: 80%;/*/454px*/ margin: auto; border: 1px solid #A0A0A0; overflow: hidden; } .main-each{ position: initial; width: 100%; height: 20%; } .item{ width: 33%; height: 100%; border:1px solid #C6C6C6; border-top: 0; border-left: 0; float: left; } .item-bor{ border-right: 0; } .back-black{ background-color: #333333; } .operation { margin-top: 20px; font-size: 18px; text-align: center; } button { position: relative; z-index: 999; padding: 6px 10px; font-size: 20px; border-radius: 4px; color: white; } #start, #reset { background-color: #5CB85C; border: 1px solid #4cae4c; z-index: 1; } #reset:hover, #start:hover { background-color: #449d44; border-color: #398439; } #stop, #return { color: #fff; background-color: #f0ad4e; border: 1px solid #eea236; } #return:hover, #stop:hover { background-color: #ec971f; border-color: #d58512; } #cover, .result { position: fixed; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .2); } .resultBox { position: fixed; z-index: 2; top: 30%; left: 25%; width: 50%; height: 400px; text-align: center; background-color: #EEE8D8; } .over { width: 80%; height: 200px; background-color: #606060; margin: auto; top: 10%; position: relative; color: white; text-align: center; } .over div{ padding-top: 10%; } .cover-p{ margin: 10px; } .result .operation { width: 100%; text-align: center; position: absolute; bottom: 20px; } .hidden { display: none; } .show { display: block; }
2.js
$(function() { init(); }); function init() { // 初始生成5*3的div $.each([0, 1, 2, 3, 4], function() { insertDiv(); }); } function insertDiv() { var rand = Math.floor(Math.random() * 3); // 生成一个0到3 的随机数，用来作为判断生成黑块的位置 $(".main").prepend("<div></div>"); $.each([0, 1, 2], function(k, v) { if(k == "2") { if(v == rand) { $(".main .main-each").first().append("<div tag='back-black'></div>"); } else { $(".main .main-each").first().append("<div></div>"); } } else { if(v == rand) { $(".main .main-each").first().append("<div tag='back-black'></div>"); } else { $(".main .main-each").first().append("<div></div>"); } } }) } $(function() { //开始 var c = 0; var t; //计算时间 function timedCount() { $(".totalTime").text(formatTime(c)); c = c + 1; t = setTimeout(function() { timedCount() }, 1000); } //时间换算 function formatTime(seconds) { var min = Math.floor(seconds / 60), second = seconds % 60, hour, newMin, time; if(min > 60) { hour = Math.floor(min / 60); newMin = min % 60; } if(second < 10) { second = '0' + second; } if(min < 10) { min = '0' + min; } return time = hour ? (hour + ':' + newMin + ':' + second) : (min + ':' + second); } //开始 $("#start").click(function() { $("#cover").fadeOut(); timedCount(); clickThing(); }); //暂停 $("#stop").click(function() { $("#cover").fadeIn(); clearTimeout(t); }); //移动 var x = 0; var y = 0; function clickThing() { $(".main").on('click', '.item', function() { x = x + 1; if($(this).attr("tag") == "back-black") { y = y + 1; //滑动效果 $(".main .main-each").animate({ top: 90, speed:500 }); insertDiv(); $(this).css("background", "#FFFFCC"); //游戏结束 if(x == "9999") { clearTimeout(t); $(".result").fadeIn(); } } else { clearTimeout(t); $(".result").fadeIn(); } $(".totalPoints").text(y); }); }; //重新开始 $("#reset").click(function() { $("#cover").fadeOut(); c = 0; y = 0; $(".totalPoints").text(y); timedCount(); $(".result").fadeOut(); init(); }); });
3.html
<div> <!--score--> <div> <lable>score:<span>0</span> </lable> <lable>time:<span>00:00</span></lable> </div> <!--main--> <div> <!--生成格子--> </div> <!--operation--> <div> <button type="button">开始</button> <button type="button">暂停</button> </div> <!--result--> <div> <div> <div> <div> <p><span>GAME OVER</span></p> <p>总分：<span></span></p> <p>用时：<span></span></p> </div> </div> <div> <button type="button">重来</button> </div> </div> </div> <div></div> </div>
效果：
完整示例代码：