可点击的敌人

时间:2012-10-14 15:53:49

标签: javascript html mouseevent onmouseclick

嗨我是全新的javascript,需要help.im制作一个HtML javascript游戏。我只是想问一下如何让我的敌人可以点击?我已成功为我的游戏创造了我的敌人,但目前他们从游戏屏幕的顶部下来并从底部退出。如果玩家触及任何敌人,那么它会进入游戏结束但我希望玩家能够点击敌人然后继续进行游戏。我已经尝试了几个星期而且我迷失了。

此外我的播放器目前正由鼠标控制,因为鼠标是播放器。

我是否需要更改我的碰撞测试?我只是不知道如何让玩家能够点击敌人。我是否需要注册像onmouseclick等“点击”功能?

我正在使用:

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

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

提前致谢:)

这是播放器移动鼠标(播放器)时的功能。它的工作原理是我的播放器由鼠标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;

            }

    }

和鼠标:

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

1 个答案:

答案 0 :(得分: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坐标,每个坐标都有一个半径。然后,只需检查在圆心和鼠标坐标之间绘制的直线是否小于圆的半径。使用毕达哥拉斯定理来找出长度。