0
\$\begingroup\$

I have coded my main menu for the game in HTML and CSS, and need the image buttons to function with the engine, using JavaScript.

How do I create JavaScript buttons?

Here are some examples:

  • Skip: One image button. Red, when disabled, and green. When enabled, skips the menu, when you come back to play to a continued game. When disabled, will return transitions to normal.

  • Restart: When clicked, opens a box with two images and text for "yes" and "no". If you click "yes", it restarts game, and when you click "no", it resumes the game.

  • Sound: Will have one image button, which will be red for "on", and green, when "off". Turns sound on and off.

Here is some example code:

function ENGINE_get_option_state(opt:string):string {
    return…;
}

ENGINE_trigger_sound(…)
Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

You bind the images/buttons to a variable, then you can access that from your javascript.

For example:

<img id="startGame" src="image.png" />

Here's how you access the image from javascript:

var startGame = document.getElementById('startGame');

Now that you have the element in a variable you can do what you want with it. Just setup a function that executes the code you want the button to do. The function can look something like this:

startGame.onclick = function() {
alert('Game started!'); // Execute code here.
}

Very basic, hope this helps.

EDIT: Paste the following to a html document, and you have something to experiment with.

<!DOCTYPE HTML>
<html>
<head>
<style>
#startGame {width:100px; height:50px; background:black;}
</style>
</head>
<body>
<div id="startGame"></div>
<script>
window.onload = function() {
    var startGame = document.getElementById('startGame');

    startGame.onclick = function() {
        alert('Game started!');
    }
}
</script>
</body>
</html>
Improve this answer
\$\endgroup\$
14
  • \$\begingroup\$ Thanks for the reply and also this html/css menu is for an app game for both Android and ISO (iphone, ipad, and itouch). When you click play it plays the game on the phone its installed on. \$\endgroup\$
    – akamerc
    Jul 14, 2012 at 7:52
  • \$\begingroup\$ Shouldn't matter since javascript is a browser technology not a phone specific language. Even though browsers render things differently this code is so basic it should work in all of them. \$\endgroup\$
    – justanotherhobbyist
    Jul 14, 2012 at 8:37
  • \$\begingroup\$ Well first of all I'm not getting paid by this company and yes its a project and the reason I'm asking for help is because I'm knew at this and want to learn \$\endgroup\$
    – akamerc
    Jul 15, 2012 at 11:21
  • \$\begingroup\$ Do you know a website where I can read on this to learn the coding. Also, sorry for any misunderstanding here. \$\endgroup\$
    – akamerc
    Jul 15, 2012 at 11:22
  • \$\begingroup\$ teamtreehouse.com and codecademy.com are both free websites offering good online courses. Try them out and go with the one you like the best. \$\endgroup\$
    – justanotherhobbyist
    Jul 15, 2012 at 11:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .