标签：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/game.css"/> </head> <body> <div class="grade clearfix"> <div class="grade1">初级</div> <div class="grade2">中级</div> <div class="grade3">高级</div> </div> <div class="btn"> <div class="start">开始游戏</div> <div class="restart">重新开始</div> <div class="stop">暂停游戏</div> </div> <h5 class="tc" style="padding:16px 0;">您的总用时：<span>0</span>秒</h5> <div class="wrap"> <div class="container" id="container"> <ul class="clearfix"> <li class="black"></li> <li class="white"></li> <li class="black"></li> <li class="white"></li> <li class="black"></li> </ul> <ul class="clearfix"> <li class="white"></li> <li class="white"></li> <li class="black"></li> <li class="white"></li> <li class="white"></li> </ul> <ul class="clearfix"> <li class="black"></li> <li class="white"></li> <li class="white"></li> <li class="black"></li> <li class="white"></li> </ul> <ul class="clearfix"> <li class="white"></li> <li class="black"></li> <li class="white"></li> <li class="white"></li> <li class="white"></li> </ul> <ul class="clearfix"> <li class="black"></li> <li class="black"></li> <li class="white"></li> <li class="white"></li> <li class="black"></li> </ul> <ul class="clearfix"> <li class="black"></li> <li class="white"></li> <li class="white"></li> <li class="white"></li> <li class="black"></li> </ul> <ul class="clearfix"> <li class="white"></li> <li class="black"></li> <li class="white"></li> <li class="white"></li> <li class="white"></li> </ul> <ul class="clearfix"> <li class="black"></li> <li class="white"></li> <li class="white"></li> <li class="white"></li> <li class="black"></li> </ul> </div> </div> </body> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/layer.js"></script> <script src="js/game.js"></script> <script> </script> </html>
/*公共样式--开始*/ body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin: 0; padding: 0; } * { box-sizing: border-box; } table { border-collapse: collapse; } body { font-family: "Microsoft YaHei"; } ul, li { list-style: none; } a { text-decoration: none; color: #232323; } img { vertical-align: middle; border: none; } .tc { text-align: center } .tl { text-align: left } .tr { text-align: right } .fl { float: left; } .fr { float: right; } .clearfix { zoom: 1; } .clearfix:after { content: "."; width: 0; height: 0; visibility: hidden; display: block; clear: both; } /*公共样式--结束*/ .black{background-color:#000;} .white{background-color:#fff;} .wrap{width:502px;height:500px;margin:20px auto;border:1px solid #ccc;overflow:hidden} .container{width:502px;height:500px;overflow:hidden} li,td{float:left;width:100px;height:100px;border:1px solid #ddd;cursor:pointer;} .li_first{border-left:none;} .li_last{border-right:none} h5{font-size:14px;} h5 span{color:red;font-size:16px;} .start,.stop,.restart{margin-top:10px;float:left;margin-left:20px;width:100px;height:30px;line-height:30px;text-align:center;color:#fff;border-radius:5px;cursor:pointer;} .start,.restart{background-color:green;} .restart{display:none;} .stop{display:none;background-color:red;} .grade{margin:10px;} .grade div{float:left;width:100px;height:30px;line-height:30px;border:1px solid #ccc;text-align:center;margin-left:10px;cursor:pointer;}
var noticeHTML=$(".container").html(); var timer=null; var timer2=null; var step=0; //清除定时器 var date=60; function clear(){ window.clearTimeout(timer); timer=0; window.clearTimeout(timer2); timer2=0; } $(".grade div").on("click",function(){ $(this).siblings().hide(); $(this).addClass("clicked"); $(this).siblings().removeClass("clicked"); }); $(".grade1").on("click",function(){ date=60; }); $(".grade2").on("click",function(){ date=30; }); $(".grade3").on("click",function(){ date=6; }); function move(){ var val1=$(".container").scrollTop(); $(".container").scrollTop(val1+1); var val2=$(".container").scrollTop(); if(val1===val2){ $(".container").html($(".container").html()+noticeHTML); $(".black").one("click",black); } timer=window.setTimeout(move,date); } function move1(){ step+=1; $("h5 span").html(step); timer2=window.setTimeout(move1,1000); if($("h5 span").html()>=60){ clear(); white(); } } $(".start").on("click",function(){ if($(".grade div").hasClass("clicked")){ move(); move1(); $(this).css("display","none"); $(".restart").css("display","block"); $(".stop").css("display","block"); }else{ alert("请选择游戏级别") } }); $(".restart").on("click",function(){ window.location.reload(); }); $(".stop").on("click",function(){ clear(); $(".start").html("继续游戏"); $(".start").css("display","block"); }); var score=0; function black(){ score+=1; $(this).unbind("click"); } function white(){ layer.open({ type: 1, area: [‘200px‘, ‘200px‘], content: ‘\<\div style="padding:20px;">‘ + ‘<p>game over!</p>‘ +‘<p style="margin-top:20px;">您的总用时‘+$("h5 span").html()+‘秒‘+‘</p>‘+‘<p style="margin-top:20px;">您的得分是‘+score+‘分‘+‘</p>‘+‘\<\/div>‘ }); clear(); } $(".black").one("click",black); $(".container").one("click",".white",white);
本人前端菜鸟一个，闲来无事写了一个别踩白块的游戏练习代码编写能力，望大家多多指教。
布局我采用的是比较简单的，重复某段内容，然后通过无缝滚动效果循环播放。也可以采用动态添加的形式，再滚动的过程中，向容器内添加内容，并随机分配给元素黑色或白色的class名称。
开始游戏之前需选择游戏等级，共分为三级（初级、中级、高级），游戏过程中您可进行暂停游戏、继续游戏、重新开始等操作。
游戏最长时间为60秒。超过60秒游戏自动结束。
每点击一个黑块，分数加1，每个黑块只能点击一次，也就是同一个黑块不管点击几次，分数值只加1。
当点到白块后，通过弹框的形式告知用户游戏结束和所得分数、所用时间等。
点到白块后，白块和黑块都不能再点击了，不过您可以选择重新开始游戏
标签：
原文地址：http://www.cnblogs.com/dongxiaolei/p/5692450.html
