...

View Full Version : Steering by keys- game script.



tomusxs
05-09-2008, 05:54 AM
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:

<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>

RoadRash
05-09-2008, 07:32 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum