www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: JS Spot The Ball

  1. #1
    Join Date
    Jul 2008
    Posts
    3

    JS Spot The Ball

    I wonder if anyone can help me.

    I'm looking for help with a JS based spot the ball competition.

    Basically, we have an image, and once clicked on we'd like an image marker (a little X or something to mark the spot). We'll need to be able to put exactly 10 markers on an image, no more no less, and each click would put the coordinates of the marker into a hidden field on the page).

    Some tips on how to actually do this would be great. That having been said, I know almost nothing about JS, so ideally someone doing it for us on a freelance basis would be perfect.

    Thanks in advance.

    James.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,432

    Lightbulb Something to consider ...

    This is not done yet, but it's a start.

    I'm trying to figure out how to put a mark on the image.
    I'm thinking of creating a new element (<div> maybe or another <img> ?)
    on the mouse click with the z-index set above the image level (?)

    Perhaps some other forum members have an idea how to do this (?)
    or have an alternate suggestion.

    Code:
    <html>
    <head>
    <title>Spot-On Image</title>
    
    <script type="text/javascript">
    // From idea at: http://www.webdeveloper.com/forum/showthread.php?t=208367
    // Possibly for: http://www.dreamincode.net/forums/showtopic103402.htm
    
    var ClickCount = 0;
    
    function SaveMouseInfo() {
      ClickCount++;
      if (ClickCount <= 10) {
        document.getElementById('TArea').value += ClickCount+','+tempX+','+tempY+'\n';	
      }
    }
    function ClrCoord() {
      document.getElementById('TArea').value = '';
      ClickCount = 0;	
    }
    function Toggle(IDS) {
      var sel = document.getElementById(IDS);
      if (sel.style.display == 'none') { sel.style.display = 'block'; }
                                  else { sel.style.display = 'none'; }	
    }
    </script>
    
    <script type="text/javascript">
    // Mouse co-ordinates
    document.onmousemove = getMouseXY;
    var tempX = 0;
    var tempY = 0;
    function getMouseXY(evt) {
    	var evt = (evt) ? evt : ((window.event) ? event : null);
    	tempX = evt.clientX;
    	tempY = evt.clientY;
      	document.Show.MouseX.value = tempX;
      	document.Show.MouseY.value = tempY;
    	return;
    }
    </script>
    </head>
    <body>
    <form name="Show">
    X:<input type="text" name="MouseX" value="0" size="4">&nbsp;&nbsp;&nbsp;
    Y:<input type="text" name="MouseY" value="0" size="4">
    <button onclick="Toggle('TAdiv');return false">TA</button>
    <br>
    <DIV ID="myDiv" style="border:1px solid red;height:225;width:175;float:left">
    <img id="pic" src="http://www.nova.edu/~rumsey/BanjBird.GIF" style="border:1px dotted blue"
     height="200" width="150" onclick="SaveMouseInfo()">
    <br>
    </DIV>
    
    <div id="TAdiv" style="display:none">
    <textarea id="TArea" rows="10" cols="20"></textarea><br>
    <button id="TAclr" onclick="ClrCoord();return false">Clear</button>
    </div>
    </form>
    </body>
    </html>

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,432

    Lightbulb Version 2.0....

    Here's a revision. I'm a little shaky with CSS so
    I don't know if it's the most efficient way to do it, but it seems to work.

    Code:
    <html>
    <head>
    <title>Spot-On Image</title>
    
    <script type="text/javascript">
    // From idea at: http://www.webdeveloper.com/forum/showthread.php?t=208367
    // Possibly for: http://www.dreamincode.net/forums/showtopic103402.htm
    
    var ClickCount = 0;
    var ClickX = 0;
    var ClickY = 0;
    
    function SaveMouseInfo() {
      if (ClickCount < 10) {
        document.getElementById('TArea').value += (ClickCount+1)+','+tempX+','+tempY+'\n';	
        ClickX = tempX;
        ClickY = tempY;
        moveCola();
      }
      ClickCount++;
    }
    function ClrCoord() {
      document.getElementById('TArea').value = '';
      ClickCount = 0;	
      for (var i=0; i<10; i++) {
        document.getElementById('Cola'+i).style.marginLeft = "0px"; 
        document.getElementById('Cola'+i).style.marginTop = "0px"; 
        document.getElementById('Cola'+i).style.display = 'none';
      }
    }
    function Toggle(IDS) {
      var sel = document.getElementById(IDS);
      if (sel.style.display == 'none') { sel.style.display = 'block'; }
                                  else { sel.style.display = 'none'; }	
    }
    </script>
    
    <script type="text/javascript">
    // Mouse co-ordinates
    document.onmousemove = getMouseXY;
    var tempX = 0;
    var tempY = 0;
    function getMouseXY(evt) {
    	var evt = (evt) ? evt : ((window.event) ? event : null);
    	tempX = evt.clientX;  
    	tempY = evt.clientY;
      	document.getElementById('MouseX').value = tempX;
      	document.getElementById('MouseY').value = tempY;
    	return;
    }
    
    function moveCola() {
      var sel = document.getElementById('Cola'+ClickCount);
      sel.style.marginLeft = (ClickX-12)+'px';
      sel.style.marginTop = (ClickY-12)+'px';
      sel.style.display = 'block';
    }
    </script>
    
    <style type="text/css">
      .cola {
    	z-index: 3;
    	position: fixed;
    	margin-left: 0px;
    	margin-top: 0px;
    	height:10px;
    	width:10px;
    	display:none;
      }
    </style>
    
    </head>
    <body>
    <form name="Show">
    <div id="Cola0" class="cola">X</div> <!-- could display 0,1,2,...8,9 if desired -->
    <div id="Cola1" class="cola">X</div>
    <div id="Cola2" class="cola">X</div>
    <div id="Cola3" class="cola">X</div>
    <div id="Cola4" class="cola">X</div>
    <div id="Cola5" class="cola">X</div>
    <div id="Cola6" class="cola">X</div>
    <div id="Cola7" class="cola">X</div>
    <div id="Cola8" class="cola">X</div>
    <div id="Cola9" class="cola">X</div>
    
    X:<input type="text" id="MouseX" name="MouseX" value="0" size="4">
    &nbsp;&nbsp;&nbsp;
    Y:<input type="text" id="MouseY" name="MouseY" value="0" size="4">
    <button onclick="Toggle('TAdiv');return false">TA</button>
    <br>
    <DIV ID="myDiv" style="border:1px solid red;height:225;width:175;float:left">
    <img id="pic" src="http://www.nova.edu/~rumsey/BanjBird.GIF" style="border:1px dotted blue"
     height="200" width="150" onclick="SaveMouseInfo()">
    <br>
    </DIV>
    
    <div id="TAdiv" style="display:none">
    <textarea id="TArea" rows="10" cols="20"></textarea><br>
    <button id="TAclr" onclick="ClrCoord();return false">Clear</button>
    </div>
    
    </form>
    </body>
    </html>

  4. #4
    Join Date
    Aug 2009
    Posts
    10
    Funnily enough I'm after a very similar thing!

    The game you've put up code wise is pretty much spot on what I'm after and editable but what I really need (if achievable) is the code to get the ball to appear when the mouse is over the top of the image?

    Is this do-able?

    Cheers

    David

  5. #5
    Join Date
    Aug 2009
    Posts
    10
    I've got a little further with it but now am wondering how to edit the code so I can give the user LESS than 10 attempts or vary the number or attempts.

    Thanks again

    David.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,432
    Post your variations and problem areas and we'll take a look.

  7. #7
    Join Date
    Aug 2009
    Posts
    10
    Right the game where I'm testing it can be found here:

    http://www.drj-media.co.uk/gametest/

    I have 2 issues.

    One is that I can't seem to vary the amount of times it logs the co-ordinates. I'd basically like to be able to vary it so the player gets 3 goes and only 3 goes or can only get 10 goes etc. I can't seem to figure out how to do this.

    ALSO

    In IE 6 (maybe later versions) the game jumps off the screen and doesn't work at all when you click within the pic but works fine in Firefox and Google Chrome but obviously IE is quite important as most people use IE to my knowledge.

    Help would be VERY much appreciated PLEASE.

    Thankyou

  8. #8
    Join Date
    Aug 2009
    Posts
    593
    Hi All,

    I don't know why I did this but here is a version that I have written for you from scratch based on the internet address above. The images are from there too.

    Tested in IE6, FireFox 2 and Chrome.

    The fields are currently written out so that a PHP server can handle it easily. Just do a print_r($_POST) on the server to check what you were sent.

    The comments in the file should be self explanatory.
    Attached Files Attached Files

  9. #9
    Join Date
    Aug 2009
    Posts
    10
    That's brilliant, I really appreciate what you've done and thank you very much for editing it so it works in all browsers.

    I only have 1 issue. The co-ordinates come up over the top of the image, so it prevents people from being able to click in that location if they felt the ball was there?

    Also I'm a little confused on this ($_POST) business. Thankyou though!

  10. #10
    Join Date
    Aug 2009
    Posts
    593

    Cool

    Hi,

    Ok, I have set the fields to hidden for you and attached it to this post. The way ball coordinates are stored is as such:

    Code:
    FiveBalls[1][x] = {number}
    FiveBalls[1][y] = {number}
    FiveBalls[2][x] = {number}
    FiveBalls[2][y] = {number}
    So the data received by the server will be in the array "FiveBalls", same goes for the "ThreeBalls" version.
    Then you would use some code similar to this to process it and sore it away in your database or filesystem:

    PHP Code:
    echo '<pre>';
    print_r($_POST);
    echo 
    '</pre>';

    echo 
    '<b>5 Ball Game</b><br />';
    $five_balls $_POST['FiveBalls'];
    foreach (
    $five_balls as $ball_index => $ball_coord) {
        echo 
    $ball_index '. ' $ball_coord['x'] . 'x' $ball_coord['y'] . '<br />';
        
    //WRITE TO A DATABASE
    }

    echo 
    '<b>3 Ball Game</b><br />';
    $three_balls $_POST['ThreeBalls'];
    foreach (
    $three_balls as $ball_index => $ball_coord) {
        echo 
    $ball_index '. ' $ball_coord['x'] . 'x' $ball_coord['y'] . '<br />';
        
    //WRITE TO A DATABASE

    This is untested code, but should give you a good idea of what I'm talking about.
    Attached Files Attached Files

  11. #11
    Join Date
    Aug 2009
    Posts
    10
    Fantastic I shall have a look at that in mo!

    I may have to ask for some more assistance when it comes to logging this to a database as you seem very clued up and I REALLY appreciate your help!

    Thankyou very much!

  12. #12
    Join Date
    Aug 2009
    Posts
    10
    The only thing is I'd like them to be able see the co-ordinates they put in as they play? lol!

    Sorry I'm a mega pain matey

  13. #13
    Join Date
    Aug 2009
    Posts
    593
    Would you like to see the coordinates as they used to appear over the image (but obviously below it) as they were or listed like: Ball 1. X / Y in plain text

  14. #14
    Join Date
    Aug 2009
    Posts
    593
    Ok, here is a version that I hope is correct:
    Attached Files Attached Files

  15. #15
    Join Date
    Aug 2009
    Posts
    10
    3rd Variant is pretty much spot on!

    I've just got add a small Name and Email address field with a submit button and then create some background imagery and that'll be there then!

    Nice one, thanks again!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles