Web技術で再現する懐かしいゲーム スネーク編

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. Web技術で再現する懐かしいゲーム スネーク編

Web技術で再現する懐かしいゲーム スネーク編

Web技術で再現する懐かしいゲーム スネーク編

こんにちは!シュウです。
今回は「懐かしいゲームをWeb技術で再現する」という企画をしてみたいと思っています。

アーケードゲームとして登場したスネークゲームは、70年代に誕生してから大きな人気を集めてきました。
私が初めてスネークゲームを知ったのは、中国でアンドロイド搭載の携帯への利用が広まってきた2009年頃でした。

スネークゲームと言ったら、壁や自身にぶつからずに、蛇を操作して餌を食べ続けるゲームです。
餌を食べた分で蛇の体も長くなります。長くなればなるほど難易度が高くなります。

では、今回は自分なりに、HTML5とJavaScirptを使ってスネークゲームを作成してみようと思います。

テーブルタグでステージを作る

まずは、ゲームのステージです。どのタグを利用したら一番適切でしょうか。

私は今回テーブルタグを選びました。
その理由は、テーブルは「tr」タグを使って行を操作できるし、「td」タグを使って列の操作も簡単にできるからです。蛇の位置を特定しやすいメリットがあります。
それに、ゲームステージの拡張と縮小も、JavaScriptを触らず、HTMLだけで対応できます。以上のことからテーブルタグを使うのがベストだと考えました。

配列で蛇を再現する

では、蛇はどのように作成するのでしょうか。
私は蛇を一つの配列として考えました。

以下は私が定義した蛇の初期状態です。

二次元で並ぶ配列の数は、蛇の長さになります。配列を追加するたびに、蛇が長くなります。
三次元の配列に保存する2つの値は、蛇のいる場所を示す座標です。
1番目の数は行で、2番目の数は列です。

蛇を動かすのに最初と最後の配列が必要

では、どうすれば、蛇を動かせるでしょうか。

蛇となる3つのセルを1個ずつ、次のセルにずらせば、蛇を一歩動かしたことになるのではないかと考えました。
ただし、この考え方だと、パソコンに大量な作業量を与えてしまう可能性があります。
3つのセルを占める蛇には、1歩につき3回繰り返しが必要です。300個のセルを占める蛇は1歩に300回も繰り返さないといけません。

そこで、私は3個のセルを一個ずつずらせる動作を図解にしてみました。すると実際に変わったのは、最初と最後のセルだけではないか?と気づきました。真ん中のセルを動かす必要はありません。

キーボードで蛇の動く方向をコントロールする

蛇の動き方向はキーボートの上下左右の矢印ボタンを押すタイミングで実行します。

keydownイベントで押したキーを取得します。
方向ごとに分岐処理を作って、以下のように新しいセルの座標を与えます。

ランダムで餌を作る

餌を置く場所は蛇が占めるセル以外の任意の場所となります。言い換えると、「snake」クラスが付いているセル以外なら、全部OKです。

餌を食べる処理

餌を置くタイミングといえば、今ある餌が蛇に食べられた時点です。
蛇を一歩動かす処理を行う時、セルに餌のクラス「food」が付いているかどうかを先に判断します。

もし付いていれば、餌を食べる処理に入ります。

壁や自身にぶつかる処理

スネークゲームでは、蛇が周囲の壁や自身にぶつかると、ゲームオーバーになります

自身にぶつかる

動く先のセルに「snake」クラスが付いているかどうかを判断します。

周囲の壁

行(tr)を示すend[0]、列(td)を示すend[1]の最小値または最大値となるかどうかを判断します。

新しい要素を取り入れ、ゲームを変えてみよう

今回このブログを書くために、スネークゲームを検索してみました。
少し変わったスネークゲームもありました。ステージのフチだけではなく、ステージの中にも障害物を設置し、難易度を高めていました。
それをきっかけに、どのように新しい要素を取り入れ、ゲームを少し変え、より面白くさせるかを私も考えてみました。

案その1:マイナス餌

餌を食べるたびに、蛇の体が一個分長くなります。逆に、食べると、長さが減る餌を設置したら、面白いのではないかと考えました。
体を長くさせることを目指しているゲームなのに、短くなる心配がでてきます。
どのようにマイナスとなる餌を避け、プラスとなる餌を取るかを考えないといけません。

では、どのように実装すると良いでしょうか。

1、タイミングを設定し、ランダムでマイナス餌(クラス名:mimus)を作ります。
2、食べた餌がマイナス餌のクラス名が付いていれは、マイナス餌の分岐処理に入ります。

案その2:餌 = 障害物?

特に長い蛇を操作すると、タイミングを逃したら、蛇を回すだけで時間がかかります。「時間」にも何かできることがあるのではないかと思いつきました。
餌を取るのに、制限時間をつけます。制限時間を超えたら、餌から障害物に変わります
そうすると、障害物を増やさないために、どのように餌を取るかを考える楽しみも増えました。

1、ゲーム終了を判断する分岐文に「障害物(クラス名:obstacle)が付いているtd」という条件を加えます。
2、餌に時間制限を付けます。餌が出でくる時点から、カウントを始めます。制限時間になってまだ食べられていなかったら、餌(クラス名:food)のクラス名を取り下げ、障害物(クラス名:obstacle)のクラス名に付け直します。

まとめ

今回は以上です。スネークゲームをWeb技術で再現し、新しい要素を取り入れてみました。

Webサイトのリニューアルも、決してただ単に元サイトにある要素を組み直すだけではありません。
ディレクターがお客さまの要望に合わせて現状を分析し、課題を掘り出し、解決策を考えます。構成を踏まえた上で、相応しい新要素を提案する場合もあります

クリエイターとしては、常に自分で考えることがとても大事だと思います。
これからも、単にある物を再現するだけで終わらず、自分で新しい要素を考えて実行することを楽しんでいきたいと思っています。

前後の記事

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら