javascript - 可点击的敌人

Question

大家好，我是 javascript 的新手，需要帮助。我正在制作一个 HtML javascript 游戏。我只是想问一下如何让我的敌人可以点击？我已经成功地为我的游戏创建了我的敌人，但目前他们从游戏屏幕的顶部下来并从底部退出。如果玩家接触到任何敌人，那么游戏就会结束，但我希望玩家能够点击敌人然后继续游戏。我已经尝试了几个星期了，但我迷路了。

另外，我的播放器目前是由鼠标控制的，因为鼠标就是播放器。

我需要更改我的 collison 测试吗？？我只是不确定如何让玩家能够点击敌人。我是否需要注册一个“点击”功能，如 onmouseclick 等？

我正在使用:

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

谢谢任何帮助都会很棒!!只需要一点帮助就可以朝着正确的方向前进。

提前致谢:)

这是玩家移动鼠标(player)时的函数。它的工作原理是我的播放器由鼠标移动控制:

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

然后有一个在用户点击时调用的方法，并逐一遍历敌人列表。对于每个敌人，调用一个“ HitTest ”函数来检查用户的 (x,y) 坐标 - 在鼠标上 - 是否在敌人的方 block 内。

如果选择了任何形状，则将它们设置为 true，并在下一个绘制周期中选择以不同方式绘制或根本不绘制(即被摧毁)的敌人？

如果敌人是圆形的，那么您将需要一个 x,y 坐标和每个敌人的半径。然后，简单地检查圆心和鼠标坐标之间绘制的直线是否小于圆本身的半径。使用勾股定理求出长度。