数字游戏

最新推荐文章于 2024-08-19 15:50:15 发布

么么☞

最新推荐文章于 2024-08-19 15:50:15 发布

阅读量430

点赞数

分类专栏： js 文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_49258443/article/details/107733855

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

标题根据大字的颜色选择对应的小字，选对加1分

在这里插入图片描述
代码如下：
html和css代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 300px;
            margin: 0 auto;
            position: relative;
            border: 1px solid #f00;
        }
        .time,.score{
            position: absolute;
            top: 2px;
            font-size: 26px;
        }
        .time{
            left: 0;
        }
        .score{
            right: 0;
        }
        .bigText{
            font-size: 150px;
            text-align: center;
            margin-top: 30px;
        }
        .rule{
            font-size: 30px;
            text-align: center;
        }
        .smallText{
            text-align: center;
            font-size: 40px;
            /* margin-top: 20px; */
            cursor: pointer;
            margin: 20px 3px 0px;
        }
    </style>
    <body>
    <div class="wrap">
        <span class='time'>时间：0</span>
        <span class="score">分数：0</span>
        <p class="bigText">哈</p>
        <p class="rule">根据上面字的颜色，从下面选择正确的字</p>
        <div class="smallText">
            <span>哈</span>
            <span>哈</span>
            <span>哈</span>
            <span>哈</span>
            <span>哈</span>
        </div>
    </div>
</body>

javascript代码

<script>
    // 获取元素的方式
    function q(selector){
        return document.querySelector(selector)
    }
    var myTime=q('.time');
    var myScore=q('.score');
    var myBigText=q('.bigText');
    var mySmallText=document.querySelectorAll('.smallText span');

    // 定义颜色和文本
    var colorArr=['red','green','blue','yellow','black'];
    var textArr=['红','绿','蓝','黄','黑'];

    // 定义分数的变量
    var gameScore=0;
    // 游戏的总时间
    var gameTime=null;
    // 定时器
    var games=null;

    randBig()
    // 大字的颜色和文字
    function randBig(){
        myBigText.innerHTML=textArr[rand(0,4)];
        myBigText.style.color=colorArr[rand(0,4)];
    }

    randSmall()
    // 小字的颜色和文字
    function randSmall(){
        // 定义两个空数组，用来存放随机出来的颜色和文字
        var randColorArr=[];
        var randTextArr=[];

        // 随机颜色
        while(randColorArr.length < 5){
            var randSmallColor = colorArr[rand(0,4)];
            if(randColorArr.indexOf(randSmallColor) == -1){
                randColorArr.push(randSmallColor);
            }
        }
        // 文字随机
        while(randTextArr.length < 5){
            var randSmallText=textArr[rand(0,4)]
            if(randTextArr.indexOf(randSmallText) == -1){
                randTextArr.push(randSmallText);
            }
        }

        // 把随机到的颜色和文字赋值给小字
        for(var i = 0; i<mySmallText.length;i++){
            mySmallText[i].style.color = randColorArr[i];
            mySmallText[i].innerHTML = randTextArr[i];
            // 给小字添加点击事件
            mySmallText[i].onclick=function(){
                // 判断对错  大字的颜色 == 小字的文本/内容
                var newBigColor = myBigText.style.color;
                var newSmallText = this.innerHTML;
                console.log(newBigColor,newSmallText);
                // myBigText.style.color='red'
                if(colorArr.indexOf(newBigColor) == textArr.indexOf(newSmallText)){
                    // 颜色和字匹配
                    // 加分
                    addScore(1);
                    // 重新计时
                    funTime();
                    // 重新随机大字和小字
                    randBig()
                    randSmall()
                }else{
                    // 游戏结束，计算分数
                    gameOver();
                }
            }
        }
    }

    // 加分
    function addScore(num){
        gameScore += num;
        // return gameScore;
        myScore.innerHTML = '分数：'+gameScore
    }

    // 重新计时
    function funTime(){
        gameTime = 10;
        myTime.innerHTML = '时间：' + gameTime;

        clearInterval(games)
        games = setInterval(function(){
            if(gameTime==0){
                gameOver();
            }else{
                // 时间--
                gameTime--
                myTime.innerHTML = '时间：'+gameTime;
            }
        },1000);
    }

    // 游戏结束
    function gameOver(){
        // 清除定时器
        clearInterval(games);
        alert('游戏结束，您的分数为：' + gameScore);
        for(var i=0; i<mySmallText.length;i++){
            mySmallText[i].onclick=function(){
                return false;
            }
        }
    }

    // 随机数
    function rand(min,max){
        return Math.floor(Math.random()*(max-min+1)+min)
    }

</script>

么么☞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数字游戏

标题根据大字的颜色选择对应的小字，选对加1分代码如下：html和css代码<style> *{ margin: 0; padding: 0; } .wrap{ width: 300px; margin: 0 auto; position: relative; border: 1px solid #f
复制链接

扫一扫

专栏目录