山寨 《寻找房祖名》

去年在微信上刚出来的时候做着玩的,当时有点小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 解决的不过感觉还是不太好,如有大神有别的解决办法请告知。。。。

 

你可能感兴趣的:(山寨 《寻找房祖名》)