0

I have created a game with Phaser 3. I have it stored as a .js file in my working directory. I want the game to start when the start button is clicked on my .html index page. What am I doing wrong here?

The only thing I need to happen is for the game to run when the button is clicked, just as if I had included the script in the body

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- Title of our Page --> <title>Video Game</title> <!-- Phaser 3 link here --> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> <!-- CSS For our page --> <style type="text/css"> html, body { margin: 0; width: 1000px !important; height: 750px !important; } script { width: 1000px !important; height: 750px !important; } </style> </head> <body> <script> var skateGame = require('skateboarding.js'); </script> <input type = "button" onclick = "skateGame" value = "Skateboarding" /> </body> </html>
Improve this question
3
  • You're probably just missing parentheses after skateGame, i.e. onclick = "skateGame()". Commented Oct 30, 2019 at 2:43
  • I'm not even sure the require would work. Commented Oct 30, 2019 at 2:50
  • @kshetline tried that, didn't work Commented Oct 30, 2019 at 2:52

2 Answers 2

Reset to default
2

try this.

in your .html file

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- Title of our Page --> <title>Video Game</title> <!-- Phaser 3 link here --> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> <!-- CSS For our page --> <style type="text/css"> html, body { margin: 0; width: 1000px !important; height: 750px !important; } script { width: 1000px !important; height: 750px !important; } #startGame { background-color: #4caf50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <input type="button" id="startGame" value="Start Game" /> <script src="skateBoarding.js"></script> </body> </html>

and in skateBoarding.js

var startButton = document .querySelector("#startGame") .addEventListener("click", () => { this.startGame(); }); // Function that start game startGame = () => { console.log("Game is starting"); };

let me know if this works. and try to keep your html and js in separate files.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

That is my goal, that is why I am doing this so I don’t have 1 file that is 1000 lines long. I will give this a shot real quick
Works like a charm, thank you! Is there any way I could remove the bar that displays at the top of the page? The button is still there inside of a long white bar
cheers, could you please share a snapshot of button. I don't get the bar, maybe something to do with browser.
@RobertSmith just updated the html file (added styling for button), update your html and see if that makes any difference
0

By using onclick = "skateGame" your are asking javascript to do something with var skateGame wich does not make sense. Try :

 <button id="btn1" type="button"/> <script type="text/javascript"> var myBtn= document.getElementById('btn1'); myBtn.onclick = function(){ Your javascript code } </script>

Tell me if it works or not

Improve this answer

4 Comments

You should probably expand on this a bit-- a link to an outside resource doesn't really constitute a complete answer.
sorry i'm new ^^
No problem-- if you would like to learn more about writing answers it might be useful to review how-to-answer. Welcome to the site!
Yeah I had already been on W3Schools, and I tried that, it didn't work.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.