XBPx Portfolio · Japan
Contact
Lesson 04 / Game Assignment

第四回
にゃんこ風ゲーム制作(SQLなし)

Flask JavaScript Game No SQL

CH 01課題の内容

Point

CH 02ゲームのルール

画面の左端に自分の拠点、右端に敵の拠点が立ち、それぞれ HP バーを持つ。プレイヤーはユニットを召喚して敵拠点へ進軍させ、敵拠点の HP をゼロにすれば勝ち。逆に自分の拠点が落とされたら負けになる。

要素内容
拠点 HP自陣・敵陣それぞれに HP バー。ゼロになった側が敗北
ユニット召喚画面下のボタンからユニットを選んで出撃させる
進軍と戦闘召喚したユニットは自動で前進し、敵とぶつかると戦闘
START / RESTARTボタン 1 つで開始・やり直しができる
ランキングプレイ結果をゲーム画面の下にランキングとして表示
Point 操作は「ユニットを選んで出す」だけに絞った。判断のしどころはどのユニットを、どのタイミングで出すか——本家にゃんこ大戦争の面白さの芯を、最小の要素で残している。

CH 03プレイ動画

実際にブラウザで動かした様子。ユニットが自動で進軍し、拠点を挟んで押し合いになる流れが見える。

SQLなし版のプレイの様子(YouTube)

YouTube で開く

CH 04実装のしくみ

役割分担は第三回で学んだ Flask の構図そのまま。Flask はページを配信する係で、ゲームの動きはブラウザ側の JavaScript が受け持つ。

① 配信

Flask がゲーム画面(HTML / CSS / JS)をブラウザへ返す。

② ゲームループ

JS が一定間隔で全ユニットの位置を更新し、画面を描き直す。

③ 当たり判定

ユニット同士・ユニットと拠点の衝突を判定して HP を減らす。

④ 結果の保持

プレイ結果は SQL を使わず、サーバー側の変数(リスト)に貯めてランキング表示する。

Point 「Python が値を作り、HTML がそれを表示する」という第三回の役割分担は、ゲームになっても変わらない。増えたのは時間とともに状態が動き続けるという要素で、そこを JavaScript のループが支えている。

CH 05SQLなし構成の限界

ゲームとしては遊べる。しかし「ランキングを変数に貯めているだけ」の構成は、動かしてみるとすぐに壁が見えてくる。

① 消える

サーバーを再起動すると、ランキングがまるごと消えてしまう。

② 区別できない

ログインがないので、どのスコアが誰のものか分からない。

③ 増やせない

記録が増えるほど変数管理は破綻し、検索も集計もできない。

学んだこと この「消える・区別できない・増やせない」は、まさに第五回で学ぶデータベースが解決してくれる問題そのもの。ここで感じた不便さを抱えたまま第五回で DB 設計を学び、第六回で SQL を組み込んだ「Meow Fortress」へと作り直していく。