用HTML+jQuery实现别踩白块儿网页版

先玩一下吧

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>别踩白块</title>
<style>
body {
    margin: 0;
    padding: 0;
    font-size: 12px;
    /*点击效果,搭配active使用*/
    -Webkit-tap-highlight-color: rgba(0,0,0,0);
    /*禁用长按事件*/
    –Webkit-touch-callout: none;
    /*禁用选中事件*/
    -webkit-user-select: none; 
}
#main-screen {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 100%;
}
.row {
    width: 100%;
    height: calc(25% - 1px);
    border-bottom: 1px solid #666;
    overflow: hidden;
}
.gray {
    background: #333;
}
.col {
    width: calc(25% - 1px);
    height: 100%;
    float:left;
    border-right: 1px solid #666;
}
.row .col:last-child {
    border-right: 1px solid transparent !important;
}
.need-to-click {
    background: #000;
}
.yellow {
    background: #FF0;
}
#end-page {
    width: 100%;
    height: 100%;
    background: #693;
    text-align: center;
    font: bold 72px "Microsoft yahei";
    line-height: 100%;
    position: relative;
    color: #fff;
}
#time-show {
    position: fixed;
    width: 200px;
    height: 80px;
    top: 0;
    left: 50%;
    margin-left: -100px;
    z-index: 999;
    color: red;
    font-weight: bold;
    line-height: 80px;
    text-align: center;
    font-size: 48px;
    text-shadow: 2px 2px 3px #000;
}
#block-box {
    width: 100%;
    height: 100%;
}
.red-font {
    width: 320px;
    height: 100px;
    font-size: 64px;
    color: red;
    position: absolute;
    margin: -200px 0 0 -160px;
    line-height: 100px;
    text-align: center;
    top: 50%;
    left: 50%;
}
.white-font {
    width: 320px;
    height: 100px;
    font-size: 64px;
    color: #fff;
    position: absolute;
    margin: 20px 0 0 -160px;
    line-height: 100px;
    top: 50%;
    text-align: center;
    display: none;
    left: 50%;
    cursor:pointer;
}
#game-over {
    background: rgb(0, 147, 255);
    width: 100%;
    height: 100%;
    position: fixed;
    font: bold 72px "Microsoft yahei";
    z-index: 9999;
    top: 0;
    left: 0;
    display: none;
}
</style>
<!-- <script src="jquery.js"></script> 引用CDN JS就不用这个了-->
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
</head>

<body>
    <div id="main-screen">
        <div id="time-show"><span>0.00</span>s</div>
        <div id="end-page">
            <div id="end-time" class="red-font"></div>
            <div id="retry" class="white-font">重来</div>
        </div>
        <div id="game-over">
            <div class="red-font" style="color: #fff;">挑战失败</div>
            <div id="retry" class="white-font">重来</div>
        </div>
        <div id="block-box">
           
        </div>
    </div>
</body>
<script>
$(function(){
    var screenW = $(window).width();
    var screenH = $(window).height();
    //设置起点
    var startIdx = 0;
    //结束点
    var endIdx = 30;
    //创建盒子
    createBlock(endIdx);
    //耗时计算
    var startTime = 0;
    var timeInterval = null;
    //设置屏幕高度
    $("#main-screen").height(screenH);
    //滚动条置底
    $("#main-screen").scrollTop($("#main-screen")[0].scrollHeight);
    //点击算法
    $(".col").each(function(idx){
        $(this).click(function(){
            if ($(this).attr('id')=='block-'+(startIdx+1)) {
                //开始计时
                if (startIdx == 0) {
                    timeInterval = setInterval(function(){
                        startTime+=0.01;
                        $("#time-show span").html(startTime.toFixed(2));
                    }, 10);
                }
                //滑动效果
                $("#main-screen").stop(true,true).animate({scrollTop:($("#main-screen").scrollTop()-$(window).height()/4)},300);
                $(this).css("background", "#333");
                startIdx++;
                //游戏结束
                if (startIdx == endIdx) {
                    clearInterval(timeInterval);
                    $("#main-screen").stop(true,true).animate({scrollTop:($("#main-screen").scrollTop()-$(window).height()/4)},300);
                    $("#time-show").hide();
                    $("#end-time").html(startTime.toFixed(2)+'s');
                    $("div[id=retry]").fadeIn().click(function(){
                        window.location.reload();
                    });
                }
            } else {
                clearInterval(timeInterval);
                $("div[id=retry]").fadeIn().click(function(){
                    window.location.reload();
                });
                $("#game-over").fadeIn();
                //window.location.reload();
            }
        });
    });
    //重置窗口
    window.onresize = function(){
        $("#main-screen").height($(window).height());
    }
});
function createBlock(num) {
    var blockHtml = '';
    var randomNum = 0;
    for(i=0; i<num; i++) {
        blockHtml += '<div class="row">';
        randomNum = getRandomNum(1,4);
        for(j=1; j<=4; j++) {
            if (j==randomNum) {
                blockHtml+='<div id="block-'+(num-i)+'"  class="col need-to-click"></div>';
            } else {
                blockHtml+='<div class="col"></div>';
            }
        }
        blockHtml += '</div>'
    }
    blockHtml += '<div class="row">';
    blockHtml += '            <div class="col yellow"></div>';
    blockHtml += '            <div class="col yellow"></div>';
    blockHtml += '            <div class="col yellow"></div>';
    blockHtml += '            <div class="col yellow"></div>';
    blockHtml += '        </div>';
    $("#block-box").html(blockHtml);
}
function getRandomNum(_min, _max)
{   
    var range = _max - _min;   
    var rand = Math.random();   
    return(_min + Math.round(rand * range));   
}
</script>
</html>
标签：游戏, jQuery, HTML
先玩一下吧

你的评论
