去年在微信上刚出来的时候做着玩的，当时有点小BUG 现在项目不忙把BUG修改了一下（主要是css的问题不过现在也没有解决的100%完美 ps:原本想把代码 http://codepen.io/ 代码展示一得，后来不会整这个图片所以就放弃了 ）
上图
上代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="apple-touch-fullscreen" content="yes" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta content="no" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<style>
*{margin:0;padding: 0;}
a{ text-decoration: none;}
html,body{ height: 100%;}
.game{ width: 100%;height:100%; background-color:#f06060; }
.start{ height: 100%; position:relative;}
.tit{ font-size: 2em; color: #fff; font-weight: bold; text-align:center; padding-top: 3em;}
.title{ line-height: 1.3em; color: #ff9e9e; font-size: 1.3em; text-align:center; margin: 0.5em;}
.btn_main{ width: 100%; position: absolute; bottom: 10%;}
.btn{ display: block; width: 40%; margin:0 auto;line-height:1.8em; font-size: 1.8em; text-align:center; background-color: #fbad25; border-radius: 10px; color:#fff;}
.game_main{ position: absolute; top: 20%;border: 10px solid red; background-color: #ddd; border-radius: 10px;text-align:center;width:100%; box-sizing: border-box;}
.imInfo{text-align:center; width:100%;}
.game_main .game_img{margin:0 auto;}
.game_info{ padding-top:5%; position: relative;}
.game_gk{ color: #ff9d9f; font-size:1.2em; text-indent:5%;}
.game_time{ position: absolute;left:50%;margin-left: -10px; width: 20px; text-align: center; display: inline-block; padding: 0 15px; border-radius: 13px; font-size: 1.2em; font-weight: bold; color: #fecbca; height: 30px; line-height: 30px; background: #fd9191;}
.end{height: 100%; position:relative; background-color: #a74343;}
.end p{ color: #332212; text-align:center; font-weight: bold; font-size: 2em; position:absolute; top:30%; width:100%; }
.end .btn_main{ bottom:40%;}
</style>
<title>寻找房祖名</title>
</head>
<body>
<div class="game" id="game" >
<div class="start" id="start" >
<h2 class="tit">全民摇一摇寻找房祖名</h2>
<p class="title">虽然柯少向龙叔保证不会带坏房祖名，但龙叔强烈要求你找回房祖名。</p>
<div class="btn_main">
<a href="javascript:;" class="btn" id="btn">开始游戏</a>
</div>
</div>
<div class="rel" id="gameWrap" style=" display: none;">
<div class="game_info">
<span class="game_gk">过关：<span id="game_jf"></span></span>
<span class="game_time" id="gameTime"></span>
</div>
<div class="game_main clearfix" id="gameMain" >
<!-- <img src="img/kzd.gif" class="game_img" width="50%" height="50%">
<img src="img/kzd.gif" class="game_img" width="50%" height="50%">
<img src="img/kzd.gif" class="game_img" width="50%" height="50%">
<img src="img/kzd.gif" class="game_img" width="50%" height="50%">
-->
</div>
</div>
</div>
<div class="end" id="end" style=" display: none;">
<p>龙叔的路人粉lv<span id="endJf"></span></p>
<div class="btn_main">
<a href="javascript:;" class="btn" id="aGain">再来一次</a>
</div>
</div>
</body>
<script src="js/jquery-2.0.2.js"></script>
<script>
$(function(){
$(‘#btn‘).on(‘click‘,function(){
$(‘#start‘).hide();
Game.init();
});
var Game = {
gkNum : 0,
timer : 60,
btn : 0 ,
round : 0,
endTime : null,
arr : [1,2,3,4,5,6,7,8,9,‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘],
init : function(){
this.game = $(‘#game‘);
this.oParent = $(‘#gameWrap‘);
this.oParent.show();
this.oJf = $(‘#game_jf‘); // 积分;
this.gameMain = $(‘#gameMain‘);
this.shijian = $(‘#gameTime‘);
this.end = $(‘#end‘);
this.endJf = $(‘#endJf‘);
this.aGain = $(‘#aGain‘);
this.createEnemy(this.gkNum); // 关卡初始值;
this.createTime(); //倒计时
this.clickEnemy();
this.againGame();
},
createTime : function(){
var This = this;
This.shijian.html(This.timer);
this.endTime = setInterval(function( ){
var t = This.timer--;
if( t < 0 ){
clearInterval( This.endTime );
This.game.hide();
This.endJf.html( parseInt(This.gkNum)+1);
This.end.show();
}else{
This.shijian.html( t );
}
},1000);
},
createEnemy : function( num ){
var html = ‘‘;
this.round = fnRound( ((num+2)*(num+2)) );
this.oJf.html( parseInt(num)+1 );
var wh = 100/(num+2);
for( var i=0,len = ((num+2)*(num+2));i<len;i++ ){
if( this.round == i ){
html += ‘<img src="img/fzm.gif" class="game_img imgFzm">‘;
}else{
html += ‘<img src="img/kzd.gif" class="game_img" >‘;
}
}
if( num > 1 ){
this.sortBg();
}
this.gameMain.html(html);
this.gameMain.find(‘img‘).css({‘width‘:wh+‘%‘,‘height‘:wh+‘%‘});
},
clickEnemy : function(){
var This = this;
this.gameMain.delegate(‘img.imgFzm‘,‘click‘,function(){
This.btn++;
This.sortBg();
This.createEnemy( This.gkNum );
if( This.btn == 3 ){
This.btn = 0;
This.gkNum++;
This.createEnemy( This.gkNum );
}
});
},
sortBg : function(){
this.arr.sort(function(){return Math.random()-0.5;});
this.arr.length=6;
this.gameMain.css(‘border‘,"10px solid #"+this.arr.join(‘‘)+"");
},
againGame : function(){
this.aGain.on(‘click‘,function(){
window.location.reload();
return false;
});
}
}
});
//随机数
function fnRound( n ){
return Math.round(Math.random()*(n-1));
}
</script>
</html>
心得：
去年写的代码，具体细节有点忘了，宏观上梳理一下流程：
单体写的静态方法
几个关键的变量：
关卡 ：不同的关卡不同的 图片的数量：第一关开始是 2行2列就是4，第二关是3行3列就是9，第三关是4行4列就是16 其实就是 2的平方 3的平方 4的平方 累加平方；
时间：限时的一分钟；
点击次数：每关都要找对三次才能到下一关，记录点击正确的次数；
正确的图片位置:随机出 房祖名 的位置；
剩下就是一些封装一些 创建 图片的方法，点击方法，随机数方法等。。。。
我主要的BUG 问题 其实是 图片的宽度
因为像第5关 100/6 的话 其实是有余数 导致右侧没有沾满，最后我是用 text-align: center 解决的不过感觉还是不太好，如有大神有别的解决办法请告知。。。。
时间： 2024-08-28 11:49:14