Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Steering by keys- game script.

    Hello once again!

    Some people on this forum know that I was making a simple game in JS- if you want to see it- visit www.bth.cnet.pl/js

    But now I have got another problem- everything is working fine, BUT...

    It is posible in JS that when I'm pushing one time a key my first object will go more than + 10?

    Because now it looks like that: you push W - it goes + 10px , once again + 10px....etc.
    I want that, that when you push W, or another keys once time and it goes for a longer(+40,+40...etc). Maybe it's a hard question but maybe you will know an anwser?

    www.bth.cnet.pl/js/jsgame.html - if you play this game you will know what I mean exactly.


    What I have to change in this code for this keys:
    Code:
    <table border=2 bordercolor="#0099CC"><tr><td width=30 height=110 bgcolor="#FF0033"><div id='divek' style='position:absolute;'><img src=obrazek.png></div></td><td width=300 height=110 bordercolor="#CCFF66" bgcolor="#99FF66"></td><td width=30 height=110 bgcolor="#FF0033"></td></tr></table>
    <script type='text/javascript'>
    var start = new Date();
    
    function doSomething(e) {
    	var code;
    	if (!e) var e = window.event;
    	if (e.keyCode) code = e.keyCode;
    	else if (e.which) code = e.which;
    	var character = String.fromCharCode(code);
    	
    
    
    if ((character=='D')) {
    
    document.getElementById('divek').style.left=(divek.offsetLeft +10) + 'px'}
    if ((character=='A')) {
    
    document.getElementById('divek').style.left=(divek.offsetLeft -10) + 'px'}
    
    if ((character=='S')) {
    
    
    document.getElementById('divek').style.top=(divek.offsetTop +10) + 'px'}
    
    if ((character=='W')) {
    
    
    document.getElementById('divek').style.top=(divek.offsetTop -10) + 'px'}
    
    
    if(    (((divek.offsetLeft) > (kwadracik1.offsetLeft - 20 )) && ((divek.offsetLeft) < (kwadracik1.offsetLeft + 20 ))) && (((divek.offsetTop) > (kwadracik1.offsetTop - 20 )) && ((divek.offsetTop) < (kwadracik1.offsetTop + 20 ))) ){
    alert("try again:)")+window.location.reload()   }
    if(    (((divek.offsetLeft) > (kwadracik2.offsetLeft - 20 )) && ((divek.offsetLeft) < (kwadracik2.offsetLeft + 20 ))) && (((divek.offsetTop) > (kwadracik2.offsetTop - 20 )) && ((divek.offsetTop) < (kwadracik2.offsetTop + 20 ))) ){
    alert("try again:)")+window.location.reload()   }
    if(    (((divek.offsetLeft) > (kwadracik3.offsetLeft - 20 )) && ((divek.offsetLeft) < (kwadracik3.offsetLeft + 20 ))) && (((divek.offsetTop) > (kwadracik3.offsetTop - 20 )) && ((divek.offsetTop) < (kwadracik3.offsetTop + 20 ))) ){
    alert("try again:)")+window.location.reload()   }
    if(    (((divek.offsetLeft) > (kwadracik4.offsetLeft - 20 )) && ((divek.offsetLeft) < (kwadracik4.offsetLeft + 20 ))) && (((divek.offsetTop) > (kwadracik4.offsetTop - 20 )) && ((divek.offsetTop) < (kwadracik4.offsetTop + 20 ))) ){
    alert("try again:)")+window.location.reload()   }
    if(    (((divek.offsetLeft) > (kwadracik5.offsetLeft - 20 )) && ((divek.offsetLeft) < (kwadracik5.offsetLeft + 20 ))) && (((divek.offsetTop) > (kwadracik5.offsetTop - 20 )) && ((divek.offsetTop) < (kwadracik5.offsetTop + 20 ))) ){
    alert("try again:)")+window.location.reload()   }
    if(    (((divek.offsetLeft) > (kwadracik7.offsetLeft - 20 )) && ((divek.offsetLeft) < (kwadracik7.offsetLeft + 20 ))) && (((divek.offsetTop) > (kwadracik7.offsetTop - 20 )) && ((divek.offsetTop) < (kwadracik7.offsetTop + 20 ))) ){
    alert("try again:)")+window.location.reload()   }
    
    
    
    if(divek.offsetLeft < 6){
    document.getElementById('divek').style.left=(divek.offsetLeft +10)
    }
    if(divek.offsetTop < 5.5){
    document.getElementById('divek').style.top=(divek.offsetTop +10)
    }
    if(divek.offsetTop > 111){
    document.getElementById('divek').style.top=(divek.offsetTop -10)
    }
    
    var stop = new Date();
    if(divek.offsetLeft > 340){
    alert((stop.getTime() - start.getTime())/1000 + " sekund :next lvl") + window.open("jsgame2.html");
    }
     
    
    }
    
    
    </script>
    <body onkeyup='doSomething()' />
    
    
    
    
    <div id='kwadracik1' style='position:absolute;'><img src=obrazek2.png></div>
    <div id='kwadracik2' style='position:absolute;'><img src=obrazek2.png></div>
    <script type='text/javascript'>
    function ruch(x,g){
         document.getElementById('kwadracik1').style.top = x
    	  document.getElementById('kwadracik2').style.top = x
    document.getElementById('kwadracik1').style.left = '50px'
    document.getElementById('kwadracik2').style.left = '330px'
         
    	 x=kwadracik1.offsetTop + 1
         x=kwadracik2.offsetTop + 1
         if(g == 1){
           f = (parseInt(x) + 10);
         }
    
         if(g !== 1){
           f = (parseInt(x) - 10);
         }
         return f;
    }
    
    function ruch2(x){
      if(x == 1){
         g = 1
      }
      if(x == 100){
         g = 0
      }
         f = ruch(x,g);
         window.setTimeout('ruch2('+f+','+g+');', 70);
    }
    
    ruch2('1','1');
    
    </script> 
    <div id='kwadracik3' style='position:absolute;'><img src=obrazek2.png></div>
    <div id='kwadracik4' style='position:absolute;'><img src=obrazek2.png></div>
    <script type='text/javascript'>
    function ruch4(x,g){
         document.getElementById('kwadracik3').style.top = x
    	  document.getElementById('kwadracik4').style.top = x
    document.getElementById('kwadracik3').style.left = '100px'
    document.getElementById('kwadracik4').style.left = '280px'
         x=kwadracik3.offsetTop + 1
    	  x=kwadracik4.offsetTop + 1
        
         if(g == 1){
           f = (parseInt(x) + 10);
         }
    
         if(g !== 1){
           f = (parseInt(x) - 10);
         }
         return f;
    }
    
    function ruch3(x){
      if(x == 1){
         g = 1
      }
      if(x == 100){
         g = 0
      }
         f = ruch4(x,g);
         window.setTimeout('ruch3('+f+','+g+');', 70);
    }
    
    ruch3('1','1');
    
    
    </script> 
    <div id='kwadracik5' style='position:absolute;'><img src=obrazek2.png></div>
    <div id='kwadracik6' style='position:absolute;'><img src=zapasowy.png></div>
    <script type='text/javascript'>
    
    function ruch5(x,g){
         document.getElementById('kwadracik5').style.left = x +140
    	  document.getElementById('kwadracik6').style.left = x
    document.getElementById('kwadracik5').style.top = '20px'
    document.getElementById('kwadracik6').style.top = '60px'
         x=kwadracik5.offsetLeft + 1
            x=kwadracik6.offsetLeft + 1
        
         if(g == 1){
           f = (parseInt(x) + 10);
         }
    
         if(g !== 1){
           f = (parseInt(x) - 10);
         }
         return f;
    }
    
    function ruch6(x){
      if(x == 1){
         g = 1
      }
      if(x == 100){
         g = 0
      }
         f = ruch5(x,g);
         window.setTimeout('ruch6('+f+','+g+');', 70);
    }
    
    ruch6('1','1');
    
    
    </script> 
    <div id='kwadracik7' style='position:absolute;'><img src=obrazek2.png></div>
    <div id='kwadracik8' style='position:absolute;'><img src=zapasowy.png></div>
    <script type='text/javascript'>
    
    function ruch7(x,g){
         document.getElementById('kwadracik7').style.left = x +140
    	  document.getElementById('kwadracik8').style.left = x
    document.getElementById('kwadracik7').style.top = '90px'
    document.getElementById('kwadracik8').style.top = '60px'
         x=kwadracik5.offsetLeft + 1
            x=kwadracik6.offsetLeft + 1
        
         if(g == 1){
           f = (parseInt(x) + 10);
         }
    
         if(g !== 1){
           f = (parseInt(x) - 10);
         }
         return f;
    }
    
    function ruch8(x){
      if(x == 1){
         g = 1
      }
      if(x == 100){
         g = 0
      }
         f = ruch7(x,g);
         window.setTimeout('ruch8('+f+','+g+');', 70);
    }
    
    ruch8('1','1');
    
    
    </script> 
    
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jan 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey, I like the game, that was fun! lol...

    I would bet from playing it that you are picking up the down key stroke and moving +10px. You are maybe requiring an onkeyup to set things up for the next keystroke down. This is probably causing it not to pick up the repeat when holding the key down repeatedly. I would bet once you capture that right, you could even reduce the px count and smooth things out. I'm no js pro, but from a logical standpoint, this is where I assume there is a problem in the logic of the code.


  •  

    Posting Permissions

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