Herm,
It really is encouraging that you keep visiting this post.
Yes, I removed the enemy when the game is initialized.
Below is the entire source code: See my comments after, please:
<script type="text/javascript">
Revenge = function(){
var dialog, showBtn;
var gameKeyMap;
var oGun = {
canFire : true,
bulletsLeft: 0
};
/* This will control the enemies
coming soon
*/
var oEnemy = {
};
/* The Game Object */
var oGame = {
sound : true, /* Sound Toggler */
score : 0, /* Init Score to 0 */
lives : 3, /* Init Lives to 3 */
notShootable : ['score'], /* Things (ID's) we can't shoot */
configured: false, /* Internal Flag (not used yet) */
hitDiv: null, /* Handle to the Hit Div (red overlay) */
bulletWarningDisplayed: false /* Has Player *ever* ran out of ammo? */
};
/* Return Public Object */
return{
enemyShot : function (){
alert("you got him");
},
enemyBegin : function(){
/* Get Center of Gamefield */
enemyActor = new YAHOO.ext.Actor('enemy');
enemyActor.startCapture(true);
enemyActor.setXY(getEl("enemies").getXY());
enemyActor.setVisible(true);
enemyActor.moveTo(100,200,true);
enemyActor.play();
},
/**
* Updates the gun position with the exact
* position of the mouse cursor (only the X value).
* @public
* @pararm {object} e The Event Object
* @return void
*/
updateGunPosition : function(e){
if(this.canMove(e.clientX)){
getEl("gun").setX(e.clientX-getEl("gun").getWidth()/2);
}
},
/**
* This function handles the events that
* occured within the 'gamefield' DIV
* @public
* @pararm {object} e The Event Object
* @return void
*/
mouseHandler : function(e){
switch(e.type){
case "click":
this.fireGun(e);
break;
case "mousemove":
this.updateGunPosition(e);
break;
}
},
/**
* This function will fade IN the help legend
* that will show help tips for the user.
* @public
* @see #hideLegend()
* @return void
*/
showLegend : function(){
/* Fade In Help Legend Div */
},
/**
* This function will fade OUT the help legend.
* @see #showLegend()
* @public
* @return void
*/
hideLegend : function(){
/* Hide the Help Legend Div */
},
/**
* This function handles the keypresses that
* occur while the game is being played.
* @see #assignKeyListeners
* @public
* @pararm {object} e The amount of ammo to add
* @return void
*/
handleKeyPress: function(e){
switch(e){
/* ESC, q - quite game */
case 27:
this.quitGame();
break;
/* p - pause game */
case 80:
break;
/* f - Debug fn For function testing */
case 70:
this.youreHit();
//
break;
}
},
/**
* This function is called when you are shot. A red
* overlay is animated briefly over the gamefield.
* The number of lives is also reduced.
* @public
* @return void
*/
youreHit : function(){
var container = YAHOO.ext.Element.get("hitDiv");
/* Make sure we always get the latest position of
the gamefield DIV.
Yo' Thx Animal
*/
container.setBox(getEl("gamefield").getBox());
container.setVisible(true);
container.setOpacity(1);
container.setOpacity(0, true, .35, function(){
container.hide();
});
oGame.lives -= 1;
if(oGame.lives<=0){
this.gameOver();
}
return;
},
/**
* Add a specified amount of ammo to the display and the gun.
* @public
* @return void
*/
gameOver : function(){
/* Done , Show High Score Table */
alert("Game Over");
},
/**
* This function checks to see if the cursor
* is within the gamefield.
* @public
* @pararm {integer} posX The X position of the cursor
* @return boolean true if you can move, false if you cannot
*/
canMove : function(posX){
/* Check Left Boundary */
if( (posX-30 > getEl("gamefield").getLeft()) && (posX+30 < getEl("gamefield").getRight()) ) {
return true;
}
return false;
},
/**
* This function updates the score div with
* the value in oGame.score
* @return void
*/
drawScore : function(){
var s = getEl("score-amount").dom;
s.innerHTML = oGame.score;
},
/**
* Create KeyMap for the entire document.
* Currently, the following keys are being mapped:
* p - pause, space - unused, f - function testing, esc - quit
* @private or @public
* @return void
*/
assignKeyListeners : function(){
/* [space] [esc] [p] [f]*/
if(!gameKeyMap){
gameKeyMap = new YAHOO.ext.KeyMap(document, {
key: [32, ,27, 80, 70],
fn: this.handleKeyPress,
scope: this
});
/* mouse listeners [Could these be combined somehow?] */
getEl("gamefield").on("click", this.mouseHandler, this);
getEl("gamefield").on("mousemove", this.mouseHandler, this);
getEl("gamefield").on("mouseout", this.mouseHandler, this);
getEl("enemy").on("click", this.mouseHandler, this);
}
},
/**
* Adjusts the players score
* @public
* @pararm {integer} amt The amount to add to score
*/
adjustScore : function(amt){
oGame.score =+ amt;
this.drawScore();
},
/**
* This function will show a bullet hole at the
* exact location the user clicked.
* @public
* @pararm {object} e The event object
*/
showBulletHole : function(e){
/* Clone Div [Animals's Code] */
var cn = getEl("bullets").dom;
var oClone = cn.cloneNode(true);
/* Insert into DOM under its own, unique, generated ID */
YAHOO.util.Dom.generateId(oClone);
getEl("gamefield").appendChild(oClone);
oClone = getEl(oClone); // now it's in the document, we can wrap it with an Element
oClone.setWidth(28, false);
/* Re-position it */
oClone.setX(e.clientX-10);
oClone.setY(e.clientY-10);
},
/**
* Determines whether or not the player has
* any bullets left.
* @public
* @return {boolean}
*/
hasBullets : function(){
if(oGun.bulletsLeft > 0){
return true;
}
return false;
},
/**
* Determines whether or not the target id is
* shootable. A list of invalid objects are
* stored in oGame.notShootable array
* @public
* @return {boolean}
*/
isItShootable : function(t){
for(var i=0; i<oGame.notShootable.length; i++){
if(oGame.notShootable[i] == t){
if(oGame.notShootable[i] == "gun"){
this.youreHit();
}
return false;
}
}
return true;
},
/**
* Removes a bullet image from the bullet holder DIV
* @public
*/
removeBullet : function(){
var d = getEl("bulletHolder").dom;
var oldbull = d.firstChild;
d.removeChild(oldbull);
},
/**
* This function animates the bullet image from the
* tip of the gun, to the position where the user
* clicked the mouse.
* @public
* @pararm {object} e The Event Object
*/
animateBullet : function(e){
/* Get Position of bullet container */
var bcBox = getEl("bullet-container").getBox();
var bullet = getEl("bulletammo").setBox(bcBox);
var bullet = getEl("bulletammo").setVisible(true);
bullet.moveTo(e.clientX, e.clientY, true, .07 , function(){bullet.setVisible(false); } , null);
},
/**
* This function grabs a handle to the bullet holder DIV
* and replaces the inner html with the innerHTML of the
* No More Bullets DIV to show an image warning the player
* that they are out of bullets.
* @public
* @return {void}
*/
showNoMoreBullets : function(){
var bh = getEl("bulletHolder").dom;
bh.innerHTML = getEl("outOfBullets").dom.innerHTML;
oGame.bulletWarningDisplayed = true;
},
/**
* This function performs a number of actions that
* have to do with the user firing the gun (clicking)
* @public
* @pararm {object} e The event object
*/
fireGun : function(e){
/* Use this because e is a standard browser event */
var targetId = YAHOO.util.Event.getTarget(e).id ;
/* Can we even fire our gun? */
if(oGun.canFire && this.hasBullets() ) {
/* Can we shoot the target? */
if(this.isItShootable(targetId)){
/* Decrease Bullet Count */
this.removeBullet();
oGun.bulletsLeft -= 1;
/* Out of ammo yet? */
if(oGun.bulletsLeft == 0){
this.showNoMoreBullets();
}
/* Animate the bullet */
this.animateBullet(e);
/* No more firing for a couple seconds */
oGun.canFire = false;
var v = -128
var g = getEl("gun");
var t = setInterval(function() {
g.setStyle("backgroundPosition", v + "px");
v-=128;
if(v < (-128*12)) {
clearInterval(t);
}
}, 80); // You might want to try other intervals, or even a bigger sprite with more "frames"
/* Bullet Hole */
this.showBulletHole(e);
/* BOOM */
this.EvalSound("boom");
/* Bullet Hole */
this.showBulletHole(e);
/* Ok, let them fire again */
oGun.canFire = true;
}
}
},
/**
* Restarts the game. TO DO
* @public
*/
restartGame : function(){
oGame.lives = 3;
oGun.bulletsLeft = 0;
this.init();
},
/**
* This function creates the splash dialog if not already
* created. Also, we attach some event handlers to some
* elements within the tabs.
* @public
* @return {void}
*/
showSplash : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.BasicDialog("splash-dlg", {
modal:true,
autoTabs:true,
width:341,
animateTarget: "bulletHolder",
height:188,
closable: false,
shadow:true,
minWidth:315,
minHeight:120
});
}
getEl("playButton").on("click",dialog.hide,dialog);
dialog.setTitle("Welcome to Slocum's Revenge!");
//dialog.on('hide', this.enemyBegin);
dialog.show();
},
/**
* This function positions the bullet holder DIV
* to the upper left hand corner of the GameField.
* @public
* @return void
*/
positionElements : function(){
/* Position the Bullet Holder */
var bh = getEl("bulletHolder");
var tX = getEl("gamefield").getX() + 10;
var tY = getEl("gamefield").getY() + 10;
bh.setX(tX);
bh.setY(tY);
},
/**
* Add a specified amount of ammo to the display and the gun.
* Also checks to see if the No More Ammo message has been
* displayed yet. If so, we wipe the image out, and insert
* our new bullets.
* @public
* @pararm {integer} amt The amount of ammo to add.
* @return {void}
*/
addAmmo : function(amt){
if(oGame.bulletWarningDisplayed == true){
getEl("bulletHolder").dom.innerHTML = "";
}
for(var i=0; i<amt; i++){
oConfig = {
tag : "img",
src : "images/shell.gif"
};
getEl("bulletHolder").createChild(oConfig);
}
oGun.bulletsLeft += amt;
},
/**
* Ititializes the game. Calls other functions.
* @public
*/
init : function(){
this.showSplash();
this.assignKeyListeners();
this.adjustScore(0);
this.positionElements();
this.addAmmo(10);
},
/**
* This function toggles the sound
* @public
*/
toggleSound : function() {
oGame.sound = (oGame.sound != true ? true : false );
},
/**
* This functions plays a sound object if
* the user has QuickTime installed. If not,
* the function should fail silently.
* @public
* @pararm {object} snd Sound Object
* @return {boolean} false Sound failed
*/
EvalSound : function(snd){
if(!oGame.sound) return false;
try {
var thissound = document.getElementById(snd);
thissound.Play();
} catch(err) {
/*YAHOO.print(err);*/
return false;
}
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(Revenge.init, Revenge, true);
So I actually have a lot done, except for the important part - the enemy, lol
If you , or anyone else needs the graphics, let me know.
I have the enemy sprites done ( the shooting, to dying).
So it's a matter of :
1. Placing the enemy at a random position
2. moving him
3. counting to 1 or so
4 if still there, he fires towards the player ( using same algo as I used to fire bullet )
5. or if he is shot, increase level = level + 1 , level = 10 , = win source code back! :)
Sorry for the brutal psuedocode.