播放和暂停按钮如何在游戏中使用javascript工作？

Question

我正在创建一个游戏，其中我使用javascript构建几乎所有功能。 但我无法创造一个游戏＆amp;暂停按钮。 实际上我想在你点击PLAY按钮游戏开始时点击该按钮，当我点击暂停按钮然后游戏暂停时。 任何人都可以告诉我该怎么做。制作戏剧＆amp;暂停按钮在一个按钮上工作。 在这里，我展示了我的代码。

看看它并建议我。

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 : "0123456789",
    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
{
	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
{
	width: 217px;
    height: 150px;
    border-radius: 6px;
    background-color: white;
    position: relative;
    margin: auto;
    top: 93px;
    text-align: center;
}
#second_div
{
	width: 217px;
    height: 150px;
    border-radius: 6px;
    background-color: white;
    position: relative;
    margin: auto;
    top: 115px;
    text-align: center;
}
.no_button
{
	width: 103px;
    height: 40px;
    background-color: white;
    color: black;
    margin: auto;
    position: relative;
    left: 155px;
    border-color: black;

}
.yes_button
{
	width: 106px;
    position: relative;
    left: 151px;
    height: 40px;
    background-color: white;
    color: black;
    margin: auto;
    border-color: black;
}
.button_div
{
	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>
	   <link rel="stylesheet" type="text/css" href="project.css"/>
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div class="back">
	   <button type="button" name="hello" id="hello" class="home_button" onclick="location.href='1st.html';"> HOME 
     </button>
  	<ul class="first_ul">
  		<li class="list ab"><a href="#"><span id="countdown"></span></a></li>
  		<li class="list bb"><a href="#">SCORE: 000</a></li>
  	  <li class="list cb"><a href="#">X1:0000</a></li>
  	</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>
  	<div id="first_div" class="hello1"></div>
  	<div id="second_div" class="hello1"></div>
  		<div class="button_div">
  			<button type="button" name="hello" id="hello" class="no_button" onclick="BrainShift.util.onLoad(1)"> NO 
        </button>
  			<button type="button" name="hello1" id="hello1" class="yes_button" onclick="BrainShift.util.onLoad(0)"> YES 
        </button>
  		</div>
      <div id="controls">
        <div id="info"><span>?</span></div>
        <div id="pause"></div>
        <div id="mute" onclick="BrainShift.operation.mute()"></div>
      </div>
 	</div>
</body>
</html>

Answer 1

编码游戏时，DOMContentLoaded开始游戏。加载文档后立即启动游戏，将BrainShift.init();放入函数中并使用按钮调用函数。

使用两个处理播放和暂停的功能更改以下行，如代码段所示。

document.addEventListener("DOMContentLoaded", function(){
    BrainShift.init();
});

注意：使用您的代码暂停pause()功能中的游戏。

var BrainShift = BrainShift || {};

function play() {
    BrainShift.init();
    document.getElementById("playbtn").style.display = "none";
    document.getElementById("pausebtn").style.display = "block";
}

function pause() {
//  Use your code to pause the game here
    document.getElementById("playbtn").style.display = "block";
    document.getElementById("pausebtn").style.display = "none";
}

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 : "0123456789",
    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
{
	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
{
	width: 217px;
    height: 150px;
    border-radius: 6px;
    background-color: white;
    position: relative;
    margin: auto;
    top: 93px;
    text-align: center;
}
#second_div
{
	width: 217px;
    height: 150px;
    border-radius: 6px;
    background-color: white;
    position: relative;
    margin: auto;
    top: 115px;
    text-align: center;
}
.no_button
{
	width: 103px;
    height: 40px;
    background-color: white;
    color: black;
    margin: auto;
    position: relative;
    left: 155px;
    border-color: black;

}
.yes_button
{
	width: 106px;
    position: relative;
    left: 151px;
    height: 40px;
    background-color: white;
    color: black;
    margin: auto;
    border-color: black;
}
.button_div
{
	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>
	   <link rel="stylesheet" type="text/css" href="project.css"/>
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div class="back">
	   <button type="button" name="hello" id="hello" class="home_button" onclick="location.href='1st.html';"> HOME 
     </button>
     
     	   <button id="playbtn" class="home_button" onclick="play()"> PLAY 
     </button>
     	   <button id="pausebtn" class="home_button" onclick="pause()" style="display:none;"> PAUSE 
     </button>

  	<ul class="first_ul">
  		<li class="list ab"><a href="#"><span id="countdown"></span></a></li>
  		<li class="list bb"><a href="#">SCORE: 000</a></li>
  	  <li class="list cb"><a href="#">X1:0000</a></li>
  	</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>
  	<div id="first_div" class="hello1"></div>
  	<div id="second_div" class="hello1"></div>
  		<div class="button_div">
  			<button type="button" name="hello" id="hello" class="no_button" onclick="BrainShift.util.onLoad(1)"> NO 
        </button>
  			<button type="button" name="hello1" id="hello1" class="yes_button" onclick="BrainShift.util.onLoad(0)"> YES 
        </button>
  		</div>
      <div id="controls">
        <div id="info"><span>?</span></div>
        <div id="pause"></div>
        <div id="mute" onclick="BrainShift.operation.mute()"></div>
      </div>
 	</div>
</body>
</html>