www.webdeveloper.com
Results 1 to 7 of 7

Thread: Cannot figure out game collision

Hybrid View

  1. #1
    Join Date
    Dec 2010
    Posts
    59

    Cannot figure out game collision

    I'm writing a little platform game in javascript. Not using the canvas tag. I don't want to use the canvas tag right now, so please don't suggest it. I don't mean to sound rude either, but please don't knock my code, I know it's not perfect but I'm trying to figure things out for myself.

    I've been stuck on the collision detection. I can get the collision to detect horizontally, but if i use space to jump over the guy, it still detects it. How can I get it to not detect the collision as I jump over the enemy?

    One more thing, How can I set an interval inside of javascript itself? for example, if i want to refine the animation of the character jumping, how can I setInterval inside the code itself.

    [CODE
    <html>
    <head>
    <script type="text/javascript">



    var guy;
    var guyLeft=0;
    var guyTop=252;


    var tree1;
    var tree2;
    var tree3;
    var treeLeft1=365;
    var treeLeft2=600;
    var treeLeft3=1000;
    var cave;
    var caveLeft=0;
    var ground;
    var groundLeft=0;
    var groundRight;
    var wall;
    var wallLeft;
    var wallRight;
    var bullet;
    var bulletLeft=25;
    var enemy;
    var enemyLeft=300;
    var enemyTop=252;
    var castle;
    var castleLeft = 250;
    var bush1;
    var bushLeft1=50;

    function init(e){

    guy=document.getElementById('guy');
    bullet=document.getElementById('bullet');
    tree1=document.getElementById('tree1');
    tree2=document.getElementById('tree2');
    tree3=document.getElementById('tree3');
    cave=document.getElementById('cave');
    wall=document.getElementById('wall');
    ground=document.getElementById('ground');
    enemy=document.getElementById('enemy');
    castle = document.getElementById('castle');
    bush1 = document.getElementById('bush1');

    document.onkeydown=keylistener;

    }




    function collision(){




    }













    function keylistener(e){



    if(!e){
    e=window.event;
    }



    if(e.keyCode===39 && guyLeft <= 300 ){
    guyLeft +=5;
    guy.style.left = guyLeft + 'px';
    bulletLeft +=5;
    bullet.style.left = bulletLeft + 'px';
    if(guyLeft%2){
    guy.style.background = "url(1.png)";
    }
    else{
    guy.style.background = "url(2.png)";
    }


    }

    else if(e.keyCode===37 && guyLeft >0){
    guyLeft -=5;
    guy.style.left = guyLeft + 'px';
    bulletLeft -=5;
    bullet.style.left = bulletLeft + 'px';
    if(guyLeft%2){
    guy.style.background = "url(3.png)";
    }
    else{
    guy.style.background = "url(4.png)";
    }
    }




    if(e.keyCode===32){

    for(guyTop = 252; guyTop > 196; guyTop--){

    guy.style.top = guyTop + 'px';


    }
    for(guyTop = 196; guyTop < 252; guyTop++){
    setTimeout("guy.style.top = guyTop + 'px'", 1500);
    }

    }

    collision();


    if(guyLeft >= 300){
    groundLeft -=5;
    treeLeft1 -=4;
    treeLeft2 -=4;
    treeLeft3 -=4;
    bushLeft1 -=3;
    caveLeft -=5;
    enemyLeft -=5;
    castleLeft -=2;
    ground.style.left = groundLeft + 'px';
    tree1.style.left =treeLeft1 + 'px';
    tree2.style.left =treeLeft2 + 'px';
    tree3.style.left =treeLeft3 + 'px';
    cave.style.left = caveLeft + 'px';
    enemy.style.left = enemyLeft + 'px';
    castle.style.left = castleLeft + 'px';
    bush1.style.left = bushLeft1 + 'px';
    if(groundLeft%2){
    guy.style.background = "url(1.png)";
    }
    else{
    guy.style.background = "url(2.png)";
    }
    }

    if(guyLeft == 0 && groundLeft <=0){
    groundLeft +=5;
    ground.style.left = groundLeft + 'px';
    treeLeft1 +=4;
    treeLeft2 +=4;
    treeLeft3 +=4;
    bushLeft1 +=3;
    caveLeft +=5;
    enemyLeft +=5;
    castleLeft +=2;
    tree1.style.left =treeLeft1 + 'px';
    tree2.style.left =treeLeft2 + 'px';
    tree3.style.left =treeLeft3 + 'px';
    cave.style.left = caveLeft + 'px';
    enemy.style.left = enemyLeft + 'px';
    castle.style.left = castleLeft + 'px';
    bush1.style.left = bushLeft1 + 'px';
    if(groundLeft%2){
    guy.style.background = "url(3.png)";
    }
    else{
    guy.style.background = "url(4.png)";
    }


    }


    }



    </script>
    <style type="text/css">

    #map{

    height: 400;
    width: 700;
    position: relative;
    border: 2px solid black;
    background: url(ground.png);
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: 2;
    }
    #guy{
    height: 50px;
    width: 50px;
    background: url(1.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 252;
    z-index: 3;


    }

    #ground{

    position: absolute;
    height: 20;
    width: 2000;
    top: 300;
    left: 3;

    }
    #bullet{

    height: 15px;
    width: 15px;
    left: 25;
    top: 263;
    position: absolute;
    background: url(bullet.png);
    background-repeat: no-repeat;
    z-index: 2;

    }
    #enemy{
    background: url(enemyleft.png);
    height: 50;
    width: 50;
    position: absolute;
    left: 300;
    top: 252;
    z-index: 1;
    }


    </style>
    </head>
    <body onload="init()">
    <div id="map">
    <div id="castle" style="position: absolute; z-index:0; height: 190; width: 295; left: 250; top: 111; background: url(castle.png);" ></div>
    <div id="cave" style="position: absolute; width: 160; height: 260;top: 40; z-index: 1; left: 0; background: url(cave.png); background-repeat: no-repeat; "></div>
    <div id="bush1" style="position: absolute; z-index: 0; height: 75; width: 200; background: url(bush.png); background-repeat: no-repeat; top: 233; left:50;"></div>
    <div id="tree1" style="position: absolute;height: 325; width: 200; left: 365; top: -24; background: url(tree.png); background-repeat: no-repeat;" ></div>
    <div id="tree2" style="position: absolute;height: 325; width: 200; left: 600; top: -24; background: url(tree.png); background-repeat: no-repeat;" ></div>
    <div id="tree3" style="position: absolute;height: 325; width: 200; left: 1000; top: -24; background: url(tree.png); background-repeat: no-repeat;" ></div>
    <div id="enemy"></div>
    <div id="bullet"></div>
    <div id="guy"></div>
    <div id="bush"><div>

    <div id="ground"></div>


    </div>

    </body>
    </html>
    [/CODE]

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    first, you need to set the style of position inside the div tags. javascript doesn't read css.
    thus-
    HTML Code:
    <div id="guy" style="position: absolute;	left: 1px;	top: 252px;	z-index: 3;"></div>
    Then you need to work the math to find when conditions are collided

    ex:
    alert(parseInt(guy.style.left)+'\n'+parseInt(guy.style.top))

  3. #3
    Join Date
    Dec 2010
    Posts
    59
    You really helped a whole lot!!!! Thanks!

    I have two more quick questions if you don't mind. I am trying to make the animation of my character smoother for jumping. I want to actually see him go up when i push space bar.

    also, On collision, how can i remove the image from the game becaues the character died?

  4. #4
    Join Date
    Oct 2006
    Posts
    939
    To mimick a jump, the course is more parabolic not linear so,,

    HTML Code:
     else if(e.keyCode===32){	pinx=0;	moves('jump',true);  }
    var p=[16,14,12,10,8,6,4,2,0]; var pinx=0
    function moves(d,w){
    	if(d=='jump'){	t=parseInt(guy.style.top); 
    		if(w){ 	if( pinx<p.length-1){guy.style.top=(t-p[pinx])+'px'; pinx++; setTimeout("moves('jump',"+w+")",20); return}
    			else{setTimeout("moves('jump')",20); return}
    		}
    		else{ if(pinx>=0){guy.style.top=(t+p[pinx])+'px';pinx--; setTimeout("moves('jump')",20); return}}
    	}
    }
    A DOM element method is called for to remove characters from the scene-
    <script type="text/javascript">
    var childnode=document.getElementById("child")
    var removednode=document.getElementById("father").removeChild(childnode)
    </script>

  5. #5
    Join Date
    Dec 2010
    Posts
    59
    One more quick question, I am sorry. How do I make it so when the guy element collides into an object such as an enemy or hill, he won't move anymore?

    Thanks in advance! I will post this game soon for everyone to try out.

  6. #6
    Join Date
    Dec 2010
    Posts
    59
    Bump

  7. #7
    Join Date
    Oct 2006
    Posts
    939
    You need a global variable, a Boolean.

    var eLives=true;

    Then you need to check it on every function whether it is 1 or 0.

Thread Information

Users Browsing this Thread

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

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