p5jsを使ってブラウザで動くスネークゲームを作る

YouTubeのCoding Challengesが面白いので紹介します。
JavaScriptのライブラリp5.jsを使って制限時間内に目的のコードを完成させる動画です。

表題のSnake Gameを作ってる動画はこちら↓。

設定時間を超えちゃうこともしばしばですが、講師のDaniel Shiffman氏が慌ててるところが好きですね。（この動画も結局30分かかってる。。）

はじめのいくつかは有志で日本語字幕もあるのでわかりやすいです。

• Coding Challenges
• YouTube のチャンネル

この記事ではSnake Gameを実際に動かして、改良を目指します。

ヘビゲーム(Snake Game)

ヘビゲームは、ビデオゲームのジャンルのひとつ。伸長するヘビを操作して、エサを食べ続けることがゲームの目的である。
Wikiより

今回は下記のルールに従うようにします。

• 餌を回収したら１マス分伸長する。
• 蛇は動き続け、十字キーで操作する。
• 餌は回収される度にランダムに配置する。
• ヘビは縁か自身の体に当たったらゲームオーバー。

とりあえず、こんなもんかな。

サンプルを動かす

既に動画と同じコードサンプルが公開されています。p5.js Snake Game

改良する

以下の点を良くしていきます。

1. ヘビがUターンできてしまう。
2. スタートとリザルト画面を作る。
3. 背景とヘビのデザインを変更。

まず、ヘビがUターンして短くなってしまう問題を改善します。 Snakeの関数dirにUターンができないよう加えた。

this.dir = function(x,y) {
    if(this.xspeed == -x || this.yspeed == -y){
      // Uターンしない。
      return;
    }
    this.xspeed = x;
    this.yspeed = y;
  }

続きを作成中。。。

JavaScriptを初めて学ぶ方へのオススメ！ 実際にプログラミングを書いて覚えられるので、オンラインでの学習と合わせて読み進めると理解が深まると思います。