18910140161

JavaScript-减去游戏中代表生命的图像-堆栈溢出

顺晟科技

2022-10-18 14:10:36

151

我正在尝试编写一个小游戏。游戏有两个框,你可以点击。这些盒子被分配了一个介于1和2之间的随机数。

当游戏开始时,你有5条命。这些生命被描绘成5张小人儿的照片。

当玩家获得3,5和7个正确点数时,您将获得额外的生命。我已经做到了。

现在,每当玩家点击错误的方块时,我都会尝试减去一条生命。

<代码>函数setRandomNumber(){随机数=Math.floor(Math.random()*2+1);如果(随机数===1){NumberOfRightAnswersSpan.innerHTML=`${++CorrectNumber}`;outputdiv.innerHTML=`det er riktig svar.`;If(CorrectNumber=3||CorrectNumber=5||CorrectNumber=7){NumberOfLivesDiv.innerHTML+=`<;IMG SRC=";images/person1.JPG";/>;`}}否则{NumberOfWerrAnswersSpan.innerHTML=`${++WrongNumber}`;outputdiv.innerHTML=`det er feil svar.`;}}

顺晟科技:

我对你的代码做了一些修改,但试图保持它与你的原始代码非常相似。我把你的模板文字改成了字符串。我将您的function setRandomNumber() { randomNumber = Math.floor(Math.random() * 2 + 1); if (randomNumber === 1) { numberOfRightAnswersSpan.innerHTML = `${++correctNumber}`; outputDiv.innerHTML = `Det er riktig svar.`; if (correctNumber === 3 || correctNumber === 5 || correctNumber === 7) { numberOfLivesDiv.innerHTML += `<img src="images/person1.jpg"/>` } } else { numberOfWrongAnswersSpan.innerHTML = `${++wrongNumber}`; outputDiv.innerHTML = `Det er feil svar.`; } } 修改更改为.innerHTML 修改。我重构了一些空格,以使if语句更具可读性。我没有通过追加HTML字符串来添加IMG元素,而是使用.innerText方法和.appendChild方法来生成IMG元素。我还在元素中添加了一个类,以便以后更容易抓取。

<代码>函数setRandomNumber(){随机数=Math.floor(Math.random()*2+1);如果(随机数===1){NumberOfRightAnswersSpan.innerText=++CorrectNumber;OutputDiv.InnerText=";Det er Riktig Svar.";如果(正确数字===3||正确数字===5||正确数字===7) {const newlife=document.createElement(";IMG";);newlife.SRC=";images/person1.JPG";NewLife.ClassList.Add(";Life";);NumberOfLivesDiv.appendChild(新生活);}}否则{NumberOfWerrAnswersSpan.innerText=++错误数;OutputDiv.InnerText=";Det er Feil Svar.";const alife=document.queryselector(";.life";);alife.remove();}}
值得注意的

是,在这一点上,没有逻辑来检查有多少生命存在,或者当生命耗尽时该做什么。最终你可能会遇到一个错误,因为没有一个元素具有一个生命类。

每当生命的数量发生变化时,

我都会重新渲染这些生命。

__的LET数=5;ConstLives_container=document.getElementById(“ user-lives ”);函数绘制_Lives(){Lives_container.innerHTML=“ ”;对于(令I=0;我<;_寿命的_;我++){const IMG=document.createElement(“ IMG ”);IMG.setAttribute(“ alt ”,“ life.PNG ”);const新_寿命=IMG;Lives_container.appendChild(新_Life);};If(_寿命的_<;=0)生存_container.innerText=_生存的_数;};函数删除_寿命(){_寿命的_--;画_生命();};函数添加_寿命(){_寿命的_++;画_生命();};画_生命();
createElement
<代码><;DIV ID=“ user-lives ”>;<;/DIV>;<;button onclick=“添加_寿命();”>;添加寿命<;/button>;<;button onclick=“删除_寿命();”>;删除寿命<;/button>;

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航