Как правильно получить координаты мыши на холсте с изменяемым размером?

Я создал игру Pong на JavaScript, используя элемент canvas. Просто чтобы расширить свои знания, я также добавил функцию для изменения размера холста следующим образом:

window.addEventListener("resize", OnResizeCalled, false); 

function OnResizeCalled() { 
    canvas.style.width = window.innerWidth + 'px'; 
    canvas.style.height = window.innerHeight + 'px'

    var gameWidth = window.innerWidth; 
    var gameHeight = window.innerHeight; 
    var scaleToFitX = gameWidth / width; 
    var scaleToFitY = gameHeight / height; 

    var currentScreenRatio = gameWidth / gameHeight; 
    var optimalRatio = Math.min(scaleToFitX, scaleToFitY); 

    if (currentScreenRatio >= 1.77 && currentScreenRatio <= 1.79) { 
        canvas.style.width = gameWidth + "px"; 
        canvas.style.height = gameHeight + "px"; 
    } 
    else { 
        canvas.style.width = width * optimalRatio + "px"; 
        canvas.style.height = height * optimalRatio + "px"; 
    } 
}

а затем я центрировал холст так:

canvas {
        position: absolute;
        top: 0px;
        left: 0px;
        transform: translate(-50%, -50%);*/
}

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

Я закодировал движение мыши так:

function playerBatMove(event) {
        mouseY = event.clientY - canvas.offsetTop;
        if (mouseY <= 19) {mouseY = 20};
        if (mouseY+playerBat.batHeight >= height-19) {mouseY = (height-20)-playerBat.batHeight};
        playerBat.y = mouseY; 
};

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

Есть ли проблема с тем, как я получаю координаты мыши, или в моей функции изменения размера есть ошибки? Любая помощь приветствуется.

Спасибо. Вы можете найти весь код здесь Игра в понг на CodePen

РЕДАКТИРОВАТЬ: я объявил ширину и высоту переменных в начале кода.

var height = 500;
var width = 700;

javascript canvas html css pong
person Delta_Shadow    schedule 05.06.2016    source источник
comment
Пожалуйста, уточните в вопросе, где вы определяете width в строке var scaleToFitX = gameWidth / width; height есть аналогичная проблема. Обратите внимание, что все предупреждения в ручке кода затрудняют просмотр (компьютер всегда выигрывает).   -  person Mark Schultheiss    schedule 06.06.2016
comment
Я отредактировал вопрос, а также изменил ссылку на ручку кода. Теперь вы можете читать его без перерыва.   -  person Delta_Shadow    schedule 07.06.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я отредактирую комментарий, чтобы вам было легче понять

function playerBatMove(event) {
    mouseY = event.clientY* (newHeight/oldHeight) - canvas.offsetTop;
     //the scale factor is newHeight/oldHeight, or how much you multiplied
     // or you can just say 1/scaleY

    playerBat.y = mouseY; 
};

то, что вы говорите здесь, это то, что вы хотите принять событие мыши. Однако берите его только так, как если бы он не был масштабирован. причина, по которой canvas.offsetTop появляется позже, заключается в том, что offsetTop вообще не масштабируется

ТАКЖЕ ПОМНИТЕ: удалите свой файл css, убедитесь, что он работает, затем добавьте свой файл css, потому что вы преобразовываете свои вещи, в которых я не уверен.

person Qaddura    schedule 05.06.2016
comment
Итак, я попытался сделать то, что вы сказали. Я умножил scaleToFitX на mouseY в событии mousemove, но эффекта все равно нет. Я делаю это неправильно? - person Delta_Shadow; 05.06.2016
comment
Вы удалили преобразование css? - person Qaddura; 12.06.2016