gooブログはじめました!

写真付きで日記や趣味を書くならgooブログ

JavaScriptで簡単テトリスを作ってみました。

2024-04-21 15:11:27 | 日記

JavaScriptを使って、初心者練習用を目的になるべく簡単に、
テトリスを正方形1個に簡易化した「簡単テトリス」を作ってみました。

noteの記事(*1)の添付ファイルをダウンロードし解凍して、
index.htmlをダブルクリックすると動きます。

 (*1) JavaScriptで簡単テトリスを作ってみました。|あかぺこ (note.com)

← →キーで左右移動、1行そろうと消えます。

正方形1個なので、回転に関する考慮は必要なくなります。
ブロックの積み重ねなど正方形の位置は、2次元配列で管理。
そろった行を消すしかけも、シンプルです。

これをベースに
・枠と背景を描く
・落下位置を左右に振る
・音を出す
・スコアをカウントする
・GAME OVERの判定と表示を入れる
などをトライされるとよいかなと思います。

プログラミングに興味がある小中学生の誰かに、何かしらヒントになればうれしいです。



最新の画像もっと見る

3 コメント

コメント日が  古い順  |   新しい順
スクラッチ版 (あかぺこ)
2024-04-21 15:31:00
スクラッチ(Scratch)版の簡単テトリスもあります。
https://blog.goo.ne.jp/fkgrnlnd/e/513853d0b28dbafadc1ba6170578c505
返信する
パイソン版 (あかぺこ)
2024-04-21 15:33:20
パイソン(Python)版の簡単テトリスもあります。
https://blog.goo.ne.jp/fkgrnlnd/e/b99793c7080eb72af249fe523ccdbaeb
返信する
正方形2個 (あかぺこ)
2024-04-25 11:40:45
正方形2個のテトリスも作ってみました。
https://blog.goo.ne.jp/fkgrnlnd/e/a79aa5310766461b83c937084c19f9e7
返信する

コメントを投稿