Javascript游戏_Javascript - Fatal编程技术网

Javascript游戏

javascript

Javascript游戏,javascript,Javascript,我刚刚制作了一个小游戏，用户可以点击。他可以看到他的点击，就像“cookieclicker” 除了一件事，一切都正常我试图缩短我的代码，通过制作一个变量的代码行，我重复了很多次 document.getElementById("hp-bar-p").innerHTML = hp; 这非常有效，可以显示用户所做的单击。但是当我试图把它变成一个变量时，它不起作用。例如： var hpdraw = document.getElementById("hp-bar-p").innerHTML =

我刚刚制作了一个小游戏，用户可以点击。他可以看到他的点击，就像“cookieclicker”

除了一件事，一切都正常

我试图缩短我的代码，通过制作一个变量的代码行，我重复了很多次

document.getElementById("hp-bar-p").innerHTML = hp;

这非常有效，可以显示用户所做的单击。但是当我试图把它变成一个变量时，它不起作用。例如：

 var hpdraw = document.getElementById("hp-bar-p").innerHTML = hp;

有没有一个原因让我不能通过将文本变为变量来缩短文本？还是我做错了什么

整个javascript如下所示：

<style>
    #clicker {
        margin: 0 auto;
        background-color: white;
        width: 500px;
        height: 500px;
    }
</style>
<link rel="stylesheet" type="text/css" href="../../style.css">

<html>
    <body>
        <div id="clicker">
            <button id="clickerbutton" onclick="onKlik()"> Click me!</button>
                 <p id="clicktekst"></p><br>
                 <p id="hp-bar-p"></p><br>
                 <p id="kills"></p><br>
            <button id="upgrade" onclick="upgradeKlik()">upgrade</button>

        </div>

    </body>
</html>


<script>
    var mouseclick = 1;
    var clickcounter = 0;
    var i = 0;
    var hp = 10;
    var kills = 0;

    var killdraw = document.getElementById("kills").innerHTML = kills;
    var hpdraw = document.getElementById("hp-bar-p").innerHTML = hp;
    document.getElementById("clicktest").innerHTML = clickcounter;
    document.getElementById("hp-bar-p").innerHTML = hp;




    function onKlik() {
        clickcounter += mouseclick;
        hp -= mouseclick;
        document.getElementById("clicktekst").innerHTML = clickcounter;
        document.getElementById("hp-bar-p").innerHTML = hp;

        if (hp<=0) {
            kills ++;
            hp = 10;
            document.getElementById("hp-bar-p").innerHTML = hp;
            document.getElementById("kills").innerHTML = kills;
           // hpdraw;
           // killdraw;

        }
    }

    function upgradeKlik() {
        while (i == 0 && clickcounter >= 10) {
            //mouseclick += 1;
            mouseclick ++;
            clickcounter -= 10;
            document.getElementById("clicktekst").innerHTML = clickcounter;
            break;
        }
    }
</script>


#点击器{
保证金：0自动；
背景色：白色；
宽度：500px；
高度：500px；
}
点击我！






升级
var mouseclick=1；
var-clickcounter=0；
var i=0；
var-hp=10；
var=0；
var killdraw=document.getElementById（“kills”）.innerHTML=kills；
var hpdraw=document.getElementById（“hp-bar-p”）.innerHTML=hp；
document.getElementById（“clicktest”）.innerHTML=clickcounter；
document.getElementById（“hp-bar-p”）.innerHTML=hp；
函数onKlik（）{
单击计数器+=鼠标单击；
hp-=鼠标单击；
document.getElementById（“clicktekst”）.innerHTML=clickcounter；
document.getElementById（“hp-bar-p”）.innerHTML=hp；
如果（hp=10）{
//鼠标点击+=1；
鼠标点击++；
点击计数器-=10；
document.getElementById（“clicktekst”）.innerHTML=clickcounter；
打破
}
}

您在回答我的“您会使用hpdraw等做什么？”问题时的评论：

为了缩短代码，我不必每次都使用document.getElementById

这一行：

var hpdraw = document.getElementById("hp-bar-p").innerHTML = hp;

将

hpdraw

设置为

document.getElementById（“hp-bar-p”）.innerHTML=hp

，它是

hp

的值

您可能想要：

var hpdraw = document.getElementById("hp-bar-p");
hpdraw.innerHTML = hp

…然后

hpdraw.innerHTML=“something other”

以后您想在哪里再次更新它。

您根本不清楚要做什么。您会使用

hpdraw

等工具做什么？它们出现在代码中的唯一位置是注释掉的引用，表示它们没有对它们执行任何操作。您没有在任何地方使用

hpDraw

。这有什么意义？缩短代码，这样我就不必每次都使用document.getElementById。我在解释我的问题时很糟糕，我正在努力做得更好！非常感谢你的解释！