Question

我正在使用javascript canvas创建一个小学校项目。我有功能问题。添加后，没有任何东西会加载。就像画布不起作用。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="ctx" width="800" height="500" style="border:1px solid #000000;background-image:url('space-1.jpg')"></canvas>


        <script>  
            var ctx = document.getElementById("ctx").getContext("2d");
            ctx.font = '30px Arial';
            ctx.fillStyle = 'white';

            document.onkeydown = function(event){
                if (event.keyCode === 68 && falcon.x < 600 ) { //d
                    falcon.x += 10;
                    bullet.x +=10;
                } 
                if (event.keyCode === 83 && falcon.y < 360){ //s
                    falcon.y +=10;
                }
                if (event.keyCode === 65 && falcon.x > 0) { //a
                    falcon.x -=10;
                    bullet.x -=10;
                }
                if (event.keyCode === 87 && falcon.y > 0) { //w
                    falcon.y -=10;

                }
                if (event.keyCode === 32) {
                    fire = setInterval(fireBullet,10);
                    if(bullet.x < 0) {
                        bullet.x = falcon.x;
                        clearInterval(fire);
                    }
                }
            }; 

            falcon = {
                x : 10,
                y : 10,
                img : 'falcon1.png'
            };

            bullet = {
                x : falcon.x,
                y : falcon.y+55,
                img : 'bullet.png'
            };

            enemy = {
                x: 0,
                y : 0,
                img : 'enemy_1.png'
            };

            setInterval(update,10);

            function update(){ 
                /* Clear rect*/
                ctx.clearRect(0,0,800,500);

                /*Draw Falcon and coords*/
                drawEntity(falcon.x, falcon.y, falcon.img);
                ctx.fillText("X : " + falcon.x + " Y : " + falcon.y, 600,480);

                /* Bullet moving with falcon and fire */
                drawEntity(bullet.x, bullet.y, bullet.img);
                bullet.y = falcon.y+55;

                /* Enemy*/
                drawEntity(enemy.x, enemy.y, enemy.img);

            }

            function drawEntity(x, y, img){
                var Img = new Image();
                Img.src = img;             
                ctx.drawImage(Img,x, y);
            }

            function fireBullet(){
                bullet.x -=10;

            }  
            function testCollision(entity1, entity2) {
                var distance = getDistace(entity1, entity2);
                return distance < 2;
            }
        </script>
    </body>
</html>

此代码工作正常，但在我添加此代码后，我需要它进行冲突我甚至试图将函数内部的代码转换为testCollision函数，它不会有帮助。

    function getDistance(entity1, entity2) {
        var vx = entity1.x - entity2.x;
        var vy = entity1.y - entity2.y;
        return Math.Sqrt(vx*vx+*vy*vy);
    }

我的所有实体都没有渲染我上传的图片。在添加之前

添加后

有人可以帮忙吗？

Answer 1

你的函数 getDistance 应该返回：

return Math.sqrt(vx*vx+vy*vy);

希望这有帮助。

Javascript Canvas - 使所有实体消失的功能

1 个答案: