I am trying to figure out how when the page loads the game is "paused" and the user has to hit enter to play and when the user does so the game starts.
Here are the current keystates to control the player when the game is active. I feel like I'm almost there (correct me if I'm wrong), but I just can't get what makes the canvas "pause" when the page is loaded and how to make it "play" when the enter button is pushed.
keystate = {};
document.addEventListener('enter', function(evt){
keystate[evt.keyCode] = true;
});
document.addEventListener('keydown', function(evt){
keystate[evt.keyCode] = true;
});
document.addEventListener('keyup', function(evt){
delete keystate[evt.keyCode];
});
I have two ways,
One simple, but not so nice
One hard, can be nice
The first ay is just alerting something with comfirm(text).
Here is the code for that way :
var gameBrightness = 10;
function pause() {
var pause = confirm("You paused the game, click 'OK' to continue your game and the other button to go to options");
if (pause == false) { //Didn't click on OK
var options = confirm("Click on 'Ok' to not change brigthness, but the other one to change the brightness to a random value");
if (options == true) { //Clicked on OK
ReDopause();
return;
}
else { //Didn't click on OK
brightness = Math.floor(Math.random() * 20);
document.getElementById("brightness").innerHTML = brightness;
ReDopause();
return;
}
}
}
var ReDopause = function() {
pause();
}
<button onclick="pause()">Pause</button>
<span id="brightness">brigthness : 10</span>
The second way I havn't made but it is in each movements or timers add an if statment. Like this:
var pause = false;
setInerval(tick, 100);
function tick() {
if (pause == false) {
....
}
}
At the bginnning you should have a canvas which isn't visible which is the pause menu. Here gow you do the CSS for that:
#pause {
display: none;
...
}
When you pause set pause to true, set your main canvas to document.getElementById("mainCanvas").style.display = "none" this will make the canvas dissapear but still with all it's drawings. Then show the pause canvas like this : document.getElementById("mainCanvas").style.display = "initial". The when "Continue" is clicked: set pause to false and to the contrary of this.
Related
Using cesium JS, I want to add a button that would use the cesium zoom/camera feature to go to a new point when created and that is using my "myFunction" but I want it to continuously update it's position until the button is clicked again to turn it off.
When someone clicks the button it should toggle the camera to the new points being made and will continue to do so until someone "turns it off" or rather clicks the button again.
I've tried doing this with the code below but when I click the button nothing happens, I have tried using a variable that will get turned either true/false when clicked, and within my other function it will loop the "myFunction" until the button is clicked again or "false" any suggestions?
document.getElementById("camButton").addEventListener("click", myFunction2);
var buttonState = false;
function myFunction2() {
if (buttonState == false) {
buttonState = true;
} else {
buttonState = false;
}
}
function myFunction() {
if (buttonState == false) {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
payload["geometry"]["coordinates"][0],
payload["geometry"]["coordinates"][1],
5000000
)
});
}
}
I'm having an issue trying to hide a button I've created with p5.js:
var quit_button;
var pause = false;
function keyPressed() {
if (keyCode == '80') { // If p is pressed on the keyboard
if (pause === true) {
quit_button.hide()
pause = false;
} else {
pause = true;
}
}
}
function restart() {
quit_button.hide() // This isn't working
pause = false;
setup()
}
function setup() { //Start-up screen
createCanvas(600, 400);
}
function draw() {
background('#fae'); //This creates a new canvas
if (pause === true) {
quit_button = createButton('quit')
quit_button.position(300,200)
quit_button.mousePressed(restart)
text("Game has been paused. Press P to resume.", 100, 100)
} else {
}
}
When I run the code and press p to pause my snake game, the game pauses (as expected). However, if I press p to unpause or if I click 'quit', the quit button is still there.
If the game is paused, you're creating a new button every single frame. That's 60 buttons per second. So you have a bunch of buttons just sitting on top of each other. To see what I mean, right-click your button and click inspect element and look at all the buttons on your page.
So you need to make sure you only ever create one button. You can do this by checking whether quit_button has already been initialized, and if it has then skip the creation step:
if(!quit_button){
quit_button = createButton('quit')
}
You could also move this creation code to the beginning and then have it hidden by default.
My code partially works. When I click play it changes to paused, but when I click pause right after it just stays as pause and doesn't change back to play?
var playOrPause = function (id, button) {
var pp = document.getElementById(id);
if(pp.paused) {
button.textContent = 'Play';
} else if(!pp.paused) {
button.textContent = 'Pause';
}
};
I just figured out my problem. I coded one of my event listeners wrong lol Thank you guys for the help!!
$('.player_audio').click(function() {if (this.paused == false) { this.pause();
alert('music paused'); } else { this.play();alert('music playing');}});
This will help you
Okay, basically, I want to create a button that triggers a new javascript function. I want the button to click and stay clicked (then click again to toggle off).
My code (without button):
function playSound(target) {
//Play the sound: play (src, interrupt, delay, offset, loop, volume, pan)
var instance = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_ANY, 0, 0, false, 1);
if (instance == null || instance.playState == createjs.Sound.PLAY_FAILED) { return; }
target.className = "gridBox1 active";
instance.addEventListener ("complete", function(instance) {
target.className = "gridBox1";
});
}
I want a clickable button to trigger a new set of sounds that loop, this is what I have come up with:
<button id="buttonEv" onclick="myFunction()">Evolve</button>
<script>
function myFunction() {
function playSound(target) {
//Play the sound: play (src, interrupt, delay, offset, loop, volume, pan)
var instance = createjs.Sound.play(1, {loop:2});
instance.on("loop", handleLoop);
if (instance == null || instance.playState == createjs.Sound.PLAY_FAILED) { return; }
target.className = "gridBox1 active";
instance.addEventListener ("complete", function(instance) {
target.className = "gridBox1";
});
}
}
$('#buttonEv').click(function(event){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
</script>
The button clicks and stays clicked, though not affecting the sounds
Make sense? Any ideas? Thanks!
setInterval(mouse, 20);
function mouse(){
if(onMouseDown == true){
//Code for when you are holding mouse down
}else{
//Code for when the mouse isn't being held
}
}
This is the basic idea for my code. When the left mouse button is being held down I want it to execute set code, then when the mouse is not down it to preform another task. How do I do this. Thank you :)
function detectLeftButton(evt) {
evt = evt || window.event;
var btn = evt.which || evt.button;
return (btn == 1);
}
document.onmousedown = function() {
if(detectLeftButton(this.event)) {
// Code when mouse is down
}
}
document.onmouseup = function() {
if(detectLeftButton(this.event)) {
// Code when mouse is not held
}
}
In the above code when the person presses his left mouse button down anywhere in the webpage, code will be run and when he presses it up, another set of code will be executed. Fiddle (updated).
Learn more here.
Hope that helps.
Use the mousedown and mouseup events along with setInterval/clearInterval
(function(){
var downTimer = null;
var upTimer = null;
function runWhileDown(){
//code to run while mouse is down
}
function runWhileUp(){
//code to run while mouse is up
}
document.addEventListener("mousedown",function(){
//Stop the runWhileUp code from running
if(upTimer) clearInterval(upTimer);
//make sure the previous interval is stopped
if(downTimer) clearInterval(downTimer);
//start the new timer
downTimer = setInterval(runWhileDown,20);
});
document.addEventListener("mouseup",function(){
//Stop the runWhileDown code from running
if(downTimer) clearInterval(downTimer);
//make sure the previous interval is stopped
if(upTimer) clearInterval(upTimer);
//start the new timer
upTimer = setInterval(runWhileUp,20);
});
//If you need the runWhileUp code to run at the start
upTimer = setInterval(runWhileUp,20);
})();
JSFiddle