0
我正在創建一個使用javascript構建幾乎所有功能的遊戲。 但我無法創建播放&暫停按鈕。 其實我想在按鈕上按一下按鈕，當你點擊播放按鈕遊戲開始，當我點擊暫停按鈕，然後遊戲暫停。 任何人都可以告訴我該怎麼做。在一個按鈕上播放&暫停按鈕。 在這裏，我顯示我的代碼。如何使用JavaScript在遊戲中使用Play和Pause按鈕？
只是看着它，並建議我。
var BrainShift = BrainShift || {};
document.addEventListener("DOMContentLoaded", function(){
BrainShift.init();
});
BrainShift.game_data = {
slides : 2,
time_interval : 60,
play_text : "Play",
welocme_text1 : "Brain Shift",
welcome_subtext : "desciroption",
width : 200,
height : 200,
mute : true,
text : "",
possible : "",
possible1 : "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
soundImage : '',
audios : '',
timerStart: ''
};
BrainShift.util = {
randomNumber : function() {
BrainShift.game_data.text="";
for (var i = 0; i < 1; i++)
BrainShift.game_data.text += BrainShift.game_data.possible.charAt(Math.floor(Math.random() * BrainShift.game_data.possible.length))+BrainShift.game_data.possible1.charAt(Math.floor(Math.random() * BrainShift.game_data.possible.length));
return BrainShift.game_data.text;
},
onLoad: function doOnLoad(num)
{
if(num == 0){
document.getElementById("second_div").innerHTML="";
document.getElementById("first_div").innerHTML = BrainShift.util.randomNumber();
document.getElementById("first").play();
}
if(num == 1){
document.getElementById("first_div").innerHTML ="";
document.getElementById("second_div").innerHTML = BrainShift.util.randomNumber();
document.getElementById("second").play();
}
},
};
BrainShift.init = function() {
document.getElementById("first_div").innerHTML = BrainShift.util.randomNumber();
BrainShift.game_data.soundImage = document.getElementById("mute");
BrainShift.game_data.audios = document.querySelectorAll("audio");
BrainShift.game_data.timerStart=setInterval(BrainShift.operation.timer,1000);
}
BrainShift.recordAnswer = function() {
// Create a json and store in user_data
// Correct
// Slide
// incorrect
// time spent
// accuracy
// percentage
}
BrainShift.operation = {
mute: function(){
if (BrainShift.game_data.mute === true)
{
BrainShift.game_data.soundImage.style.backgroundImage = "url('muteNew.png')";
BrainShift.game_data.audios.forEach.call(BrainShift.game_data.audios, function(audios){audios.muted = true});
BrainShift.game_data.mute = false;
}
else {
BrainShift.game_data.soundImage.style.backgroundImage = "url('unmuteNew.png')";
BrainShift.game_data.audios.forEach.call(BrainShift.game_data.audios, function(audios){audios.muted = false});
BrainShift.game_data.mute = true;
}
},
timer: function(){
var minutes = Math.round((BrainShift.game_data.time_interval - 30)/60);
remainingSeconds=BrainShift.game_data.time_interval % 60;
if(remainingSeconds<10){
remainingSeconds="0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML=minutes+":"+remainingSeconds;
if (BrainShift.game_data.time_interval==0) {
clearInterval(BrainShift.game_data.timerStart);
document.getElementById('countdown').innerHTML="Times Up!";
}
else
{
BrainShift.game_data.time_interval--;
}
},
play : function() {
},
stop : function() {
},
pause : function() {
},
restart : function() {
},
exit : function() {
},
}.back
{
width: 1333px;
height: 650px;
background: url('images/k1.jpg');
}
.first_ul
{
\t list-style-type: none;
margin-top: 40px;
padding: 0;
float: right;
}
.list
{
display: inline;
}
.list a
{
margin-right: 10px;
width: 90px;
height: 18px;
vertical-align: top;
text-align: center;
display: inline-block;
text-decoration: none;
padding: 8px;
color: black;
background-color: white;
}
#first_div
{
\t width: 217px;
height: 150px;
border-radius: 6px;
background-color: white;
position: relative;
margin: auto;
top: 93px;
text-align: center;
}
#second_div
{
\t width: 217px;
height: 150px;
border-radius: 6px;
background-color: white;
position: relative;
margin: auto;
top: 115px;
text-align: center;
}
.no_button
{
\t width: 103px;
height: 40px;
background-color: white;
color: black;
margin: auto;
position: relative;
left: 155px;
border-color: black;
}
.yes_button
{
\t width: 106px;
position: relative;
left: 151px;
height: 40px;
background-color: white;
color: black;
margin: auto;
border-color: black;
}
.button_div
{
\t position: relative;
top: 140px;
left: 406px;
width: 40%;
}
.home_button
{
padding: 8px 30px;
margin-left: 10px;
margin-top: 40px;
background-color: white;
color: black;
border-color: black;
}
.hello1
{
width: 217px;
height: 150px;
font-size: 122px;
color:black;
font-family: arial;
background-color: grey;
}
audio{
height: 0px;
width: 0px;
}
#controls {
position: relative;
top: 28%;
}
#info{
position: absolute;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid white;
margin-left: 41%;
background-color: white;
display: inline-block;
}
#info>span, #pause>span{
font-weight: 900;
top: 0%;
left: 30%;
position: relative;
font-size: xx-large;
}
#pause{
margin-left: 49%;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid white;
display: inline-block;
background-color: white;
}
#mute{
margin-left: 5%;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid white;
display: inline-block;
background-image: url('images/unmuteNew.png');
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<title>Brain Shift Game</title>
\t <link rel="stylesheet" type="text/css" href="project.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
\t <div class="back">
\t <button type="button" name="hello" id="hello" class="home_button" onclick="location.href='1st.html';"> HOME
</button>
\t <ul class="first_ul">
\t \t <li class="list ab"><a href="#"><span id="countdown"></span></a></li>
\t \t <li class="list bb"><a href="#">SCORE: 000</a></li>
\t <li class="list cb"><a href="#">X1:0000</a></li>
\t </ul>
<audio id="first" preload="none" src="images/ANGELS_F.WAV" >Your browser does not support the <code>audio</code> element.
</audio>
<audio id="second" preload="none" src="images/AWESOME.WAV" >Your browser does not support the <code>audio</code> element.
</audio>
<audio id="third" preload="none" src="images/BOING_.WAV" >Your browser does not support the <code>audio</code> element.
</audio>
<audio id="forth" preload="none" src="images/BOTTLE_B.WAV" >Your browser does not support the <code>audio</code> element.
</audio>
\t <div id="first_div" class="hello1"></div>
\t <div id="second_div" class="hello1"></div>
\t \t <div class="button_div">
\t \t \t <button type="button" name="hello" id="hello" class="no_button" onclick="BrainShift.util.onLoad(1)"> NO
</button>
\t \t \t <button type="button" name="hello1" id="hello1" class="yes_button" onclick="BrainShift.util.onLoad(0)"> YES
</button>
\t \t </div>
<div id="controls">
<div id="info"><span>?</span></div>
<div id="pause"></div>
<div id="mute" onclick="BrainShift.operation.mute()"></div>
</div>
\t </div>
</body>
</html>
Thanq但你的代碼不能正常工作能否請您只需添加暫停功能代碼 –
@ VishuD'cruz我不知道你的代碼暫停遊戲。這是你應該找到暫停的代碼。 – Munawir
其實我不會寫任何代碼暫停按鈕，所以如果你有一個代碼，如果你知道哪些代碼應該工作plz這樣做對我來說，這將是可觀的..謝謝 –