www.webdeveloper.com
Results 1 to 7 of 7

Thread: Cannot figure out game collision

  1. #1
    Join Date
    Dec 2010
    Posts
    65

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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.16909 seconds
  • Memory Usage 2,916KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (7)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (7)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates