AIを相棒にIT知識ゼロがテトリスを作る！（完成までの道のり編）

こんにちは！
株式会社スタジオ・アルカナの坂爪です。

今回はスタジオ・アルカナのXで企画した【さっつん、テトリスつくるぞの旅】について書いていこうと思います！Xはコチラ！

自己紹介

【坂爪のIT力】
まずここで、一番大事な坂爪のITの知識・情報力などをお伝えしよう。
・ITに関する知識　 ：20/100 (ググれるよ）
・エンジニア知識　　：0/100（コード入力の画面が出た瞬間、消します）
・PCの知識　　　　 ：30/100 (スプレッドシートとか使える）
・AI（Gemini）の知識：30/100 (プロンプト書くより、雑談が得意）

総合：80/400　（冒険者なら最初の村で未来がない感じ）

【坂爪の職種】
坂爪はバックオフィス担当。
契約・請求・ツールの管理・入社退職に関すること・みんなの雑務などなど・・・
去年書いた、バックオフィスの仕事とは？の記事をお読みください！
200％コードとか無関係なんですぅぅうう。
という、ただの猫好き。

テトリス作っていくよ！

今回は、全部Gemini（じぇみたん）に聞きながら行いました。
記念すべき最初の相談▼▼

ちょっとまだ会話がぎこちない感じがでてますね
これが最初の一歩でした！
じぇみたんが教えてくれたステップは全部で10！

✨ステップ１：ファイルとキャンパスの準備
index.htmlとmain.jsを作成し、ゲーム画面となるHTMLの<canvas>要素を準備

✨ステップ２：JavaScriptの基本設定
main.jsで、キャンバスの取得や描画コンテキストの準備

✨ステップ３：盤面（ボード）の定義
ゲームが進行する20x10マスのboard配列を作成し、0で初期化

✨ステップ４：ブロックの描画機能
盤面上の指定位置に四角を描くdrawBlock関数を作成し、draw関数で盤面全体を黒でクリアする仕組みを作る

✨ステップ５：ゲームループの導入
1秒ごとにブロックを自動で下に動かすsetIntervalを使ったgameLoopの基礎を作る

✨ステップ６：ブロックのランダム生成
tetrominos配列にブロックの形（I型、O型など）を定義し、ランダムにブロックを選んで出現させるcreateTetromino関数の作成

✨ステップ７：キーボード操作の追加
左右の矢印キーでブロックを動かせるように、keydownイベントリスナーの設定

✨ステップ８：衝突判定の実装
ブロックが他のブロックや壁と衝突しないかを確認するisValidMove関数を作成し、正確な移動と着地を可能にする

✨ステップ9：ロックの固定とライン消去
着地したブロックをboardに固定し、ラインが揃ったときに消去して上に詰めるclearLines関数を実装

✨ステップ10：ブロックの回転機能
回転アルゴリズムを実装したrotate関数と、回転後の衝突をチェックするロジックを追加し、ブロックを回転を可能にする

10のステップというと、結構簡単にできたんじゃないの？？
と思うかもしれませんが、めちゃめちゃ躓きました！
じぇみたんに何回聞いても解決できなかったり、そもそも書き換えるコードの場所が見つからなかったり、なんか知らんけどブロックが出てこなくなったり。。大変でした😢

10のステップを3つのパートにわけて、簡単に説明していきますね！

Part 1：まずは環境作り！〜コードを書く前に躓く〜

🥚ステップ1〜3
プロジェクトの基礎とボードの定義

🥚ステップ4
ブロックの描画機能

プログラミングの第一歩は、コードを書くための環境（VS Code）を整えること。
しかし、いきなり環境設定やファイルの作成で躓きました。VS Codeの設定に関しては最初の画面が英語で全然わからん！進まん！ということで、エンジニアのスタッフにヘルプしてもらい、ようやく設定できましたとさ。じぇみたん、喧嘩にならなくてよかったね。。
「index.htmlに何を書くの？」「main.jsって何？」というレベルからのスタートです！

それぞれに書くコードは全部じぇみたんが用意してくれて、コピペするだけでOK！
それくらいなら楽勝ってもんですよ✨
画面に初めて四角いブロックが表示された時は、たったそれだけなのにメッチャ感動しました！
何か分からないけど、でてきた！！

Part 2：動き出すブロックと最初の壁

🐣ステップ5
ゲームループの導入

🐣ステップ6
ブロックのランダム生成

🐣ステップ7
キーボード操作の追加

次は、ブロックを動かす作業です。

じぇみたんに教えてもらったのが、setIntervalという命令で1秒ごとにブロックを下に落とす「ゲームループ」という仕組みらしい。ブロックが落ちてくる様がもう！テトリス！

じぇみたんはコードを書いてくれたあとに、必ずそのコードの解説も教えてくれるのできっと分かりやすいのではないでしょうか✨

しかし、ステップ７のキーボード操作の導入で早速壁にぶつかります。
コードのコピー＆ペーストの位置を間違っていたり、コードの追加の仕方を間違えたのかさっきまで動いていたブロックが消えたり、確認画面が真っ白になったり...。
そのたびに、じぇみたんに「今書いてあるコードは？消していいの？」「動かなくなった！」と助けを求め、ついにじぇみたんの最終技をだしてもらうことになるのです。。
その名も「一旦全部消して、この完全なコードをコピー＆ペーストしてください！」
この最終技は、この後何回もでてきます。。最終技は強い！

Part 3：テトリス核心ロジックへの挑戦！

🐔ステップ8
衝突判定の実装

🐔ステップ9
ブロックの固定とライン消去

🐔ステップ10
ブロックの回転機能

この段階が、テトリス制作の最も難しい核心部分でした。

• 最大の難関は衝突判定：ブロックが床や積み重なったブロックの上でピタッと止まるようにするロジック(isValidMove)は、最初上手くブロックが止まらずに下にあるブロックを通過して枠外にでてしまったり、積み重ならずに一番下のブロックと同化したり、、、。また、一番右端までブロックが移動せずに何回もじぇみたんに「ブロックが一番右までいかないんだけど、なんで？」と問い詰めたことも。。
  その原因はコードではなく、一番最初に設定した「キャンバス」が大きかっただけなんですけど、それに気づくまでが大変でした😢

ブロックのすり抜け問題などは、じぇみたんに「ブロックが止まらないよ」っていうだけで、また最終技をくりひろげてくれるじぇみたん。
坂爪がコードについて調べたり、ここ間違ってるな！と理解できることは１回もありませんでした。むしろ、いまだにコードの書き換えはできる気がしません！

さぁ！ラストスパート！（じぇみたんが）
あと少しでテトリスが完成です！！
最後のやり取りをお見せしましょう！！

（最後まで最終技を繰り広げてくれたじぇみたん）

コードを全部入れ替えて・・動かしてみるとぉぉぉ！！

できた～～✨✨
ここで、いったんテトリスの機能を実装したものができました！！

まとめ

なんとかテトリスらしきものが完成✨
実際に動かしてみると、ブロックが落ちてくる速さも変わらないし、永遠にゲームオーバーにならないものが出来上がってしまいました。
これではゲームと呼べない！と思ったので、少しずつ手を加えていきます！
その様子は次のブログで紹介します！