-
var add = 0; if(lv < 20){ add = 15 * Math.max(9 - col, 1); } else if(lv < 40){ add = 10; } else if(lv < 50){ add = 8; } else{ add = 5; } var colors = getColors(add); var target = Math.floor(Math.random() * (col * col)); var spans = box.find("span"); spans.css("background-color", colors[0]); spans.eq(target).css("background-color", colors[1]).data("isTarget", true); box.off(clickEvent, "span").on(clickEvent, "span", function(e){ e.stopPropagation(); if($(this).data("isTarget")){ generateBox(level++); } }); } function getColors(add){ var max = 255 - 10 - add; var r = Math.floor(Math.random() * max); var g = Math.floor(Math.random() * max); var b = Math.floor(Math.random() * max); var colors = []; colors[0] = "rgb(" + r + "," + g + "," + b + ")"; colors[1] = "rgb(" + (r + 10 + add) + "," + (g + 10 + add) + "," + (b + 10 + add) + ")"; return colors; } }); </script>查看全部
-
function handleTime(){ if(!isPaused){ var t = +time.text() - 1; time.text(t); if(t < 6){ time.addClass("danger"); } if(t <= 0){ box.off(clickEvent, "span"); setTimeout(function(){ room.fadeOut(1000, function(){ var lv = level; var index = lv < 20 ? 0 : Math.floor((lv - 20) / 10) + 1; var desc = descArr[index] ? descArr[index] : lastDesc; gameover.find("h1").text(desc + "lv" + lv); gameover.show(); gameover.find(".restartBtn").off(clickEvent).on(clickEvent, startGame); }); }, 1000); return; } countId = setTimeout(arguments.callee, 1000); } } function generateBox(){ var lv = level; var col = lvArr[lv] ? lvArr[lv] : lastLv;//每个方向的格子数 score.text(lv); box.html(""); for(var i = 0, len = col * col; i < len; i++){ box.removeClass().addClass("lv" + col).append("<span></span>"); }查看全部
-
setTimeout(function(){ loading.hide(); index.show(); $("#start").off(clickEvent).on(clickEvent, startGame); }, 1000); function startGame(){ if(countId){ clearTimeout(countId); } isPaused = false; index.hide(); pause.hide(); gameover.hide(); box.html(""); time.text(seconds); level = 0; score.text(0); room.show(); generateBox(); countId = setTimeout(handleTime, 1000); pauseBtn.off(clickEvent).on(clickEvent, function(){ isPaused = true; room.hide(); pause.show(); pause.find(".restartBtn").off(clickEvent).on(clickEvent, startGame); pause.find(".resumeBtn").off(clickEvent).on(clickEvent, resumeGame); }); } function resumeGame(){ if(countId){ clearTimeout(countId); } isPaused = false; pause.hide(); room.show(); countId = setTimeout(handleTime, 1000); }查看全部
-
</div> </div> </div> <script type="text/javascript"> $(function(){ var loading = $("#loading"); loading.show(); var index = $("#index"); var room = $("#room"); var box = $("#box"); var score = $(".score em"); var time = $(".time"); var gameover = $("#gameover"); var pause = $("#pause"); var pauseBtn = room.find(".pauseBtn"); var descArr = ["瞎子", "色盲", "色郎", "色狼", "色鬼", "色魔", "超级色魔", "变态色魔", "孤独求色"]; var lastDesc = descArr[descArr.length - 1]; var lvArr = [2, 3, 4, 5, 5, 6, 6, 7, 7, 7, 8, 8, 8, 8, 8, 8, 9]; var lastLv = lvArr[lvArr.length - 1]; var level = 0; var isPaused = false; var seconds = 60; var countId; var ua = window.navigator.userAgent.toLowerCase(); var clickEvent = /android|iphone|ipad|ipod/i.test(ua) ? "touchstart" : "click"; var width = Math.min(window.innerHeight, window.innerWidth) - 20; width = Math.min(width, 500) + "px"; box.css({width: width, height: width});查看全部
-
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div> <div id="loading" class="page hide"> <div class="loadingText">加载中...</div> </div> <div id="index" class="page hide"> <h1>看你有多色</h1> <div class="desc">找出所有色块里颜色不同的一个</div> <div class="btns"> <button id="start" class="btn startBtn">开始</button> </div> </div> <div id="room" class="page hide"> <header> <span class="score">得分：<em>0</em></span> <span class="time">60</span> <button class="btn pauseBtn">暂停</button> </header> <div id="box" > </div> </div> <div id="gameover" class="page wait hide"> <div class="wrapper"> <h1></h1> <button class="btn restartBtn">重来</button> </div> </div> <div id="pause" class="page wait hide"> <div class="wrapper"> <h1>游戏暂停</h1> <button class="btn resumeBtn">继续</button> <button class="btn restartBtn">重来</button>查看全部
-
/*游戏结束*/ .wrapper { position: absolute; top: 20%; left: 0; text-align: center; width: 100%; } .wrapper h1 { font-size: 40px; line-height: 60px; color: #321; } #gameover .wrapper .restartBtn { font-size: 24px; color: #fff; width: 160px; height: 50px; line-height: 50px; letter-spacing: 10px; } /*游戏暂停*/ #pause .wrapper .restartBtn, #pause .wrapper .resumeBtn { font-size: 20px; height: 50px; line-height: 50px; color: #fff; width: 100px; letter-spacing: 5px; margin-right: 10px; } @media screen and (max-width:360px) { #box.lv2 span, #box.lv3 span, #box.lv4 span { border-width: 2px; border-radius: 5px; } #box.lv5 span, #box.lv6 span, #box.lv7 span, #box.lv8 span, #box.lv9 span { border-width: 1px; border-radius: 3px; } } </style>查看全部
-
#box span { display: inline-block; border: 5px solid #ddd; border-radius: 10px; background-color: #fff; box-sizing: border-box; cursor: pointer; float: left; } #box.lv2 span { width: 50%; height: 50%; } #box.lv3 span { width: 33.33%; height: 33.33%; } #box.lv4 span { width: 25%; height: 25%; } #box.lv5 span { width: 20%; height: 20%; } #box.lv6 span { width: 16.666%; height: 16.666%; } #box.lv7 span { width: 14.285%; height: 14.285%; } #box.lv8 span { width: 12.5%; height: 12.5%; } #box.lv9 span { width: 11.111%; height: 11.111%; }查看全部
-
/*游戏界面*/ #room header { height: 50px; text-align: center; line-height: 50px; } #room header .time { font-size: 20px; font-weight: 700; color: #FFCACA; background-color: #FD9090; padding: 0 10px; border-radius: 10px; } #room header .time.danger { background-color: #fff; color: #FF0505; } #room header .score { position: absolute; top: 0; left: 10px; font-size: 16px; color: #FFA1A1; } #room header .score em { font-style: normal; } #room header .pauseBtn { position: absolute; top: 5px; right: 10px; height: 40px; line-height: 40px; padding: 0 10px; color: #fff; font-size: 20px; } #box { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; background-color: #ddd; padding: 10px; border-radius: 10px; }查看全部
-
/*开始界面*/ #index h1 { text-align: center; font-size: 30px; padding: 30px 0; text-shadow: 1px 1px 2px #AB3C3C; } #index .desc { font-size: 16px; color: #FFA1A1; text-align: center; } #index .btns { position: absolute; width: 100%; top: 60%; text-align: center; } .btn { background-color: #FCAD26; display: inline-block; border: none; outline: none; font-weight: 700; box-shadow: 0 5px #DA9622; border-radius: 8px; cursor: pointer; font-family: '微软雅黑'; tansition: transform .2, box-shadow .2; } .btn:active { transform: translateY(5px); box-shadow: none; } #index .btns .startBtn { font-size: 24px; color: #ddd; width: 160px; height: 50px; line-height: 50px; letter-spacing: 10px; }查看全部
-
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>看你有多色</title> <style type="text/css"> body { background-color: #F06060; color: #fff; font: 12px/1.5 "微软雅黑"; } /*清除浮动*/ .clearfix:after, .clearfix:before { display: table; content: ""; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /*公共*/ .page { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .hide { display: none; } .wait { background-color: #A74343; } /*loading页面*/ .loadingText { text-align: center; font-size: 30px; position: absolute; transform: translate(-50%, -50%); top:50%; left:50%; }查看全部
-
游戏的制作，under查看全部
-
视频怎么都不能看啊。？查看全部
-
很好的课查看全部
-
游戏流程逻辑查看全部
-
为什么要有App框架查看全部
举报
0/150
提交
取消