Clickable enemies

Question

Hi im totally new to javascript and need help.im making an HtML javascript game. I just wanted to ask how do i get my enemies to be clickable?? i have managed to successfully create my enemies for my game but currently they come down from the top of the game screen and exit at the bottom. If the player touches any of the enemies then it goes to game over but i want the player to be able to click on the enemies then proceed to game over instead. Ive been trying for a couple of weeks now and im lost.

Also my player currently is being controlled by the mouse, as in the mouse is the player.

Do i need to change my collison test?? im just not sure how to make the player be able to click on the enemies. do i need to register a 'click' function like onmouseclick etc?

im using:

window.addEventListener("mousedown",onDown,false);  
window.addEventListener("mousemove",onMove,false);
window.addEventListener("mouseup",onUp,false);  

thanks any help would be great!! just need a sbit of help to go in the right direction.

Thanks in advance :)

this is the function for when the player is moving the mouse (player). it works as my player is controlled by the mouse movememt:

function onMove(e) {
                if (!e) var e = window.event;

                //get mouse position

                var posx = 0;
                var posy = 0;

                if (e.pageX || e.pageY)     {
                    posx = e.pageX;
                    posy = e.pageY;
                }

                else if (e.clientX || e.clientY)    {
                    posx = e.clientX + document.body.scrollLeft
                        + document.documentElement.scrollLeft;
                    posy = e.clientY + document.body.scrollTop
                        + document.documentElement.scrollTop;
                }

                var totalOffsetX = 0;
                var totalOffsetY = 0;
                var currentElement = canvas;

                do{
                    totalOffsetX += currentElement.offsetLeft;
                    totalOffsetY += currentElement.offsetTop;
                }
                while(currentElement = currentElement.offsetParent)

                mouseX = posx - totalOffsetX;
                mouseY = posy - totalOffsetY;

            }

    }

and for mouse up:

function onUp(e) {
            mouseDown = false;
        }

for enemies, i have done:

enemies = new Array();
            createEnemies();

and the function with the animations for the enemy objects (food and fruit items in the game) :

function createEnemies() {
            var enemy
            if(level>2 && Math.random()<0.2) {
                var breakfastItems =  Math.floor(Math.random() * breakfastsheets.length);
                var tmpAnimation = new Animation(breakfastsheets[breakfastItems],4,2)
                enemy = new Skull(tmpAnimation,Math.random()*(canvas.width-tmpAnimation.width),-tmpAnimation.height);
            } else if(level>3 && Math.random()<0.2) {
                var randomVegetable =  Math.floor(Math.random() * vegetablesheets.length);
                var tmpAnimation = new Animation(vegetablesheets[randomVegetable],4,2)
                enemy = new Skull(tmpAnimation,Math.random()*(canvas.width-tmpAnimation.width),-tmpAnimation.height);
            }else { 
                var randomFruit = Math.floor(Math.random() * enemysheets.length);
                var tmpAnimation = new Animation(enemysheets[randomFruit],4,2)
                enemy = new Skull(tmpAnimation,Math.random()*(canvas.width-tmpAnimation.width),-tmpAnimation.height);
            }

            enemy.setExplosionSound(explosionSoundPool);

            enemies.push(enemy);
        }

forgot to say that the 'Skull' thats in the enemies is this one: forget the missiles though im not using them.

function Skull (image, x,y, width, height) {
//call constructor of parent object
DisplayObject.call(this,'skull', image, x,y, width, height);

//initialise objects
this.img.play();
this.img.setLoop(true);
this.img.setRange(0,4);

//private variables
var dying = false;
var alive = true;
var speed = 5;

var explosionSound;

//public methods

this.update = function(game_area, missiles) { //game area is a Rect2d, missiles is an array of display objects.
    this.y+=speed;
    this.img.next();
    if(!dying && missiles) {
        for(var i = 0; i<missiles.length; i++) {
            if(Collision.test(missiles[i],this)) {
                missiles[i].kill();
                dying = true;
                this.img.setRange(4,8);
                this.img.setLoop(false);
                this.img.setFrame(0);
                //play explosion sound. 
                if(explosionSound) explosionSound.play(0.5);
            }
        }
    }

    if(Collision.isOutside(this,game_area) || (dying && !this.img.isPlaying())) {
        alive = false;
    }

}

//set a sound to be played when the enemy is hit.
this.setExplosionSound = function (soundPool) {
    explosionSound = soundPool;
}

this.isDying = function () { 
    return dying; 
}

this.isDead = function () { 
    return !alive; 
}

}

Skull.prototype = new DisplayObject();

Answer 1

Assuming the enemies are square objects that move around the screen,

What you can do is create a class for enemies that contain their current position with:

function newEnemy(){
   this.topLeftx = 'some random value'
   this.topLefty = 'some random value'
   this.bottomRightx = 'some random value'
   this.bottomRighty = 'some random value'
   this.isSelected = false;
   ...

}

Then have a method that is called when the user clicks, and goes through the list of enemies one by one. For each enemy, call a 'hit test' function that will check if the user's (x,y) coordinates -on the mouse- are inside the square of the enemy.

If any of the shapes are selected, then set them to true, and on the next draw cycle, have selected enemies drawn differently or not drawn at all i.e. destroyed?

If the enemies are circular then you will need an x,y coordinate with a radius for each one. Then, simply check to see if a line drawn between the center of the circle and the mouse coordinates are less than the radius of the circle itself. Use the Pythagorean theorem to find the lengths.