🚀P5.jsでnethackのように1文字ずつ方向キーを受け付けるサンプルソースが欲しいです。押し続けてもボタンが反応しないよう、ブロックごとにキャラが移動するようにしたいです

2024年4月14日 20:17

p5.jsでNetHackのようなキャラクター移動を実現するためには、キーボードイベントを使ってキャラクターの座標を更新する必要があります。以下のサンプルコードは、方向キーが押されたときにキャラクターを1ブロックずつ移動させるシンプルな実装を示しています。この例では、キャラクターはプレイヤーが新たなキーを押すまで同じ場所に留まります。

let x, y; // プレイヤーの座標
let gridSize = 40; // グリッドのサイズ

function setup() {
  createCanvas(400, 400);
  x = width / 2;
  y = height / 2;
  noLoop(); // draw関数を自動で繰り返さない
}

function draw() {
  background(220);
  drawGrid();
  drawCharacter();
}

// グリッドを描画する関数
function drawGrid() {
  stroke(0);
  for (let i = 0; i < width; i += gridSize) {
    for (let j = 0; j < height; j += gridSize) {
      line(i, 0, i, height);
      line(0, j, width, j);
    }
  }
}

// キャラクターを描画する関数
function drawCharacter() {
  fill('red');
  square(x, y, gridSize);
}

// キーボードイベントを処理する関数
function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    x = max(x - gridSize, 0); // 左に移動
  } else if (keyCode === RIGHT_ARROW) {
    x = min(x + gridSize, width - gridSize); // 右に移動
  } else if (keyCode === UP_ARROW) {
    y = max(y - gridSize, 0); // 上に移動
  } else if (keyCode === DOWN_ARROW) {
    y = min(y + gridSize, height - gridSize); // 下に移動
  }
  redraw(); // 描画を更新
}