Question

我使用canvas元素在JavaScript中创建了一个Pong游戏。为了增加我的知识，我还附上了一个调整画布大小的功能：

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

除了这个鼠标问题，其他一切都很好......甚至图形也能很好地扩展。

我获取鼠标坐标的方式有什么问题，或者我的调整大小功能有一些错误？任何帮助表示赞赏。

感谢。您可以在Pong game on CodePen

找到完整的代码

编辑：我已经在代码的开头声明了变量width和height。

var height = 500;
var width = 700;

Answer 1

我会编辑评论，以便您更容易理解

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文件，因为你正在改变你的东西，这是不太确定。

如何在可调整大小的画布中正确获取鼠标坐标？

1 个答案: