Question

我希望从红色方块射出的子弹在任何地方都能看到蓝色方块，但它不会朝向蓝色方块，我该怎么办？

我尝试了Math.atan2(100, 100)/ Math.PI * 180;，结果是45°是正确的，但是它向相反的方向射击而不是向蓝色方块射击，

我很困惑请帮忙，对不起任何错误谢谢

<!DOCTYPE html>

<head>

    <meta charset="UTF-8"/>
    <title> just my game </title>
</head>


<body>
    <canvas id="canvas" width="1000" height="1000"></canvas>

    <script>


        /* LEGEND 

        red : red square 
        blue : blue square 
        Dim : width or hight (px) (dimention)
        posX : position on the X axis 
        posY : position on the Y axis 
        Inc : increment (known as speed) 
        aimAng : aiming angle

        */

            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var redDim = 20;          
            var redPosX = 200;
            var redPosY = 200;              
            var redPosXInc = 1;
            var redPosYInc = 1;             
            var blueDim = 15;
            var bluePosX = 300;
            var bluePosY = 300;                 
            var bulletDim = 6;
            var bulletPosX = bluePosX  ;        
            var bulletPosY = bluePosY  ;                
            var bulletPosXInc;
            var bulletPosYInc;
            var aimAng; 
            var bullet = false; 

        //filling the canvas 

                animate();          

            function animate () {       
                setInterval(print, 25);

            }   
            function print () {

            //clearing the canvas 
                context.clearRect(0, 0, canvas.width, canvas.height);

            //printing the canvas 
                context.fillStyle="#c1d9ff";
                context.fillRect(0, 0, canvas.width, canvas.height);                    

            //printing red square   
                context.fillStyle="red";                
                context.fillRect(redPosX, redPosY, redDim, redDim);             

            //printing blue square  
                context.fillStyle="blue";
                context.fillRect(bluePosX, bluePosY, blueDim, blueDim);

            //calculating the aiming angle between the two squares  
                aimAng = Math.atan2(redPosY - bluePosY, redPosX - bluePosX) / Math.PI * 180;

            //calculating the increment of the position of the bullet (if the bullet is not active)         
                if (bullet == false) { 
                    bulletPosXInc = Math.cos(aimAng)*5;
                    bulletPosYInc = Math.sin(aimAng)*5;    
                    bullet = true;  
                }
            //printing the bullet   
                context.fillStyle="black";
                context.fillRect(bulletPosX, bulletPosY, bulletDim, bulletDim);

            //changing position of the bullet for the next print                
                bulletPosX = bulletPosX + bulletPosXInc;
                bulletPosY = bulletPosY + bulletPosYInc;

            }   


    </script>

</body>

Answer 1

Math.sin和Math.cos采用弧度，因此您无需将结果转换为度数！所以忽略* 180 / PI位

要获得更流畅，更有效的动画制作方法，请在系统准备好绘制帧时尝试调用动画帧。使用

<head>
    <meta charset="UTF-8"/>
    <title> just my game </title>
</head>


<body>
    <canvas id="canvas" width="1000" height="1000"></canvas>
    <script>
        /* LEGEND 

        red : red square 
        blue : blue square 
        Dim : width or hight (px) (dimention)
        posX : position on the X axis 
        posY : position on the Y axis 
        Inc : increment (known as speed) 
        aimAng : aiming angle

        */

            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var redDim = 20;          
            var redPosX = 200;
            var redPosY = 200;              
            var redPosXInc = 1;
            var redPosYInc = 1;             
            var blueDim = 15;
            var bluePosX = 300;
            var bluePosY = 300;                 
            var bulletDim = 6;
            var bulletPosX = bluePosX  ;        
            var bulletPosY = bluePosY  ;                
            var bulletPosXInc;
            var bulletPosYInc;
            var aimAng; 
            var bullet = false; 
            var speed = 6;

            //filling the canvas 

                animate();          

            function animate () {   
                window.requestAnimationFrame(print);    
            }   
            function print () {

            //clearing the canvas 
                context.clearRect(0, 0, canvas.width, canvas.height);

            //printing the canvas 
                context.fillStyle="#c1d9ff";
                context.fillRect(0, 0, canvas.width, canvas.height);                    

            //printing red square   
                context.fillStyle="red";                
                context.fillRect(redPosX, redPosY, redDim, redDim);             

            //printing blue square  
                context.fillStyle="blue";
                context.fillRect(bluePosX, bluePosY, blueDim, blueDim);

            //calculating the aiming angle between the two squares in radians 
                aimAng = Math.atan2(redPosY - bluePosY, redPosX - bluePosX) ;

            //calculating the increment of the position of the bullet (if the bullet is not active)         
                if (bullet == false) { 
                    bulletPosXInc = Math.cos(aimAng)*speed ;
                    bulletPosYInc = Math.sin(aimAng)*speed ;    
                    bullet = true;  
                }
            //printing the bullet   
                context.fillStyle="black";
                context.fillRect(bulletPosX, bulletPosY, bulletDim, bulletDim);

            //changing position of the bullet for the next print                
                bulletPosX = bulletPosX + bulletPosXInc;
                bulletPosY = bulletPosY + bulletPosYInc;

                window.requestAnimationFrame(print);
            }   


    </script>

</body>

完整代码：

{{1}}

动画瞄准角度atan2

1 个答案: