キャラクターを操作してみよう(p5.js)

今回はキャラクターを操作していきます。
まず以下のコードをエディターにコピーしましょう。

// プレイヤーの座標
let x, y; 

// 四角のサイズ
let gridSize = 40; 

//最初に一回だけ読み込む
function setup() {
  createCanvas(400, 400);
  x = width / 2;
  y = height / 2;
}

//描画
function draw() {
　//背景の濃さ
  background(220);

　//キャラクター描画関数
  drawCharacter();
}

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

// キーボードイベントを処理する関数
function keyPressed() {

　switch(keyCode){
　　// 左に移動
    case LEFT_ARROW:
        x = max(x - gridSize, 0); 
        break;
　　// 右に移動
    case RIGHT_ARROW:
        x = min(x + gridSize, width - gridSize); 
        break;
　　// 上に移動
    case UP_ARROW:
        y = max(y - gridSize, 0); 
        break;
　　// 下に移動
    case DOWN_ARROW:
        y = min(y + gridSize, height - gridSize); 
        break;
  }
  
  redraw(); // 描画を更新
}

それではコードの解説です。
ｘ、ｙはキャラクターの座標を示します。
gridSizeでキャラクターのサイズとキャラクターの歩幅を設定します。
drawCharacter関数で赤い四角を描写します。
case LEFT_ARROWで左矢印を押したらという意味です。
他のケースも同じ感じの条件文だと思ってください。
redrawは再描画で、これでカクカクした描写になります。
これらを活用すればファミコンとかのドット単位の動きを実現できます。

いかがでしょうか？
次回は弾を発射してみようと思います。