MENU
CSclub.tech|ちえぞう
開発担当
個人でiOS・Androidアプリを開発しています。
スキマ時間で楽しめるゲームや、資格試験対策学習アプリを中心に制作中。
アプリ開発・スキルアップ・生活に役立つ情報を発信中

【初心者向け】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をコピーしました!

この記事を書いた人

はじめまして、CSclub.tech ブログ管理人のちえぞうです。
1966年生まれのクリエイターです。36年間の会社員経験を経て、現在は人生の第二幕として「好きなことを仕事にする」夢を追いかけています。

もともとは「チェリまほ」をきっかけに始めたブログ運営でしたが、デジタルの楽しさに目覚め、今ではWebゲームやスマホアプリの制作、動画編集、AIイラスト制作まで、毎日楽しく探検中です!

このブログでは、私が手掛けたゲームやアプリの紹介・開発の裏話をはじめ、在宅ワークやスキルアップのコツ、大好きなエンタメ情報などをシェアしていきます。

新しいことに挑戦している方、アプリを遊んでくださった方、そして「チェリまほ」ファンの方、ぜひお気軽にコメントください!

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

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次