![](/img/trans.png)
[英]How to add ngclass dynamically on the basis of correct or wrong answer in angular?
[英]How to add up the score in a simple game and have the correct and wrong answer
我正在做一個簡單的游戲。 基本上,玩家必須選擇與價格相等的正確數學方程式。 游戲開始時將出現三個隨機價格,玩家將必須選擇正確的數學方程式旁邊的按鈕。 我正在努力的是將總分加起來,並在選擇按鈕時彈出CORRECT或FALSE橫幅。 我嘗試了一些不同的方法,但是除非缺少一小段JavaScript,否則似乎沒有任何效果。
這是HTML
<!DOCTYPE html>
<html>
<head>
<title>How much are the tickets?</title>
<!-- These are the links for The script and CSS-->
<script src="scripting.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styling.css"/>
</head>
<!--This is the body with the default background I chose-->
<body onload="disablebuttons()" background="background3.gif">
<!--The game and the timer will not begin until the user clicks the button-->
<div><input type = "button" value = "Begin the Game" onClick = "start();" id="button3"></div>
<!--The Winner/Loser block that displays if you win/lose-->
<div id="blockparty"></div>
<!--This is the ticketman-->
<div id = "TM">
<img src="tm.gif"> </img>
</div>
<!--This is the speech bubble where the price of the ticket will appear when the game begins-->
<div id = "speechbubble">
<img src = "bubble1.gif" id="speechbubble1">
</div>
<!--These are the tickets where the maths equation will be-->
<div id = "ticket1">
<img src = "ticket1.gif" id="equation1">
</div>
<div id = "ticket2">
<img src = "ticket2.gif" id="equation2">
</div>
<div id = "ticket3">
<img src = "ticket3.gif" id="equation3">
</div>
<!--These are the tickets where the maths equation will be-->
<div><input type = "button" value = "1" onClick = "one();" id="tktbtn1"></div>
<div><input type = "button" value = "2" onClick = "two();" id="tktbtn2"></div>
<div><input type = "button" value = "3" onClick = "three();" id="tktbtn3"></div>
<!--This is the score, I set it to 0 so it displays when the page loads, it's a placeholder until the draw button is hit, the draw function is then targeted and it writes the score. It will either add 5 or take away 10 depending on if the player wins or loses.-->
<div id="scored">0</div>
<!--This is the reset score button. I made it a p tag and in my css I made it so that when you hover over it the cursor will appear as a pointer-->
<p id="resetscore" onclick="resetscore();"><u>Reset</u></p>
<!--The Winner/Loser block that displays if you win/lose-->
<div id="blockparty"></div>
</div>
</div>
</body>
這是我的javascript-我已經包含了我在javascript中嘗試執行的操作的描述。
/*These are the vars that I used in my project.
User = The Player
Comp = The Computer
Chosen = The ticket selected
Score = Used to add/minus the score
*/
var user;
var comp;
var chosen;
var score = 0;
//* This function disables the buttons at the beginning*/
function disablebuttons(){
document.getElementById("tktbtn1").disabled= true;
document.getElementById("tktbtn2").disabled= true;
document.getElementById("tktbtn3").disabled= true;
document.getElementById("resetscore").disabled= true;
}
/* This is my start button function, it calls on the computer once the start button is selected*/
function start(){
comp = Math.floor(Math.random()*3)+1;
document.getElementById('speechbubble1').src = 'bubble/price' + comp + '.gif';
document.getElementById("tktbtn1").disabled= false;
document.getElementById("tktbtn2").disabled= false;
document.getElementById("tktbtn3").disabled= false;
document.getElementById("resetscore").disabled= false;
document.getElementById('equation1').src = 'tickets/maths1.gif';
document.getElementById('equation2').src = 'tickets/maths2.gif';
document.getElementById('equation3').src = 'tickets/maths3.gif';
}
/* This function puts everything back to normal 5 seconds after the player selected their answer*/
function reset(){
document.getElementById('blockparty').style.display = "none";
document.getElementById('speechbubble1').src = "bubble/price" + comp + '.gif';
document.getElementById("tktbtn1").disabled= true;
document.getElementById("tktbtn2").disabled= true;
document.getElementById("tktbtn3").disabled= true;
document.getElementById("resetscore").disabled= true;
document.getElementById('equation1').src = 'tickets/maths1.gif';
document.getElementById('equation2').src = 'tickets/maths2.gif';
document.getElementById('equation3').src = 'tickets/maths3.gif';
}
/*
This add either 5 or 0 to the score depending on the result,
It displays a block saying: Correct/False
並且還會在5秒后設置一個超時時間,然后將所有內容恢復正常,如上圖所示* /
function begin(){
user = Math.floor(Math.random()*3)+1;
document.getElementById('player').src = 'bubble/price' +user+ '.gif';
document.getElementById('blockparty').style.display="block";
document.getElementById("tktbtn1").disabled= true;
document.getElementById("tktbtn2").disabled= true;
document.getElementById("tktbtn3").disabled= true;
document.getElementById("resetscore").disabled= true;
document.getElementById('equation1').src = 'tickets/maths1.gif';
document.getElementById('equation2').src = 'tickets/maths2.gif';
document.getElementById('equation3').src = 'tickets/maths3.gif'; }
if (chosen == "correct1;" && "tktbtn1" + "price1"){
document.getElementById('blockparty').innerHTML= "CORRECT!";
document.getElementById("blockparty").style.backgroundColor="green";
document.getElementById("scored").innerHTML = score = score + 5;}
else if (chosen == "false1;" && "tktbtn3" + "price1"){
document.getElementById('blockparty').innerHTML= "FALSE!";
document.getElementById("blockparty").style.backgroundColor="red";
document.getElementById("scored").innerHTML = score = score + 0;}
else if (chosen == "false2;" && "tktbtn2" + "price1"){
document.getElementById('blockparty').innerHTML= "FALSE!";
document.getElementById("blockparty").style.backgroundColor="red";
document.getElementById("scored").innerHTML = score = score + 0;}
else if (chosen == "correct2;" && "tktbtn2" + "price2"){
document.getElementById('blockparty').innerHTML= "CORRECT!";
document.getElementById("blockparty").style.backgroundColor="green";
document.getElementById("scored").innerHTML = score = score + 5;}
else if (chosen == "false3;" && "tktbtn3" + "price2"){
document.getElementById('blockparty').innerHTML= "FALSE!";
document.getElementById("blockparty").style.backgroundColor="red";
document.getElementById("scored").innerHTML = score = score + 0;}
else if (chosen == "false4;" && "tktbtn1" + "price2"){
document.getElementById('blockparty').innerHTML= "FALSE!";
document.getElementById("blockparty").style.backgroundColor="red";
document.getElementById("scored").innerHTML = score = score + 0;}
else if (chosen == "correct3;" && "tktbtn3" + "price3"){
document.getElementById('blockparty').innerHTML= "CORRECT!";
document.getElementById("blockparty").style.backgroundColor="green";
document.getElementById("scored").innerHTML = score = score + 5;}
else if (chosen == "false5;" && "tktbtn1" + "price3"){
document.getElementById('blockparty').innerHTML= "FALSE!";
document.getElementById("blockparty").style.backgroundColor="red";
document.getElementById("scored").innerHTML = score = score + 0;}
else if (chosen == "false6;" && "tktbtn2" + "price3"){
document.getElementById('blockparty').innerHTML= "FALSE!";
document.getElementById("blockparty").style.backgroundColor="red";
document.getElementById("scored").innerHTML = score = score + 0;}
else {
document.getElementById("blockparty").innerHTML= "Loser!";
document.getElementById("blockparty").style.backgroundColor="red";
document.getElementById("scored").innerHTML = score = score + -10;}
setTimeout('reset()', 5000);
}
/*This sets the score back to 0 once the reset p tag is clicked. This prevents the score from adding up once the game is reset.*/
function resetscore(){
document.getElementById("scored").innerHTML = score = score = 0;
}
您正在調用一個不存在的函數。 您只是不包括它們嗎? 函數“一個”,“兩個”和“三個”。 例:
<div><input type = "button" value = "1" onClick = "one();" id="tktbtn1"></div>
另外,您實際上從未調用過“開始”功能。 即使您這樣做了,在條件語句開始之前,似乎也有一個花括號將其關閉。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.