p5.jsでスネークゲーム

スポンサーリンク

動画

動作ページはこちら

スマホのタップに対応

スマホで画面上をタップするとrotate_1()を実行する。
1ずつ上昇するカウントを仕込んでおいて、4で割った値によって移動方向を変更。
下移動を最初に、右回りで動くよう設定しておけば、タップ1つだけでゲームプレイが可能。

window.addEventListener('load', function(){
  document.getElementById("P5Canvas").addEventListener('touchstart', rotate_1);
});

var tap = 0;
function rotate_1(){
  if(tap % 4 == 0){
    s.dir(0, 1);
  }else if(tap % 4 == 1){
    s.dir (-1, 0);
  }else if(tap % 4 == 2){
    s.dir (0, -1);
  }else if(tap % 4 == 3){
    s.dir (1, 0);
  }
  tap++;
}

dist()の解説↓

  // d is the length of the line
  // the distance from point 1 to point 2.
  let d = dist(x1, y1, x2, y2);
function setup() {
  createCanvas(field_x, field_x + 40);
  background(0);
  s = new Snake();
  frameRate (10);
  pickLocation();
}

フィールドを正方形+下にスコアボードを表示。

// CONTROLS function
function keyPressed() {
  if (keyCode === UP_ARROW){
      s.dir(0, -1);
  }else if (keyCode === DOWN_ARROW) {
      s.dir(0, 1);
  }else if (keyCode === RIGHT_ARROW) {
      s.dir (1, 0);
  }else if (keyCode === LEFT_ARROW) {
      s.dir (-1, 0);
  }
}

キャンバスの一番左上が0,0
右方向がx座標のプラス方向
下方向がy座標のプラス方向

参考ページ

Attention Required! | Cloudflare
p5.js
スポンサーリンク
のんびりブログ

コメント

タイトルとURLをコピーしました