Question

我为学校和我的数字评估建立了一个网站。我的javascript游戏需要一只手，它正在<canvas>元素中编码。所以，我已经让这个小型无人机由＆＃34;前进＆＃34;，＆＃34;左＆＃34; ，＆＃34;对＆＃34; ＆安培; ＆＃34;背面＆＃34;用于移动无人机的按钮，因为我的背景是一个平面的2d图像，上面有墙壁我已经制作了100％透明的盒子并将它们放在墙壁区域上以模仿那里的墙壁。

我无法在IF语句中找到任何帮助，无人机接触隐形盒，将其放回到43X 110Y ...如果您认为可以提供帮助，代码如下！：）

（MyGamePiece是无人机，myHitBox是不可见的图像。）

   <style>
    canvas {
        border:1px solid #d3d3d3;
        background-color: #f1f1f1;
    }
    </style>
    </head>
    <body onload="startGame()">
    <script>

    var myGamePiece;
    var myBackground;
    var myHitBox;
    var myHitBox1;
    var myHitBox2;
    var myHitBox3;
    var myHitBox4;
    var myHitBox5;

    function startGame() {
        myGamePiece = new component(50, 50, "img/forward.gif", 43, 110, "image");
        myHitBox = new component(275, 20, "img/hitbox.png", 250, 169, "image");
        myHitBox1 = new component(30, 100, "img/hitbox.png", 250, 170, "image");
        myHitBox2 = new component(280, 25, "img/hitbox.png", 0, 80, "image");
        myHitBox3 = new component(30, 100, "img/hitbox.png", 120, 80, "image");
        myHitBox4 = new component(145, 25, "img/hitbox.png", 375, 80, "image");
        myHitBox5 = new component(30, 100, "img/hitbox.png", 375, 0, "image");
        myBackground = new component(650, 270, "img/MAP.jpg", 0, 0, "image");
        myGameArea.start();
    }


    var myGameArea = {
        canvas : document.createElement("canvas"),
        start : function() {
            this.canvas.width = 650;
            this.canvas.height = 270;
            this.context = this.canvas.getContext("2d");
            document.body.insertBefore(this.canvas, document.body.childNodes[0]);
            this.frameNo = 0;
            this.interval = setInterval(updateGameArea, 20);
            },
        clear : function() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        },
        stop : function() {
            clearInterval(this.interval);
        }
    }

    function component(width, height, color, x, y, type) {
        this.type = type;
        if (type == "image") {
            this.image = new Image();
            this.image.src = color;
        }
        this.width = width;
        this.height = height;
        this.speedX = 0;
        this.speedY = 0;    
        this.x = x;
        this.y = y;    
        this.update = function() {
            ctx = myGameArea.context;
            if (type == "image") {
                ctx.drawImage(this.image, 
                    this.x, 
                    this.y,
                    this.width, this.height);
            } else {
                ctx.fillStyle = color;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }
        this.newPos = function() {
            this.x += this.speedX;
            this.y += this.speedY;        
        }    
    }

    function updateGameArea() {
        myGameArea.clear();
        myBackground.newPos();    
        myBackground.update();
        myGamePiece.newPos();    
        myGamePiece.update();
        myHitBox.newPos();
        myHitBox.update();
        myHitBox1.newPos();
        myHitBox1.update();
        myHitBox2.newPos();
        myHitBox2.update();
        myHitBox3.newPos();
        myHitBox3.update();
        myHitBox4.newPos();
        myHitBox4.update();
        myHitBox5.newPos();
        myHitBox5.update();
    }

    function move(dir1) {
        if (dir1 == "down") {myGamePiece.speedY = 5; myGamePiece.image.src = "img/forward.gif";}
        else if (dir1 == "up") {myGamePiece.speedY = -5; myGamePiece.image.src = "img/back.gif";}
        else if (dir1 == "right") {myGamePiece.speedX = 5; myGamePiece.image.src = "img/right.gif";}
        else if (dir1 == "left") {myGamePiece.speedX = -5; myGamePiece.image.src = "img/left.gif";}
    }


    function clearmove() {
        myGamePiece.speedX = 0; 
        myGamePiece.speedY = 0; 
    }
    </script>
    <div style="text-align:center;width:480px;">
      <button onmousedown="move('up')" onmouseup="clearmove()" ontouchstart="move('up')">UP</button><br><br>
      <button onmousedown="move('left')" onmouseup="clearmove()" ontouchstart="move('left')">LEFT</button>
      <button onmousedown="move('right')" onmouseup="clearmove()" ontouchstart="move('right')">RIGHT</button><br><br>
      <button onmousedown="move('down')" onmouseup="clearmove()" ontouchstart="move('down')">DOWN</button>
    </div>

Answer 1

我在评论中提到的替代解决方案，正如您感兴趣的那样：

如果你有复杂的背景，你可以创建一个简单的地图等效。

E.g。这个背景：

会使用这个简单的布局图：

然后有第二个不可见的画布，你沿着这些线运行：

（粗略轮廓，需要编辑才能为你效劳）

var x = <drone X position>;
var y = <drone Y position>;
var colour = secondCanvasContext.getImageData(x, y, 1, 1).data; 
if(colour[0] == 0 && colour[1] == 0 && colour[2] == 0){
    // Your drone is on a black background, so it's not hitting a wall
}

触摸另一个对象时的<canvas> javascript

1 个答案: