javascriptでスネークゲーム

動画

スマホのタップに対応

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

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();
}

keyPressed()でキーボードが押された時の処理。
keyCodeをifで場合分け。
上矢印：UP_ARROW
下矢印：DOWN_ARROW
右矢印：RIGHT_ARROW
左矢印：LEFT_ARROW
⇒p5.jsのkeyCode一覧はこちら

// 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);
  }
}

参考ページ