【初心者向け】HTMLとCSSだけで作るブロックくずしゲームの作り方！WordPress対応

前回はPythonを使って作成しました。

今回は、JavaScriptを使って作成しました。

ChatGPTに関しては同じです。

JavaScriptを使って作ってみた

STEP

まず「テトリス」のようなゲームを作ってください。と入力しました。

JavaScriptでコードを作成してくれました。

STEP

次に「コードをどこに貼り付けたらいいですか」と入力したら、

カスタムHTMLのブロックに貼り付けてくださいとの指示でした。

STEP

貼り付けた後にスタートボタンが抜けていたり、あとからスコア表示がしたいと指示をして、2、3回修正をしてもらいました。完成したものがこちらです。

♪ テトリス風ゲームの遊び方 ♪

▶️ 「Start Game」ボタンをクリックしてゲームスタート！

🎮 操作方法：
←→ キー：左右に移動
↑ キー：回転
↓ キー：下に移動

📱 スマートフォンの場合は画面下部のボタンで操作できます

✨ スコア表 ✨

1列消し: 100点

2列消し: 300点

3列消し: 500点

4列消し: 800点

ブロックゲームで実際に遊んでみよう！☚無料です【ブログ上で実行できます】

スタートボタンはこちらです

Tetris

Score: 0

スタートボタンをクリックするとゲームの画面が現れ、上から、ブロックが落ちてきます。それを一列に並べると消滅していきます。ブロックが上段まで詰まってしまうと、ゲームオーバーです。ではスタート！

よかったらシェアしてね！

URLをコピーしました！

この記事を書いた人

ちえぞう

はじめまして、ブログ管理人のちえぞうです。

36年の会社員経験を踏まえ、新たな挑戦の日々を送っています1966年生まれのクリエイターです。

「チェリまほ」をきっかけに始めたブログ運営から、今では動画編集やAIイラスト制作、ゲーム制作まで、デジタルの世界を楽しく探検中。人生の第二幕で、好きなことを仕事にする夢を追いかけています。

在宅ワークやスキルアップのコツ、エンタメ情報など、私の経験と発見をシェアしていきます。同じように新しいことに挑戦している方、「チェリまほ」ファンの方、ぜひお気軽にコメントください！

モットーは「学ぶことに年齢は関係ない。毎日が新しい発見の連続です。」