Pause Game Element

JavaScript
1

Hi, I do Javascript for fun, and I’m tryinng to add a pause game feature. How do I do this?

2

Imagine you have var moving that increases after button press and that you have var switch that switches between true and false(boolean). If it’s true, it’s paused and button pressing doesn’t increase var moving. When you press pause again, switch variable goes to false, and pressing button again increases moving.

Pseudo code:

var switch= true;
if clicked on switch, switch get opposite of what it holds at  moment of clicking on it.

Setting switch true initially also is good since before starting a game, it’s just as is paused …

3

This isn’t really possible to answer because it depends entirely on how the game is coded as to whether this is simple, as @codename11 describes, or extremely difficult. Need more context. What they describe is how it will work at a high level, but how it actually works in practise is something different.

4

Sorry, the code includes 3 images, and I can only send one image per post

5

I’ll try @codename11’s solution

6

Well, that how it works at a high level. What I meant was post some code or a link to some code, I’m not sure why you would need to post images

7

No, it doesn’t work.

8

What doesn’t work?? You haven’t told us what you’re doing, what you’ve tried, what you’re trying to achieve, where you’re stuck.

Edit: also, the description is fine. In the example there is only one value changing over time (normally there would be more), but there is a switch (pause), and when it is on (true), then the values get frozen, when it is off (false) the values are not frozen. It can get extremely complex, but it still, at base level, has to work this way. Reality says this cannot work another way: it either works this way or it’s not pause functionality.

9 
<html>
<div style="background-image:url('Sunset.jpg');padding:5px;width:1250px;height:500px;">
</div>
<img id="cat" style="position: absolute; width:100px; top:500px; left:300px; -webkit-transition:all 0.2;"src="sir pounce.png">
</body>
<body style="background: -webkit-linear-gradient(blue,green)">	
</body>
<img id="turkeyleg" style="position: absolute; width:50px; top:60px; left:30px; -webkit-transition:all 0.2;"src="sir pounce1.gif">
<img id="pause" style="position: absolute; width:50px; top:60px; left:30px; -webkit-transition:all 0.2;"src="pause.png">
<p id="scoreTB" style="position:absolute; left:50px; color:yellow; font-size:28px; font-family:Arial;">Score: 0</p>
<p id="LivesTB" style="position:absolute; right:50px; color:yellow; font-size:28px; font-family:Arial;">Lives: 3</p>
<script type="text/javascript">
var Score=0, Lives=3, catX=5, catY=10, turkeylegX=8, turkeylegY=0, hamX=8, hamY=0, meow=new Audio('meow.wav'), cheer=new Audio('cat purring.wav');
function setLeft(id,x){document.getElementById(id).style.left=x+"px";}
function setTop(id,y){document.getElementById(id).style.top=y+"px";}
var game
var gameTimer=window.setInterval(moveturkeyleg,10);
document.addEventListener('keydown',handlekeys);
function handlekeys(e){
	if (e.keyCode=='37') {catX--;}
	if (e.keyCode=='38') {catY--,catY++;}
	if (e.keyCode=='39') {catX++;}
	if (e.keyCode=='40') {catY++;}
	setTop("cat",catY*50);
	setLeft("cat",catX*50);
}
function moveturkeyleg(){
	if ((catX<turkeylegX+1)&&(catY<turkeylegY+0.75)&&(catX>turkeylegX-1)&&(catY>turkeylegY-0.75)){caughtturkryleg();}
	turkeylegY=turkeylegY+0.075;
	if (catX>18) {catX--}
	if (catX<0) {catX++}
	if (catY>11) {catY--}
	if (catY<6) {catY++}
	setLeft("turkeyleg",turkeylegX*50);
	setTop("turkeyleg",turkeylegY*50);
	if (turkeylegY>catY+5){missedturkeyleg();}
}


function missedturkeyleg(){
turkeylegY=0;
turkeylegX=(Math.random()*(16-2))+2;
Lives--;
meow.play();
document.getElementById("LivesTB").innerText="Lives:"+Lives;
if(Lives==0){gameOver();}
}
function caughtturkryleg(){
turkeylegY=0
turkeylegX=(Math.random()*(16-2))+2;
Score++;
cheer.play();
 document.getElementById("scoreTB").innerText="Score:"+Score;
 }
 function gameOver(){
 alert("Game Over! You scored:"+Score);
  location.reload();
  }	
</script>
</html>
10

I mean the description doesn’t work in my game

11

What makes your game run over time? How do you stop that loop from running? And if you stop it, how do you start it again? Because the variable values that have been changed will remain as what they were at the point you stopped. And if you start it again they will start changing from that point. so…

12

The chicken leg is designed to fall, which really keeps the game going. The only other action is the cat moving when the arrow keys are pressed, the cat moves.

13

What specifically is making your game animate over time? There is a specific line of code, one line, that makes it move, and the function you are using has a companion function available that you can use to stop what it’s doing. That is what you have to stop, else the turkey leg will keep moving.

  1. If you stop that (and prevent the player movement from working, ie just don’t do anything when they hit the keys), then the game is in a paused state.
  2. Once you start it again (and allow the player movement to happen), the game is unpaused.

Set a variable “paused” as false. When you click the pause button, if “paused” is false, set it to true and do #1 above. If “paused” is true, set it to false and do #2 above