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

ゞ浴缸里的玫瑰 2022-05-19 00:24 98阅读 0赞

<!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>