时间戳

首页 > 解决方案 > 鼠标单击时字符不会移动到正确的目的地/错误的角度 - html画布

javascript - 鼠标单击时字符不会移动到正确的目的地/错误的角度 - html画布

问题描述

编辑：已解决

我正在制作一个角色通过右键单击移动的游戏。角色应该通过右键单击画布缓慢移动/行走（而不是传送）到您设置的目的地。问题是我使用了一些数学来确定角色应该朝向的角度，并且还编写了一个直接在目标上绘制一个圆圈的函数（尝试调试）。问题是，我点击一个位置，目标圆圈显示在另一个位置，角色正走向另一个 3d 位置。我经验不足，也不知道是什么原因造成的。我使用的数学几乎是复制粘贴的，因为我不太了解它们是如何工作的，所以这也是一个问题。

问题几乎是这张图片https://imgur.com/1lm2haM

编辑：这张图片是我试图完成的https://imgur.com/amQgGxM

        //VARIABLES_________________________________
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var WIDTH = 640;
        var HEIGHT = 360;
        var CANVAS_WIDTH = 640;
        var CANVAS_HEIGHT = 360;
        var renderList = [];

        var selfX = 250;
        var selfY = 100
        var frameX = 0;
        var playerSpdX = 0;
        var playerSpdY = 0;
        var drawDest = false;
        var destX;
        var destY;

        var Img = {};
        Img.player = new Image();
        Img.player.src = "Human_walk_spritesheet.png";
        Img.map = new Image();
        Img.map.src = "maptest.png";
        Img.bullet = new Image();
        Img.bullet.src = "bullet.png";


        renderList.push({img: Img.player, spdX: playerSpdX, spdY: playerSpdY, currX: selfX, currY: selfY});

        //CODE______________________________________
        function render(){
            ctx.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);

            ctx.drawImage(Img.map, 0, 0);

            for(i in renderList){
                var renderObject = renderList[i];


                renderObject.currX += playerSpdX;
                renderObject.currY += playerSpdY;

                selfX = renderObject.currX;
                selfY = renderObject.currY;

                ctx.drawImage(renderObject.img, frameX, 0, 120, 218, selfX, selfY, renderObject.img.width/31/8, renderObject.img.height/8);
            }
            if(drawDest)
            ctx.drawImage(Img.bullet, destX, destY);

            updateAnimation();
        }

        setInterval(render, 100);


        document.onmousedown = function click(event){
            if(event.button == 2){//right click
                clickX = event.clientX;
                clickY = event.clientY;

                clickX -= selfX;
                clickY -= selfY;

                aimAngle = Math.atan2(clickY, clickX) / Math.PI * 180;
                var spdX = Math.cos(aimAngle/180*Math.PI)*10;
                var spdY = Math.sin(aimAngle/180*Math.PI)*10;
                setPlayerSpeed(spdX, spdY);
                drawDestinationDot(clickX, clickY);
            }
        }



        document.oncontextmenu = function(mouse){
            mouse.preventDefault();
        }


        function setPlayerSpeed(spdX, spdY){
            playerSpdX = spdX;
            playerSpdY = spdY;
        }

        function drawDestinationDot(x, y){
            drawDest = true;
            destX = x;
            destY = y;
        }

标签： javascripthtmlhtml5-canvas

解决方案

所以在我的帖子合并前后花了超过3天的时间，我终于找到了问题所在。部分原因是我没有发布所有代码，但由于堆栈溢出表明我试图只发布相关代码以免混淆那些试图帮助我的人，而且我认为我删除的这部分不相关但它是。我几乎是一个新手。所以整个问题是我没有注意的画布调整大小。我复制了我的代码，只使用了简单的矩形而不是图像，它工作得很好，因为我也忘了添加画布调整大小。而已：

resizeCanvas();
        function resizeCanvas(){
            CANVAS_WIDTH = window.innerWidth - 4;
            CANVAS_HEIGHT = window.innerHeight - 4;

            let ratio = 16 / 9;
            if(CANVAS_HEIGHT < CANVAS_WIDTH / ratio)
                CANVAS_WIDTH = CANVAS_HEIGHT * ratio;
            else
                CANVAS_HEIGHT = CANVAS_WIDTH / ratio;

            canvas.width = WIDTH;
            canvas.height = HEIGHT;

            canvas.style.width = '' + CANVAS_WIDTH + 'px';
            canvas.style.height = '' + CANVAS_HEIGHT + 'px';
        }

感谢您帮助 Loïc。

推荐阅读