<!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>60</span>秒</h5> <div class="wrap"> <div class="container" id="container"> </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 timer=null; var timer2=null; var step=60; //清除定时器 var date=60; function clear(){ window.clearTimeout(timer); timer=0; window.clearTimeout(timer2); timer2=0; } //获取随机数 function getRandom(n,m){ n=Number(n); m=Number(m); if(isNaN(n)||isNaN(m)){ return Math.random(); } if(n>m){ var t=n; n=m; m=t; } return Math.round(Math.random()*(m-n)+n); } //给container添加内容 var str=""; var ary=["black","white"]; str+='<table>'; for(var i=0;i<200;i++){ str+='<tr>'+'<td class="'+ary[getRandom(0,1)]+'"></td>'+'<td class="'+ary[getRandom(0,1)]+'"></td>'+'<td class="'+ary[getRandom(0,1)]+'"></td>'+'<td class="'+ary[getRandom(0,1)]+'"></td>'+'<td class="'+ary[getRandom(0,1)]+'"></td>'+'</tr>'; /*if($("td").hasClass("black")){ $(this).siblings().attr("class","white"); console.log(1); }*/ } str+='</table>'; $(".container").html(str); if($("td").hasClass("black")){ $(this).siblings().attr("class","white"); console.log(1); } var noticeHTML=$(".container").html(); //选择等级 $(".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()<=0){ 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"); $(this).addClass("clicked"); }else{ layer.open({ type: 1, area: ['200px', '160px'], //shadeClose: true, //点击遮罩关闭 content: '<div style="padding:20px;text-align:center;">请选择游戏级别！！！</div>' }); } }); //重新开始 $(".restart").on("click",function(){ window.location.reload(); }); //暂停游戏 $(".stop").on("click",function(){ clear(); $(".start").html("继续游戏"); $(".start").css("display","block"); }); var score=0; //点击黑块，分数加1 function black(){ score+=1; $(this).unbind("click"); } //点击白块，游戏结束 function white(){ if($(".start").hasClass("clicked")){//开始游戏后才会有弹出框 layer.open({ type: 1, area: ['200px', '200px'], //shadeClose: true, //点击遮罩关闭 content: '<div style="padding:20px;">' + '<p>game over!</p>' +'<p style="margin-top:20px;">您的总用时'+(60-$("h5 span").html())+'秒'+'</p>'+'<p style="margin-top:20px;">您的得分是'+score+'分'+'</p>'+'</div>' }); $(".stop").css("display","none"); clear(); } } $(".black").one("click",black); $(".container").one("click",".white",white);
本人前端菜鸟一个，闲来无事写了一个别踩白块的游戏练习代码编写能力，望大家多多指教。
布局我采用的是动态添加一段内容，并随机分配给元素黑色或白色的class名称。然后重复内容，通过无缝滚动效果循环播放。
开始游戏之前需选择游戏等级，共分为三级（初级、中级、高级），游戏过程中您可进行暂停游戏、继续游戏、重新开始等操作。
游戏最长时间为60秒。超过60秒游戏自动结束。
每点击一个黑块，分数加1，每个黑块只能点击一次，也就是同一个黑块不管点击几次，分数值只加1。
当点到白块后，通过弹框的形式告知用户游戏结束和所得分数、所用时间等。
点到白块后，白块和黑块都不能再点击了，不过您可以选择重新开始游戏