Simple javascript html image game

Question

I have a simple game where image moves randomly and score increases when user clicks on it.

The first image displays before game is started, which when clicked calls the play() function in javascript, which hides that image and displays the image that is to be used for the game.

That is where my code is stuck, it does not call the function play(). I am new to javascript and html. Any help would be great!

Here is my code

<html> 
   <head> 
      <title>Image click Game!</title> 
      <script>
         global var score = 0;
         global var left=400;
         global var top = 100;

         function play() {

            var game = document.getElementById('game');
            var firstDiv = document.getElementById('firstDiv');
            var height = window.innerHeight;
            var width = window.innerWidth;

            firstDiv.style = 'display : none';
            game.style='display : block';

            setInterval("move()", 1000);
        }

        function move() {
           var randomNumberX = Math.floor(Math.random()*11)-5;
           var randomNumberY = Math.floor(Math.random()*11)-5;

           left = left + randomNumberX;
           top = top+randomNumberY;

           var im = document.getElementById('image');
           im.style.left = left;
           im.style.top = top;
       }

       </script> 
    </head> 
 <body> 

    <div id ="firstDiv" style="display : block">
        <img src="pics/playgame.gif" width="108" height="106" onClick = "play()"/></a>
    </div>

        <div id="game" style="display : none">
            <p>"Score: " + score</p>
            <img id="image" src="pics/gameImage.gif"  onClick = "score++" style="position:absolute; left: 400; top: 100;"/></a>
        </div>

  </body> 
</html>

First, install firebug and see if it shown any errors in javascript. This is how u debug your code — Andrew
– Andrew, Commented Jul 1, 2013 at 4:39
did you try to place an alert just before the code var game = document.getElementById('game'); ? are you getting that alert? also as Andrew said please check the console of the browser to see if there is any error — Varada
– Varada, Commented Jul 1, 2013 at 4:49
I'm using Chrome as my browser, so do you think Chrome developer tools are enough for code validating.. — tzharg
– tzharg, Commented Jul 1, 2013 at 16:47

jlewkovich · Accepted Answer · 2013-07-01 05:13:47Z

2

There are a handful of things wrong with your code:

1) Your <img> tags are ended with a stray, unneeded </a> tag.

2) In your <img> tag, you should change to onClick = "play();"

3) I don't believe javascript supports the global keyword in that way.

4) To change CSS style, try this:

firstDiv.style.display = 'none';
game.style.display = 'block';

5) You cannot display javascript variables in this fashion: <p>"Score: " + score</p>...not to mention there is no declared variable 'score' to begin with!

Keep working at it, you only get better with practice.

answered Jul 1, 2013 at 5:13

jlewkovich

2,7752 gold badges36 silver badges50 bronze badges

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

2 Comments

tzharg Over a year ago

Thanks JL. made the changes. Had a question though.

tzharg Over a year ago

How can I access the javascript variable in html to display the score?

Shinov T · Accepted Answer · 2013-07-01 04:52:13Z

0

Tyr this

<script> 

var score = 0;
var left=400;
var top = 100;

function play() {
  var game = document.getElementById('game');
  var firstDiv = document.getElementById('firstDiv');
  var height = window.innerHeight;
  var width = window.innerWidth;
  firstDiv.style.display='none';
  game.style.display='block';
  setInterval("move()", 1000);

}

function move() {
  var randomNumberX=Math.floor(Math.random()*11)-5;
  var randomNumberY=Math.floor(Math.random()*11)-5;
  left= left+randomNumberX;
  top = top+randomNumberY;
  var im= document.getElementById('image');
  im.style.left=left;
  im.style.top=top;

}

answered Jul 1, 2013 at 4:52

Shinov T

8625 silver badges9 bronze badges

Collectives™ on Stack Overflow

Simple javascript html image game

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related