Question

我的游戏是colegame.herokuapp.com，我想知道我是否可以制作它以便不可能从画布上去，因为如果它们不在画布上你就看不到任何人。对于我的玩家，我使用表情符号来使代码更容易，更省时。有谁知道如何根据颜色进行碰撞检测？谢谢，请提供用于它的代码，因为我是初学者。我的画布大小取决于屏幕的大小。它总是一个正方形。

Answer 1

您需要根据画布的大小限制播放器的位置。

这是一个100x100世界的例子，拥有10x10播放器。

单击黑匣子，然后使用键盘上的箭头键移动＆＃34;播放器＆＃34;。

＆＃13;

var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var playerPosition = [45, 45];

if (canvas.getContext) {
    draw();
    window.addEventListener('keydown', move, true);
}

function move(evt)
{
    switch (evt.keyCode) {
        case 37: // left
            playerPosition[0] -= 5;
            break;
        case 38: // up
            playerPosition[1] -= 5;
            break;
        case 39: // right
            playerPosition[0] += 5;
            break;
        case 40: // down
            playerPosition[1] += 5;
            break;
    }
    
    // restricting the movement of the player happens here
    if (playerPosition[0] < 0) playerPosition[0] = 0;
    if (playerPosition[0] > 90) playerPosition[0] = 90;
    if (playerPosition[1] < 0) playerPosition[1] = 0;
    if (playerPosition[1] > 90) playerPosition[1] = 90;
    
    draw();
}

function draw() {
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, 100, 100);
    ctx.fillStyle = "#ff0000";
    ctx.fillRect(playerPosition[0], playerPosition[1], 10, 10);
}

＆＃13;

#my-canvas {
  width: 100px;
  height: 100px;
}

＆＃13;

<canvas id="my-canvas"></canvas>

＆＃13;

Javascript - 基于颜色的在线碰撞检测

1 个答案: