JavaScript DOM动画应用---找不同,寻找房祖名游戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            #wrap{
            width: 400px;
            height: 600px;
            border: 1px solid;
            margin: 0 auto;
            position: relative;
            padding: 20px;
            background: lightgray;
        }
        #time{
            position: absolute;
            left: 20px;
        }
        #score{
            position: absolute;
            right: 20px;
        }
        #start{
            width: 50px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            background-color: #D4BED5;
            color: white;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 80px;
            text-align: center;
        }
        #main{
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            /*display: flex;*/
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="time">倒计时:60.0s</div>
        <div id="score">分数:0</div>
        <div id="start">开始</div>
        <div id="main">
            <img src="../img/1.png" alt="">
        </div>
    </div>
</body>
<script>
    var scoreNum = 0 ;  //记录得分变量
    var count = 2; //表示当前关卡数
    //倒计时函数
    function timeFn(){
        var n = 9 ;
        var timer  = setInterval(function(){
            time.innerHTML = "剩余时间"+n+"s";
            n--;
            if (n < 0) {
                clearInterval(timer);
                start.style.display = "block";
                // 分数重置
                scoreNum = 0;
                // 关卡重置
                count = 2;
                // 重置游戏界面
                createImg(1);
            }
            console.log(timer);
        },1000);
    }

    // 得分函数
    function scoreFn(){
        scoreNum++;
        score.innerHTML = "得分:"+scoreNum;
    }

    // 开始按钮
    start.onclick = function(){
        // 隐藏开始按钮
        this.style.display = "none";
        // 将一张大图换成四张小图
        // 先清空main
        main.innerHTML = "";
        createImg(count);
        // 开启计时器
        timeFn();
        // 游戏得分显示重置
        score.innerHTML = "得分:"+scoreNum;


    }
    // 创建图片的函数
    // 参数index表示当前是第几关,要创建index的平方个图片
    function createImg(index){
        // 创建之前先清空
        main.innerHTML = "";
        // 计算每张图片的宽高
        var  w = 380/index;
        var color = randomColor();
        // 随机得到房祖名本次图片的位置
        var num = Math.pow(index,2);
        var numFang = randomNum(0,num);
        // 创建图片
        for(var i=0;i<num;i++){
            var img = document.createElement("img");
            img.style.width = w + "px";
            // 判断房祖名
            if (i == numFang) {
                img.src = "../img/2.png";
                img.onclick = function(){
                    // 加分
                    scoreFn();
                    // 进入下一关
                    count++;
                    // 将关卡设置为九关
                    if (count > 9) {
                        count = 9;
                    }
                    createImg(count);

                }
            }else{
                img.src = "../img/1.png";
            }
            img.style.background = color;
            main.appendChild(img);
        }
    }
    // 随机背景色
    function randomColor(){
        return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"
    }
    // 随机下标房祖名照片
    function randomNum(min,max){
        return Math.floor(Math.random()*(max-min)+min);
    }
</script>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值