首页手记 JaveScript 之寻找徐峥

JaveScript 之寻找徐峥

标签：

Html/CSS JavaScript CSS3

学习时写了个小游戏 --- 寻找徐峥,模仿的是网页小游戏---寻找房祖名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 600px;
                height: 650px;
                border: 1px solid black;
                margin:0 auto;
                position: relative;
            }
            #time{
                width: 110px;
                height: 50px;
                font-size: 20px;
                text-align: center;
                line-height: 50px;
                float: left;
            }
            #score{
                width: 110px;
                height: 50px;
                font-size: 20px;
                line-height: 50px;
                text-align: center;
                float: right;
            }
            #content{
                width: 600px;
                height: 600px;
                clear: both;
                /*border: 1px solid red;*/
                /*弹性布局*/
                display: flex;
                /*允许换行*/
                flex-wrap: wrap;
            }
            #content>img{
                /*设置弹性子元素在主轴方向的占比*/
                /*flex-basis: 100%;*/
                width: 100%;
                height: 100%;
            }
            #menuGame{
                width: 600px;
                height: 650px;
                background: rgba(0,0,0,0.2);
                position: absolute;
                left: 0;
                top: 0;
            }
            #start{
                width: 200px;
                height: 60px;
                border-radius: 10px;
                background: red;
                color: white;
                font-size: 30px;
                line-height: 60px;
                text-align: center;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -100px;
                margin-top: -30px;
                /*鼠标移入样式*/
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <!--剩余时间,分数-->
            <div id="time"> 剩余时间:20</div>
            <div id="score"> 分数:0</div>
            <!--显示包贝尔和徐峥的内容部分-->
            <div id="content">
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/1.jpg" alt="" />
            </div>
            <!--开始游戏部分-->
            <div id="menuGame">
                <!--开始游戏按钮-->
                <p id="start">开始游戏</p>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        //开始游戏按钮
        var startBtn = document.getElementById('start');
        //开始游戏的菜单
        var menuGameDiv = document.getElementById('menuGame')
        //剩余时间
        var timeDiv = document.getElementById('time');
        //分数
        var scoreDiv = document.getElementById('score');
        //contentDiv
        var contentDiv = document.getElementById('content');
        var timer;
        //点击开始游戏
        startBtn.onclick = function () {
            //隐藏菜单
            menuGameDiv.style.display = 'none';
            var time = 20;//设置总的剩余时间
            timer = setInterval(function () {
                time--;
                timeDiv.innerHTML = '剩余时间:' + time;
                if (time == 0) {
                    alert('亲,你的分数为:' + (scores - 1) + '分!')
                    //清除定时器
                    clearInterval(timer);
                    //游戏结束
                    menuGameDiv.style.display = 'block';
                    startBtn.innerHTML = '重新开始';
                    //分数重置
                    scoreDiv.innerHTML = '分数:0';
                    //置空
                    contentDiv.innerHTML = '';
                    //创建 img 节点
                    var img = document.createElement('img');
                    img.src = 'img/1.jpg';
                    contentDiv.appendChild(img);
                    scores = 1//每次重新开始,重置
                    //给徐峥图片添加点击事件
                    img.onclick  = function () {
                        addScoreAndCreateImage()
                    }
                    contentDiv.appendChild(img)
                }
            },1000)
        }
        //让第一个已经存在的徐峥可以点击  新方式
        contentDiv.firstElementChild.onclick = addScoreAndCreateImage;
        var scores = 1;//记录分数
        //创建图片,增加分数
        function addScoreAndCreateImage () {
            //清空之前所有的 img 节点
            var allImgs = contentDiv.children;
            for (var i = 0;i < allImgs.length;i++) {
                //删除节点 第一种方式
                //contentDiv.removeChild(allImgs[i]);
                //i--;
                //第二种方式
                contentDiv.removeChild(contentDiv.firstElementChild);
                i--;
            }
            //分数
            scoreDiv.innerHTML = '分数:' + scores;
            scores++;
            //Math.pow(a,b) 求 a 的 b 次方,并返回结果
            //count 记录图片的张数
            //scores 的2次方
            var count = Math.pow(scores,2);
            //创建图片节点
            for (var j = 0;j <count;j++) {
                var img = document.createElement('img')

                img.src = 'img/2.jpg';
                //设置图片百分比
//              img.style.flexBasis = (100/scores) + '%';
                img.style.width = (100/scores) + '%';
                img.style.height = (100/scores) + '%';
                contentDiv.appendChild(img)
            }
            //设置徐峥 随机出来一个徐峥的位置[0,count - 1]
            var ranNum = Math.floor(Math.random() * (count - 1 - 0 +1) + 0);
            //找到位置下标对应的 img 节点,将包贝尔替换成徐峥
            var imgTem = contentDiv.children[ranNum];
            imgTem.src = 'img/1.jpg';
            imgTem.onclick = function () {
                addScoreAndCreateImage()
            }
        }   
    </script>
</html>

1.jpg 是徐峥,2.jpg 是包贝尔