<!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。
当点到白块后，通过弹框的形式告知用户游戏结束和所得分数、所用时间等。
点到白块后，白块和黑块都不能再点击了，不过您可以选择重新开始游戏
时间： 2024-11-06 09:51:27