Jump to content

Collinsion effect?


Fire Dragon

Recommended Posts

Well,I want know,is there somekind code what makes something to happen,when example two pictures,or objects collides?Like this way:x yY moves and collides to xxyWhen they collides,they creates new picture or object z.xy zSo how I can,if this is even possible make this kind effect?Do I need ID code,and set it somekind,so when objects collides,happens something?This little odd question,but I hope that someone can help.Thank you very much. :)

Link to comment
Share on other sites

this code tells you if a collision has occured in an alert box...this should get you started on your question

<html><head><title>JavaScript key press event</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript">document.onkeydown = KeyCheck; function KeyCheck(e){var KeyID = (window.event) ? event.keyCode : e.keyCode;switch(KeyID){case 37:moveImg(0,-10);break;case 38:moveImg(-10,0);break;case 39:moveImg(0,10);break;case 40:moveImg(10,0);break;}}function moveImg(top,left){	var img = document.getElementById('img1');	var t = img.style.top;	var t_val = parseInt(t.substring(0,t.length-2));	var l = img.style.left;	var l_val = parseInt(l.substring(0,l.length-2));	if(collision(top,left,t_val,l_val))	{		alert('collision');		//or do some other code	}	else	{		img.style.top = (t_val + top) + 'px';		img.style.left = (l_val + left) + 'px'; 	}}function collision(top,lft,topNow,lftNow){	if((topNow+top)==300 && (lftNow+lft)==300)		return true;	else		return false;}</script></head><body><form><img id="img1" src="lotad.gif" style="position:absolute;top:100px;left:100px;width:10px;height:10px" alt=""/><img id="img1" src="lotad2.gif" style="position:absolute;top:300px;left:300px;width:10px;height:10px" alt=""/></form></body></html>

In the collision() I used 300 as a static postion for the 2nd image on the screen...if they were both able to move then you would need to chanmge 300 to the current top and left of the 2nd image.

Link to comment
Share on other sites

Ok.One problem occurred.I increased pictures width,and heigtht to 100,but after that,they won't work,and message don't appear.Why?It worked fine with 10x10 pictures,but with 100.BTW,is that width and height really needed anyway?I like use images original sizes.I can't find code clip,what prevents resizing image,or value what haves 10px.

Link to comment
Share on other sites

I made them 10x10 because each time they move it is in increments of 10. That way the movements will always line up.In the switch statement change the 10 or -10 to 100 or -100 or what ever size you make the images :)

Link to comment
Share on other sites

It is possible but you'd have to check for a range of numbers not just 1.This thread has inspired me to attempt to make a PACMAN style game. The concepts should be fairly simple for me but generating the computer AI will be a challenge (make the ghosts move).

Link to comment
Share on other sites

javascript onmouseovers will not recognize the images with the code you have because they are not visible for you to out your mouse over.

I knew that before,but about that collinsion effect.It regonizes them.I had invisible image,and when other objact collided to it,I got that collinsion message.I need this,because I plan that you must push object to the switch,and when it hits to it,switch disappears.
Link to comment
Share on other sites

Argh,I can't get it work right now.I put it into the event,what happens,when pictures collides,but it not seem to work.

if(collision(top,left,t_val,l_val)){alert('collision');var img1 = document.getElementById('img1Id');document.body.removeChild(img1);

And here is my switch and block code:

<form><img id="img1" src="http://i43.photobucket.com/albums/e366/kyogre_atlas/Zelda%20spritet/kuutio.gif"style="position:absolute;top:100px;left:100px;width:100px;height:100px" alt=""/><img id="img1" src="http://i43.photobucket.com/albums/e366/kyogre_atlas/Zelda%20spritet/switch.gif"style="position:absolute;top:300px;left:300px;width:100px;height:100px" alt=""/></form>

What I now did wrong!? :)BTW,Is it meaned for "real" objects?I headr,that there is code,what destroys objects,but my code don't have objects yet,because I'm just beginner with them,like whole JS :)Can I create walls for my picture?So you can't move it throught other pictures,what are like walls.

Link to comment
Share on other sites

var img1 = document.getElementById('img1Id');document.body.removeChild(img1);

This should not be img1Id because you do not have an <img> with that id. if you want the switch to disappear when the collision happens. plus you have to <img> names img1...id's must be unique...chnage the <img> of the switch to id="switchId"

var img1 = document.getElementById('switchId');document.body.removeChild(img1);switchPull();

Link to comment
Share on other sites

Argh,that was little hard to understand,especially,when my mother tongue isn't english,and my game's code is now about one metre,so it hard find just right code piece,even it is well organized.And of course Imust modified it little,and it turned slightly different... :) Because that,I made this simpler script.It's code is like identical with another.

<html><head><title>JavaScript key press event</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript">document.onkeydown = KeyCheck;function KeyCheck(e){var KeyID = (window.event) ? event.keyCode : e.keyCode;switch(KeyID){case 37:moveImg(0,-100);break;case 38:moveImg(-100,0);break;case 39:moveImg(0,100);break;case 40:moveImg(100,0);break;}}function moveImg(top,left){var img = document.getElementById('img1');var t = img.style.top;var t_val = parseInt(t.substring(0,t.length-2));var l = img.style.left;var l_val = parseInt(l.substring(0,l.length-2));if(collision(top,left,t_val,l_val)){alert('collision');var img1 = document.getElementById('imgId');document.body.removeChild(img1);switchPull();}else{img.style.top = (t_val + top) + 'px';img.style.left = (l_val + left) + 'px';}}function collision(top,lft,topNow,lftNow){if((topNow+top)==300 && (lftNow+lft)==300)return true;elsereturn false;}</script></head><body><form><img id="img1" src="lotad.gif"style="position:absolute;top:100px;left:100px;width:100px;height:100px" alt=""/><img id="img1" src="lotad.gif"style="position:absolute;top:300px;left:300px;width:100px;height:100px" alt=""/></form></body></html>

I understood variables,but still,I can't figure,what is wrong.I know,I'm annoying,when I don't understand anything... :)

Link to comment
Share on other sites

This thread has inspired me to attempt to make a PACMAN style game. The concepts should be fairly simple for me but generating the computer AI will be a challenge (make the ghosts move).

Are you nuts :) Sound like a toughie, lets see it if you ever manage :)
Link to comment
Share on other sites

Are you nuts :) Sound like a toughie, lets see it if you ever manage :)

It is not as difficult as you might think...download this to see what I have so farPacmanGameIt is mostly just generating the game board the 2 players and allows pacman to move arround using the arrow keys...it also confines pacman to the board.I hope to get more done soon.
Link to comment
Share on other sites

if(collision(top,left,t_val,l_val)){alert('collision');var img1 = document.getElementById('img1');document.body.removeChild(img2);switchpull()

<form><img id="img1" src="lotad.gif"style="position:absolute;top:100px;left:100px;width:100px;height:100px" alt=""/><img id="img2" src="lotad.gif"style="position:absolute;top:300px;left:300px;width:100px;height:100px" alt=""/></form>

This is my modified code.I changed variables,but it won't work.I'm little confused about this code:

var switchObj = document.getElementById('switchId');document.body.removeChild(switchObj);

I must replace "switchId" t0 my image's id,right?But I must to do about "switchObj"?Is it something to do with object oriented programming's objects?I mean,I haven't learned how use OOP,so I don't use objects in my code.I have mind level,where you must kill all enemies,moving huge cube over them.Thanks.BTW,good luck for your Pacman game!It looks very good!However,moving Pacman won't work with Fire Fox.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...