簡體   English   中英

如何在一個簡單的游戲中將分數相加並得到正確和錯誤的答案

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM