shablizzam Posted August 14, 2015 Share Posted August 14, 2015 Hello Everyone, I've been finding the discussion on here super helpful but I'm having a little trouble with a timer on a simple drag and drop game I have created to help me learn Phaser. You can see how it functions here: http://www.shablizzam.com/wote/index-html How to play:There is a box and 4 possible answers.Drag an answer to the box.If it's incorrect, the sprite will go back to it's original position and change colour to red. The text above prompts you to try again.If it's correct, it will snap to a position on the box and change colour to green.It will also start a timer that restarts the game after 3 seconds.The text above will read: "Good job! Try another one in 3 seconds"Then it restarts. What I would like to do is update the number in the string above the boxes when the correct answer is chosen. Here is my code. I only added the javascript. Any help or suggestions would be appreciated Thanks! <script type="text/javascript"> var game = new Phaser.Game(1024, 768, Phaser.AUTO, 'gamestage', { preload: preload, create: create, update: update, render: render }); function preload() { // Load background and other graphicsgame.load.image('background', 'assets/old-wood-table-top.jpg'); // Load boxgame.load.image('foodbox', 'assets/carboard-box.png'); // Load 4 possible answers game.load.image('Wrong', 'assets/wrong.png'); game.load.image('Wrong2', 'assets/wrong2.png'); game.load.image('Wrong3', 'assets/wrong3.png'); game.load.image('Correct', 'assets/correct.png'); } // Declare variables for use belowvar box, yes, no, no2, no3, text; // For timervar timer, timerEvent, timeText; function create() { // The table background game.add.sprite(0, 0, 'background'); // The Box box = game.add.sprite(325, 50, 'foodbox'); // Add input handler to box for later use. box.inputEnabled = true; // Set box alpha to 0 box.alpha = 0; // Box bounces in game.add.tween(box).to( { y: 150 }, 1000, Phaser.Easing.Bounce.Out, true); // Fade box in as it bounces in game.add.tween(box).to( { alpha: 1 }, 1000, Phaser.Easing.Linear.None, true); // Create timer timer = game.time.create(false); timerEvent = timer.add(Phaser.Timer.SECOND * 3, nextQuestion, this); timeText = 3; // The Answers // Yes yes = game.add.sprite(550, 650, 'Correct'); yes.inputEnabled = true; yes.input.enableDrag(); yes.events.onDragStart.add(onDragStart, this); yes.events.onDragStop.add(onDragStop, this); yes.alpha = 0; game.add.tween(yes).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true); // No no = game.add.sprite(150, 650, 'Wrong'); no.inputEnabled = true; no.input.enableDrag(); no.events.onDragStart.add(onDragStart, this); no.events.onDragStop.add(onDragStop, this); no.alpha = 0; game.add.tween(no).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true); // No2 no2 = game.add.sprite(350, 650, 'Wrong2'); no2.inputEnabled = true; no2.input.enableDrag(); no2.events.onDragStart.add(onDragStart, this); no2.events.onDragStop.add(onDragStop, this); no2.alpha = 0; game.add.tween(no2).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true); // No2 no3 = game.add.sprite(750, 650, 'Wrong3'); no3.inputEnabled = true; no3.input.enableDrag(); no3.events.onDragStart.add(onDragStart, this); no3.events.onDragStop.add(onDragStop, this); no3.alpha = 0; game.add.tween(no3).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true); // Initial instructions in header text = game.add.text(50, 30, "Put the correct label on the box.", { font: "35px Arial", fill: "#ffffff" }) } function update() { } function onDragStart(sprite, pointer) { text.text = "You have selected: " + sprite.key; text.fill = "#FFFFFF" } function onDragStop(sprite, pointer) { if (checkOverlap(box, yes)) { // Move sprite onto box yes.position.y = 400; yes.position.x = 525; yes.angle = -22; yes.tint = 0x009933; // Create and start the timer to move on to next question timer.start(); text.text = 'Good job! Try another one in ' + timeText + ' seconds'; } else if (checkOverlap(box, no)) { text.text = 'Please try again'; text.fill = "#FF0000" // move sprite back to its starting position no.position.y = 600; no.position.x = 150; // change sprite colour to show it has been selected already no.tint = 0xFF0000; } else if (checkOverlap(box, no2)) { text.text = 'Keep trying'; text.fill = "#FF0000" no2.position.y = 600; no2.position.x = 350; no2.tint = 0xFF0000; } else if (checkOverlap(box, no3)) { text.text = 'Try again. You can do it!'; text.fill = "#FF0000" no3.position.y = 600; no3.position.x = 750; no3.tint = 0xFF0000; } else { text.text = 'Put the correct label on the box.'; } } function checkOverlap(spriteA, spriteB) { var boundsA = spriteA.getBounds(); var boundsB = spriteB.getBounds(); return Phaser.Rectangle.intersects(boundsA, boundsB);} function nextQuestion() { game.state.restart(); } function render() { } </script> </body> </html> Link to comment Share on other sites More sharing options...
shablizzam Posted August 18, 2015 Author Share Posted August 18, 2015 After some trial and error and reading... I think I've sorted this out. P.S. I am not a very experience coder so if there are ways to improve this code, by all means let me know. I declared these variables: var timer, currentTimer;var counter = 5; // I want it to start at 5 and count down. I put the following code in create(); currentTimer = game.time.create(false);currentTimer.loop(Phaser.Timer.SECOND, updateTimer, this); Then in the onDragStop(), I put this: if (checkOverlap(box, yes)) { timer = game.add.text(510, 30, '5 ' + 'seconds.', messageStyle); // Move sprite onto box yes.position.y = 400; yes.position.x = 525; yes.angle = -22; yes.tint = 0x009933; message.text = 'Good job! Try another one in '; // Create and start the timer to move on to next question currentTimer.start(); } And finally need to modify updateTimer() and nextQuestion() to: function updateTimer() { counter -= 1; timer.setText(counter + ' seconds.'); if (counter == 0) { currentTimer.stop(); nextQuestion(); } } function nextQuestion() { if (counter == 0) { counter = 5; game.state.restart();} So in this scenario, I think the timer never gets destroyed or reset but is simply stopped and changed to a value of 5. This might cause problems if I started adding states??? That is my next goal.Then I also want to be able to use questions and answers from an array and have them put the designated places on the screen but in a random order. Cheers! Link to comment Share on other sites More sharing options...
Recommended Posts