Кликабельные враги

Question

Привет, я совершенно новичок в javascript и нуждаюсь в help.im, делающем HTML-игру на JavaScript. Я просто хотел спросить, как заставить моих врагов быть кликабельными? Мне удалось успешно создать своих врагов для своей игры, но в настоящее время они спускаются с верхней части игрового экрана и выходят внизу. Если игрок касается любого из врагов, он переходит к игре, но я хочу, чтобы игрок мог нажимать на врагов, а затем перейти к игре. Я пытался пару недель, и я потерян.

Также мой игрок в настоящее время управляется мышью, так как в мышке находится игрок.

Мне нужно изменить мой тест коллизии? Я просто не уверен, как заставить игрока нажимать на врагов. мне нужно зарегистрировать функцию "click", например, onmouseclick и т. д.?

я использую:

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

спасибо любая помощь будет здорово!! просто нужна помощь, чтобы идти в правильном направлении.

Заранее спасибо:)

это функция, когда игрок двигает мышь (игрок). это работает, так как мой игрок управляется движением мыши:

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;

            }

    }

и для мыши вверх:

function onUp(e) {
            mouseDown = false;
        }

для врагов я сделал:

enemies = new Array();
            createEnemies();

и функция с анимацией для объектов противника (еда и фрукты в игре):

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);
        }

забыл сказать, что это "череп", который есть у врагов, такой: забудь о ракетах, хотя я их не использую.

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

Предполагая, что враги - это квадратные объекты, которые движутся по экрану,

То, что вы можете сделать, это создать класс для врагов, которые содержат свою текущую позицию с:

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;
   ...

}

Затем есть метод, который вызывается, когда пользователь щелкает, и просматривает список врагов один за другим. Для каждого врага вызовите функцию "проверка удара", которая проверит, находятся ли пользовательские (x,y) координаты на мышке внутри квадрата врага.

Если выбрана какая-либо из фигур, установите для нее значение true, и в следующем цикле прорисовки выбранные враги нарисованы по-другому или не нарисованы вообще, т.е. уничтожены?

Если враги круглые, то вам понадобится координата x, y с радиусом для каждого. Затем просто убедитесь, что линия, проведенная между центром окружности и координатами мыши, меньше радиуса самой окружности. Используйте теорему Пифагора, чтобы найти длины.