Click here to Skip to main content
15,896,330 members
Search within:


Articles / Web Development / HTML
 

Physical Phenomena

Rate me:
Please Sign up or sign in to vote.
3.55/5 (12 votes)
22 Feb 20054 min read 53.4K   528   16  
JavaScript simulation of common physical phenomena -- Newtonian basics and 3D Engine. Favourite of Kevin Fortuna.
 
<html>

<body>

<div id="rot0" angle="" style="position:absolute;left:100px;top:100px;width:10px;">-</div>
<div id="rot1" angle="" style="position:absolute;left:100px;top:100px;width:10px;">-</div>
<div id="rot2" angle="" style="position:absolute;left:100px;top:100px;width:10px;">-</div>
<div id="rot3" angle="" style="position:absolute;left:100px;top:100px;width:10px;">-</div>
<div id="rot4" angle="" style="position:absolute;left:100px;top:100px;width:10px;">-</div>
<div id="rot5" angle="" style="position:absolute;left:100px;top:100px;width:10px;">-</div>
<div id="rot6" angle="" style="position:absolute;left:100px;top:100px;width:10px;">-</div>
<div id="rot7" angle="" style="position:absolute;left:100px;top:100px;width:10px;">-</div>
<div id="rot8" angle="" style="position:absolute;left:100px;top:100px;width:10px;">-</div>
<div id="rot9" angle="" style="position:absolute;left:100px;top:100px;width:10px;">-</div>
<div id="rot10" angle="" style="position:absolute;left:100px;top:100px;width:10px;">-</div>
<div id="rotBorder" angle="" style="position:absolute;left:100px;top:100px;width:10px;"></div>


<div id="bullet" angle="" style="position:absolute;left:100px;top:100px;font-weight:bold;display:none;">O</div>
<div id="gun" angle="" style="position:absolute;left:100px;top:100px;font-weight:bold;">@</div>


<div id="vel0" style="font-weight:bold;font-face:arial;position:absolute;color:#00aa66;left:140px;top:200px;width:10px;height:20px;display:none;">N</div>
<div id="vel1" style="font-weight:bold;font-face:arial;position:absolute;color:#00cc44;left:150px;top:200px;width:10px;height:20px;display:none;">&nbsp;I</div>
<div id="vel2" style="font-weight:bold;font-face:arial;position:absolute;color:#00ee22;left:160px;top:200px;width:10px;height:20px;display:none;">C</div>
<div id="vel3" style="font-weight:bold;font-face:arial;position:absolute;color:#88ff00;left:170px;top:200px;width:10px;height:20px;display:none;">E&nbsp;&nbsp;</div>
<div id="vel4" style="font-weight:bold;font-face:arial;position:absolute;color:#aaff00;left:180px;top:200px;width:10px;height:20px;display:none;">S</div>
<div id="vel5" style="font-weight:bold;font-face:arial;position:absolute;color:#ccff00;left:190px;top:200px;width:10px;height:20px;display:none;">H</div>
<div id="vel6" style="font-weight:bold;font-face:arial;position:absolute;color:#ffdd00;left:200px;top:200px;width:10px;height:20px;display:none;">O</div>
<div id="vel7" style="font-weight:bold;font-face:arial;position:absolute;color:#ffaa00;left:210px;top:200px;width:10px;height:20px;display:none;">O</div>
<div id="vel8" style="font-weight:bold;font-face:arial;position:absolute;color:#ff8800;left:220px;top:200px;width:10px;height:20px;display:none;">T</div>
<div id="vel9" style="font-weight:bold;font-face:arial;position:absolute;color:#ff6600;left:230px;top:200px;width:10px;height:20px;display:none;">&nbsp;I</div>
<div id="vel10" style="font-weight:bold;font-face:arial;position:absolute;color:#ff4400;left:240px;top:200px;width:10px;height:20px;display:none;">N</div>
<div id="vel11" style="font-weight:bold;font-face:arial;position:absolute;color:#ff0000;left:250px;top:200px;width:10px;height:20px;display:none;">!</div>



<script>
	/********************************************/

	/*********************************************
		NICE SHOOTIN', TEXT
		BY JOEY FORTUNA
		http://neoncelery.com
		COPYRIGHT (C) 2004, Joey Fortuna
		PERMISSION TO USE GRANTED PROVIDING THE
		ADOPTER INCLUDES THIS NOTICE
	*********************************************/
	/********************************************/
	var iTimeoutId;
	var iShootTimeoutId;
	var grav=1;

	var iVelocity=0;
	var iVelXPower=1;
	var iVelYPower=1;

	var C_GRAVITY=1.18;
	var C_POWER=6;
	var C_FRICTION=.1;
	var C_BOUNCE=.8;


	var winX=100;
	var winY=100;
	var moveX,moveY,oldMoveX,oldMoveY=0;
	var piVal=Math.PI;
	var morterInc=20.141519;
	var morterStep=piVal/morterInc;
	var morterMove=0;
	var hotDiv=0;
	var numMorters=11;
	var numVel=12;

	getWinSize();


	function setUpMorter() {
		var i;
		for (i=0;i<numMorters;i++) {
			var obj,yval,xval;
			xval=0;
			yval=0;
			yval=(winY-20)-(80*Math.sin(i*morterStep));
			xval=0+(120*Math.cos(i*morterStep));
			obj=eval("rot"+i);
			obj.style.top=yval+"px";
			obj.style.left=xval+"px";
			obj.angle=i*morterStep;
		}
		rotBorder.style.left="0px";
		rotBorder.style.top=(winY-20)+"px";
		rotBorder.style.height="1px";
		rotBorder.style.width=(winX+10)+"px";
		rotBorder.style.borderBottom="1px solid black";

		var obj,obj2;
		obj=eval("gun");
		obj2=eval("rot0");
		obj.style.top=obj2.style.top;
		obj.style.left=obj2.style.left;

	}


	function getWinSize()
	{

			winX = document.body.clientWidth - 10;
			winY = document.body.clientHeight - 10;
			var i;



			for (i=0;i<numVel;i++) {
				var obj
				obj=eval("vel"+i);
				obj.style.top=(winY-20)+"px";
				obj.style.left=(10*i)+"px";
			}
			setUpMorter();
	}
	function clearVelocity() {
		var i;
		for (i=0;i<numVel;i++) {
			var obj=eval("vel"+i);
			obj.style.display="none";
		}
		iVelocity=0;
	}

	function showVelocity() {
		if (iVelocity>(numVel-1))  {
			clearVelocity();
		}
		var obj=eval("vel"+iVelocity);
		obj.style.display="inline";
		iVelocity++;

		iTimeoutId=setTimeout("showVelocity()",70);

	}

	function MoveHandler(e) {
		moveX = window.event.x + document.body.scrollLeft;
		if (moveX<oldMoveX) morterMove=1;
		else if(moveX>oldMoveX) morterMove=-1;
		else morterMove=0;
		if (
			(hotDiv>0 && morterMove<0 && moveX%5==0) ||
			(hotDiv<10 && morterMove>0 && moveX%5==0)
			) {
			hotDiv=hotDiv+morterMove;
		}

		var obj,obj2;
		obj=eval("gun");
		obj2=eval("rot"+hotDiv);
		obj.style.top=obj2.style.top;
		obj.style.left=obj2.style.left;
		oldMoveX=moveX;


	}


	function shootLoop() {
		var bulletX;
		var bulletY;
		grav=grav*C_GRAVITY;
		bulletX=parseInt(bullet.style.left);
		bulletY=parseInt(bullet.style.top);
		if (bulletX>(winX-20)|| bulletX<0) iVelXPower=-iVelXPower;

		if (bulletY>=(winY-15) && iVelYPower>0) {
			iVelYPower=C_BOUNCE*iVelYPower;
			grav=1;
		}

		bulletX=bulletX+(iVelXPower*C_POWER)*(Math.cos(bullet.angle));
		bulletY=(bulletY-(iVelYPower*C_POWER)*(Math.sin(bullet.angle)))+grav;
		if (bulletY>=(winY-15)) bulletY=(winY-15);


		if (bulletY>winY-15 && (iVelYPower>-.3 && iVelYPower<.3)) bulletY=winY-15;

		if (bulletY>=(winY-15)) {
			iVelXPower=(iVelXPower>0)?iVelXPower-C_FRICTION:iVelXPower+C_FRICTION;
		}
		bullet.style.top=bulletY;
		bullet.style.left=bulletX;

		if ((iVelXPower<-.3 || iVelXPower>.3)) iShootTimeoutId=setTimeout("shootLoop()",20);
		else bShooting=false;

	}
	function shootSetup() {
		var obj;
		grav=1;
		obj=eval("rot"+hotDiv);
		bullet.style.left=obj.style.left;
		bullet.style.top=obj.style.top;
		bullet.style.display="inline";
		bullet.angle=obj.angle;
		clearTimeout(iShootTimeoutId);
		shootLoop();
	}

	function PressHandler(e) {

		mousegrabber.setCapture(true);
		iTimeoutId=setTimeout("showVelocity()",50);

		return false;
	}
	function UpHandler(e) {

		clearTimeout(iTimeoutId);
		iVelXPower=iVelocity+1;
		iVelYPower=iVelocity+1;
		clearVelocity();
		mousegrabber.releaseCapture();
		shootSetup();
		return false;
	}

	document.onmouseup=UpHandler;
	document.onmousemove = MoveHandler;
	document.onmousedown = PressHandler;
	window.onresize = getWinSize;
</script>

<div onmouseup="this.releaseCapture();" id="mousegrabber" style="border:none;font-family:arial;">
<table width=100% cellpadding=0 cellspacing=0>
<tr>
<td>Nice Shootin', Text</td>
<td align=right><font style="font-size:12px;">
<script src="nav.js"></script>

</td>
</tr>
</table>
<table><tr>

<td><font style="font-size:10px;"><b>move mouse</b> </td><td><font style="font-size:10px;">- aim </td></tr><tr>
<td><font style="font-size:10px;"><b>left-click</b> </td><td><font style="font-size:10px;">- throttle</td></tr>
<td><font style="font-size:10px;"><b>left-release</b> </td><td><font style="font-size:10px;">- fire</td></tr>
</tr>
</td>
</table>

</div>

</body>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Joey Fortuna
United States United States
http://frogstomper.com

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 8 Feb 2005

Article Copyright 2005 by Joey Fortuna
Everything else Copyright © CodeProject, 1999-2024

Web03 2.8:2024-04-02:1