topical media & game development
game-javascript-casual-rocket-blaster-game.htm / htm
<!-- THREE STEPS TO INSTALL ROCKET BLASTER:
1. Save the entire first HTML page as rocket-blaster.html
2. Paste the second code into your page to open the game
3. Download the game images and upload them to your server -->
<!-- STEP ONE: Save the entire first HTML page as rocket-blaster.html -->
<html>
<head>
<style type = "text/css">
.basic {position:absolute; visibility:visible; top:-3000px;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Brian Gosselin (bgaudiodr@aol.com) -->
<!-- Web Site: http://www.bgaudiodr.iwarp.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var yoffset = 20; // pixels from top
var isNS = (document.layers);
var _all = (isNS) ? 'outer.document.' : 'all.' ;
var _style = (isNS) ? '' : '.style' ;
var _visible = (isNS) ? 'show' : 'visible' ;
var py = 0, px = 0, xoffset, loaded = false, obj = new Object();
var target, field, rocket1, rocket2, rocket3, rocket4, rocket5, rocket6, bullet, explosion;
var oktoshoot = false, bulletlevel, speed = 10, missed = 0, fired = 0, hit = 0, accuracy = 0;
function init() {
target = eval('document.'+_all+'target'+_style);
field = eval('document.'+_all+'field'+_style);
rocket1 = eval('document.'+_all+'rocket1'+_style);
rocket2 = eval('document.'+_all+'rocket2'+_style);
rocket3 = eval('document.'+_all+'rocket3'+_style);
rocket4 = eval('document.'+_all+'rocket4'+_style);
rocket5 = eval('document.'+_all+'rocket5'+_style);
rocket6 = eval('document.'+_all+'rocket6'+_style);
bullet = eval('document.'+_all+'bullet'+_style);
explosion = eval('document.'+_all+'explosion'+_style);
resize();
if (isNS) {
target.moveTo(300,0);
}
else {
target.pixelLeft = 300;
target.pixelTop = 0;
}
target.visibility = _visible;
field.visibility = _visible;
alert('INSTRUCTIONS:\n\n- Try to hit the rockets before they reach the other side.\n- Fire the "gun" a little ahead of time to compensate for distances.\n- Simply target the rockets with the mouse and then click to fire the gun.\n- Press the spacebar to pause the game.\n- Pausing the game also shows your full stats.\n- Look in the status bar to see how many rockets you missed.\n\nPress "Ok" to start....');
loaded = true;
oktoshoot = true;
dispmisses();
animate();
}
function dispmisses() {
status = "Rockets missed: "+missed;
setTimeout('dispmisses()', 500);
}
function showstat() {
accuracy = (Math.round(hit/fired*100));
if (isNaN(accuracy)) {accuracy = 0};
alert('Game Paused.....\n\nPress OK to continue..\n\nShots fired: '+fired+'\nRockets destroyed: '+hit+'\nShots missed: '+(fired-hit)+'\nRockets missed: '+missed+'\nShot accuracy: '+accuracy+'%');
}
function testandmoveX(rocketN) {
if (isNS) {
rocketN.clip.left = -rocketN.left-speed;
rocketN.clip.right = 500-rocketN.left;
if (rocketN.left+speed>500) {
rocketN.left = -60;
if (rocketN.top != -3000) { missed++; }
}
else {
rocketN.left+=speed;
}
if (rocketN.left == -60)rocketN.top = Math.floor(Math.random()*12)*20+30;
}
else {
rocketN.clip = "rect(0px, "+(500-speed-rocketN.pixelLeft)+"px, 15px, "+(-rocketN.pixelLeft-speed)+"px)";
if (rocketN.pixelLeft+speed > 500) {
if (rocketN.pixelTop != -3000) {missed++}
rocketN.pixelLeft = -60;
}else {
rocketN.pixelLeft+=speed;
}
if (rocketN.pixelLeft == -60)rocketN.pixelTop = Math.floor(Math.random()*12)*20+30;
}
}
function animate() {
for (i = 1; i <= 6; i++) {
testandmoveX(eval('rocket'+i));
}
setTimeout('animate()',100);
}
function shootrocket(x,y) {
fired++;
bulletlevel = 4;
bullettime(x,y);
}
function bullettime(x,y) {
if (bulletlevel > 0) {
if (isNS) {
bullet.clip.width = bulletlevel*4;
bullet.clip.height = bulletlevel*4;
bullet.moveTo(x-(bulletlevel*2),y-(bulletlevel*2));
if (bulletlevel == 1) {
for (r = 1;r <= 6;r++) {
tr = eval('rocket'+r);
if ( (bullet.top >= tr.top+2) && (bullet.top <= tr.top+9) && (bullet.left <= tr.left+57) && (bullet.left >= tr.left) ) {
explosion.moveTo(tr.left,tr.top);
tr.top = -3000;
hit++;
setTimeout('explosion.top = -3000', 400);
}
}
}
}
else {
bullet.width = bulletlevel*4;
bullet.height = bulletlevel*4;
bullet.pixelTop = y-(bulletlevel*2);
bullet.pixelLeft = x-(bulletlevel*2)
if (bulletlevel == 1) {
for (r = 1; r <= 6; r++) {
tr = eval('rocket'+r);
if ( (bullet.pixelTop >= tr.pixelTop+2) && (bullet.pixelTop <= tr.pixelTop+9) && (bullet.pixelLeft <= tr.pixelLeft+57) && (bullet.pixelLeft >= tr.pixelLeft) ) {
explosion.pixelLeft = tr.pixelLeft;
explosion.pixelTop = tr.pixelTop;
tr.pixelTop = -3000;
hit++;
setTimeout('explosion.pixelTop = -3000', 400);
}
}
}
}
bulletlevel--;
setTimeout('bullettime('+x+','+y+')',200);
}
else {
(isNS) ? bullet.top = -3000 : bullet.pixelLeft = -3000;
oktoshoot = true;
}
}
function resize() {
if (isNS) {
xoffset = (window.innerWidth-300)/2;
document.outer.moveTo((window.innerWidth-500)/2 , yoffset);
}
else {
xoffset = (document.body.clientWidth-300)/2
document.all.outer.style.pixelTop = yoffset;
document.all.outer.style.pixelLeft = (document.body.clientWidth-500)/2;
}
}
function movetarget(evnt) {
if (loaded) {
if (isNS) {
py = evnt.pageY-yoffset-59;
px = evnt.pageX-xoffset+59;
}
else {
py = event.clientY-yoffset-59;
px = event.clientX-xoffset+59;
}
if ((py >= 0) && (py <= 241)) { (isNS) ? target.top = py : target.pixelTop = py; };
if ((px >= 0) && (px <= 441)) { (isNS) ? target.left = px : target.pixelLeft = px };
return false;
}
}
function fire(mouse) {
if (oktoshoot) {
oktoshoot = false;
(isNS) ? shootrocket(target.left+30,target.top+30) : shootrocket(target.pixelLeft+30,target.pixelTop+30) ;
return false;
}
else {
}
}
function reloadNS() {
setTimeout('reloadNS_1()', 500);
}
function reloadNS_1() {
window.location.reload();
}
(isNS) ? window.onresize = reloadNS : window.onresize = resize;
function getkeypress(keypress) {
keyp = (isNS) ? keypress.which : window.event.keyCode;
if (keyp == 32)showstat();
return false;
}
if (isNS) window.captureEvents(Event.KEYPRESS);
if (isNS) document.captureEvents(Event.KEYPRESS);
window.onkeypress = getkeypress;
document.onkeypress = getkeypress;
if (isNS) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = movetarget;
if (isNS) document.captureEvents(Event.MOUSEDOWN);
if (isNS) window.captureEvents(Event.MOUSEDOWN);
document.onmousedown = fire;
window.onmousedown = fire;
window.onload = init;
// End -->
</script>
</head>
<body bgcolor="#009090">
<script language="JavaScript">
var basic = 'visibility="visible" width="60" top="-3000" height="15"';
var txt = '';
if (isNS) {
txt += '<layer name="outer" visibility="visible" width="500">';
txt += '<layer name="target" visibility="hidden" z-index="12"><img src="game-javascript-casual-rocket-blaster-target.gif"></layer>';
txt += '<layer name="field" visibility="hidden" bgcolor="black" z-index="1" width="500" height="300"></layer>';
txt += '<layer name="explosion" '+basic+'z-index="11"><img src="game-javascript-casual-rocket-blaster-explosion.gif"></layer>';
txt += '<layer name="rocket1" '+basic+'left="-460" z-index="4"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></layer>';
txt += '<layer name="rocket2" '+basic+'left="-380" z-index="5"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></layer>';
txt += '<layer name="rocket3" '+basic+'left="-300" z-index="6"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></layer>';
txt += '<layer name="rocket4" '+basic+'left="-220" z-index="7"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></layer>';
txt += '<layer name="rocket5" '+basic+'left="-140" z-index="8"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></layer>';
txt += '<layer name="rocket6" '+basic+'left="-60" z-index="9"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></layer>';
txt += '<layer name="bullet" visibility="visible" width="10" top="-3000" height="10" bgcolor="white" z-index="10"></layer>';
txt += '</layer>';
}
else {
txt += '<div id="outer" style="position:absolute; width:600px; height:300px">';
txt += '<div id="field" style="position:absolute; top:0px; left:0px; visibility:hidden; width:500px; height:300px; z-index:2; background-color:black;"></div>';
txt += '<div id="target" style="position:absolute; visibility:hidden; z-index:12"><img src="game-javascript-casual-rocket-blaster-target.gif"></div>';
txt += '<div id="explosion" style="z-index:11;" class="basic"><img src="game-javascript-casual-rocket-blaster-explosion.gif"></div>';
txt += '<div id="rocket1" style="left:-460px; z-index:4" class="basic"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></div>';
txt += '<div id="rocket2" style="left:-380px; z-index:5" class="basic"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></div>';
txt += '<div id="rocket3" style="left:-300px; z-index:6" class="basic"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></div>';
txt += '<div id="rocket4" style="left:-220px; z-index:7" class="basic"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></div>';
txt += '<div id="rocket5" style="left:-140px; z-index:8" class="basic"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></div>';
txt += '<div id="rocket6" style="left:-60px; z-index:9" class="basic"><img src="game-javascript-casual-rocket-blaster-rocket.gif"></div>';
txt += '<div id="bullet" style="z-index:10; background-color:white; width:10px; height:10px; font-size:1px;" class="basic"></div>';
txt += '</div>';
}
document.write(txt);
// End -->
</script>
</body>
</html>
</HEAD>
<!-- STEP TWO: Paste the second code into your page to open the game -->
<BODY>
<center>
<form name="open-rockets">
<input type=button value="Play Rocket Blaster" onClick="window.open('rocket-blaster.html','rocketblaster','top=100,left=100,width=550,height=350');">
</form>
</center>
<!-- STEP THREE: Save the game images and then upload them to your web server -->
<!-- URL: http://javascript.internet.com/img/rocket-blaster/rocket-blaster.zip -->
<p><center>
<font face="arial, helvetica" SIZE="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 9.26 KB -->
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.