个人中心
gpt4 book ai didi

javascript - 在 Javascript 中递增变量不起作用？

转载 作者：行者123 更新时间：2023-11-30 16:25:16 25 4
gpt4 key购买 nike

我使用变量创建了一个基本的分数计数器。

基本上发生的事情是当你点击一个框时，如果变量 findbomb 等于函数选择的参数，那么它会说你赢了，它应该将变量 加 1 >score 但如果变量 findbomb 与参数 num 不同，则 if 会说你输了，并从分数中减去 1。

但出于某种原因，即使我正在使用 score++ 来递增变量，它也拒绝这样做，并且在 Chrome 的开发人员菜单中没有弹出任何错误。

<!doctype html>
<html>
<head>

    <title>Assignment</title>

    <style>
        body{background:black;}


        #game{width:1282px;
              position:absolute;top:15%;left:50%;
              margin-left:-642px;}

        #background{width:1282px;}

        #covered{width:1282px;
                 position:absolute;left:50%;top:70%;
                 margin-left:-642px;
                 z-index:100;}

        #filled{width:1282px;
                position:absolute;top:70%;
                z-index:50;}

        #box0{position:absolute;;left:20%;}

        #box1{position:absolute;left:60%;}


        .bombonleft{position:absolute;left:20%;}
        .blankonright{position:absolute;left:60%;}


        .blankonleft{position:absolute;left:20%;}
        .bombonright{position:absolute;left:60%;}

        #rules{width:500px;
               text-align:center;
               background:red;
               position:absolute;top:10%;left:50%;
               margin-left:-250px;
               z-index:300;
               display:none;}


        #feedback{position:absolute;left:50%;top:10%;
                  margin-left:-300px;
                  width:600px;
                  height:auto;
                  font-size:200%;
                  font-family:sans-serif;
                  text-align:center;
                  background:red;
                  display:none;}

        #scores{position:absolute;top:10%;left:5%;
               width:50px;
               text-align:center;
               font-size:300%;
               font-family:sans-serif;
               background:red;}

        #timer{position:absolute;top:30%;left:50%;
               margin-left:-236px;}

        #countdown{width:300px;
                   text-align:center;
                   position:absolute;
                   left:50%;
                   top:35%;
                   font-family:sans-serif;
                   font-size:1000%;
                   margin-left:-150px;
                   color:red;
                 }

        #title{text-align:center;
               font-family:sans-serif;
               font-size:300%;
               color:red;
               }
        #finder{background:red;}

        #new{background:red;}
    </style>


</head>

<body> 
    <div id="title">
        <p>Find the Bomb!</p>
    </div>

    <div id ="game">


      <div id="covered">  
            <img id="box0" src="closed.png" onclick="choose(0);">
            <img id="box1" src="closed.png" onclick="choose(1);">
        </div>

        <div id="filled">
          <img id ="bomb" class="bombonright" src="bomb .png">
          <img id="blank" class="blankonleft" src="empty.png">
      </div>

       <div id="background">
         <div id="scores"> 2 </div>
            <img id="backround"src="new background.png">    
       </div>

       <div id="buttons">
         <button id="Restartbtn" onclick="start();">Restart</button>
         <button id="Rulesbtn" onclick = "showrules();">?</button>
      </div>

        <div id="rules">
            <p> You awake to find yourself locked in this room with two boxes at your feet.</p>
            <p> A voice comes over a speaker and states "Welcome, you have been chosen to take part in a little game. At your feet you will find two boxes. One is empty and the other contains a enough explosives to reduce you to dust. The aim of the game is simple find the bomb.</p>
            <p> However, there are some rules</p>
            <p> Firstly you must make a choice within 5 seconds , otherwise the bomb explodes. There is a timer that counts down so be ware<p>
            <p> You may only choose one box </p>
            <p> Choose correctly and you may advance to the next round <p>
            <p> If you survive a round you will get a point ,once you have 5 you will be set free <p>
            <p> However if you fail to find the bomb , you will lose a point. Once you score hits -5 , the bomb will detonat<p>
            <p> The game begins as soon as you press close on this message, if you need to select it again press the "?" button<p>

            <button onclick="hiderules();"> CLOSE </button>
        </div>

      <div id="feedback">
            You lost! <br>Fortunately this bomb was a fake!
        </div>
<div id="timer">
      <img src="timer.png">
    </div>

        <div id="countdown">
            2:00
        </div>

        <div id="finder">
        fdafdsfa
        </div>

      <div id="new">
        2ffdaj
        </div>

    </div>

    <script>
        var findbomb=1;
        var clickable = false;
        var score = 0;

        window.onload = start();findme();newscore();

        function findme()
            {document.getElementById('finder').innerHTML = findbomb;}   

        function newscore()
            {document.getElementById('new').innerHTML = score;};

        function start()
            {score=0;
             showscore();
             setup();};

        function showscore()
            {document.getElementById('scores').innerHTML= score;};

        function hidebox()
            {document.getElementById('box0').style.display = "block";
             document.getElementById('box1').style.display = "block";};

        function hidefeedback() 
            {document.getElementById('feedback').style.display =  "none";};

        function showbfeedback()
            {document.getElementById('feedback').style.display = "block";
             setTimeout(setup, 1000);
            };

        function showrules()
            {document.getElementById('rules').style.display = "block";};

        function hiderules()
            {document.getElementById('rules').style.display = "none";};

        function play()
            { findbomb = Math.floor(Math.random()*2);

              if (findbomb == 0)
                {document.getElementById('bomb').setAttribute("class", "bombonleft");
                 document.getElementById('blank').setAttribute("class", "blankonright");}

              else if (findbomb == 1)
                {document.getElementById('bomb').setAttribute("class", "bombonright");
                 document.getElementById('blank').setAttribute("class", "blankonleft");}

             clickable=true;

            };

        function setup()
            {hidefeedback();
             hidebox();
             play();};

        function choose(num)
            {if (clickable = true)
                {document.getElementById('box'+num).style.display = "none";

                    if(findbomb ==num)
                        {document.getElementById('feedback').innerHTML = "You Win"; score++;}
                    else if (findbomb != num)
                        {document.getElementById('feedback').innerHTML ="You lose, fortunately that one was a fake!";score--;};

                    setTimeout(showbfeedback, 1000);
                    clickable= false;   
                }
            }


    </script>
</body>
</html>

最佳答案

您需要将 window.onload 设置为一个函数。不是 undefined。

当您执行 window.onload = start(); 时，您正在调用 start() 立即并将其返回值 (undefined) 分配给 window.onload - 它什么都不做。

你想做:

window.onload = start;

或:

window.onload = function(){
    start();
};

关于javascript - 在 Javascript 中递增变量不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34209771/

25 4 0
文章推荐： C语言转换数基
文章推荐： c# - 在没有模拟框架的情况下验证方法调用和参数
文章推荐： c - gnu 链接器链接的文件的入口点地址是什么？
文章推荐： c# - 如何复制/克隆数据表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com