1

我试图在我的游戏中获得鼠标输入；任何帮助，将不胜感激。

我在我的 init() 函数中调用事件侦听器，并且我有 mouseMoved() 和 mouseClicked() 函数。但我只是无法得到任何回应。

（我被要求为这个项目制作一个 jsFiddle，所以就在这里。由于某种原因，它不会渲染图像。但是一旦有输入，左上角应该有显示鼠标坐标的文本。另外，当你单击画布，您应该会收到警报。）

var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');
var canvasEntities = document.getElementById('entities');
var entitiesCtx = canvasEntities.getContext('2d');

var isPlaying = false;

var player;
var enemy;

var mouseX, mouseY;

var playerImg = new Image();
playerImg.src = 'http://placekitten.com/g/50/50';
var enemyImg = new Image();
enemyImg.src = 'http://placehold.it/50x50';

window.onload = init;
var requestAnimFrame =  window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimationFrame ||
                        function(callback) {
                            window.setTimeout(callback, 1000 / 60);
                        };






// main functions
function init() {

    console.debug('init()');

    player = new Entity(250,        // xpos
                        225,         // ypos
                        0,          // xd
                        0,          // yd
                        3,          // speed
                        50,         // width
                        50,         // height
                        playerImg,  // imgSrc
                        true);      // player?


    enemy = new Entity(500,225,0,0,1,25,25,enemyImg,false);

    canvasBg.addEventListener('mousemove', mouseMoved, false);
    canvasBg.addEventListener('click', mouseClicked, false);

    startLoop();
}

function loop() {
   // console.debug('game loop');
    if(isPlaying){
        update();
        draw();
        requestAnimFrame(loop);
    }
}

function startLoop() {
    isPlaying = true;
    loop();
}

function stopLoop() {
    isPlaying = false;
}

function clearAllCtx() {
    ctxBg.clearRect(0, 0, canvasBg.width, canvasBg.height);
    Entity.clearCtx();
}

function draw(){
    clearAllCtx();
    player.draw();
    enemy.draw();
}

function update(){
    player.update();
}
// end of main functions





// input handling
function  mouseMoved(e) {
    mouseX = e.layerX - canvasBg.offsetLeft;
    mouseY = e.layerY - canvasBg.offsetTop;
    document.getElementById('mouseCoors').innerHTML = 'X: ' + mouseX + ' Y: ' + mouseY;
}

function mouseClicked(e) {
    alert('You clicked the mouse!');
}
// end of input handling





// Entity functions
function Entity(xpos, ypos, xd, yd, speed, width, height, imagesrc, player) {
    this.xpos = xpos;
    this.ypos = ypos;
    this.xd = xd;
    this.yd = yd;
    this.speed = speed;
    this.width = width;
    this.height = height;
    this.imagesrc = imagesrc;
    this.player = player;
}

Entity.clearCtx = function(){
    entitiesCtx.clearRect(0,0,canvasBg.width,canvasBg.height);
};

Entity.prototype.draw = function () {
    entitiesCtx.drawImage(this.imagesrc, this.xpos, this.ypos);
};

Entity.prototype.update = function () {
    this.xpos += this.xd;
    this.ypos -= this.yd;
};
// end of Entity functions
4

1 回答 1

0

所以发生了一些事情，首先小提琴加载设置不正确，一旦我将其更改为不包裹身体，一切正常。

您遇到的实际问题是由于背景画布位于实体画布下方，因此它无法获取任何鼠标事件。

一种解决方案是使用指针事件并在实体画布上将其设置为无pointer-events: none。

现场演示

#entities {
    margin: -500px auto;
    pointer-events: none;
}

如果您需要更广泛的浏览器支持，另一种选择是让entities画布捕获鼠标事件。

选项 2 的现场演示

于 2013-08-08T02:03:48.533 回答