記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
プログラミングの実技授業で使える良いネタはないかな…？
とお悩みの先生にピッタリな記事となっています。
知人がプログラミングに興味があるからということで、筆者に「プログラミングを教えてくれないか」と頼まれました。
せっかくだったら目に見える成果物を作れた方が達成感もあるかな
と考えました。そこで制作したのが、「オリジナル 対戦型タイピングゲーム」です。
このタイピングゲームは
- HTML
- CSS
- JavaScript
の3種類の言語で制作していて初心者でも取り扱いやすい内容になっています。
1から10まで丁寧に教えるとなると相当な時間がかかってしまいますが、穴埋め式のファイルに適切なコードを入力していく方式にすれば合計8〜10時間で完成させることもできます。
そういう意味では
高校の情報1のプログラミング実技授業で活用できる
ということでこの記事ではレッスンごとにカリキュラム分けし紹介したいと思います。
ぜひ最後まで読んでみてください。
目次
まずはタイピングゲームの完成形を見てください。
トップ画面
画面に表示されている「ゲーム開始」ボタンを押下するとゲームが開始します。
ゲーム画面
このゲームに実装した機能は以下の通りです。
- トップ画面で「ゲーム開始」を押すとバトル画面に遷移する機能
- キーボード入力できる機能
- 正しく入力した際にリアルタイムで問題の文字が灰色になる機能
- 正しく入力できた際に攻撃する機能
- 制限時間内に入力を完了できないと、相手に攻撃される機能
- 攻撃の様子はアニメーションで表現（以下の動画参照）
- どちらかのライフポイントが０になればゲームがストップする機能
なお、このタイピングゲームでは制限時間内に表示されている単語を入力できれば攻撃することができます。
制限時間を超えると敵から攻撃されることになります。
攻撃の様子は非常に簡易的なものですが、以下の動画を見てみてください。
制作に必要なものも多くありません。
- パソコン
- インターネットに接続できる環境
- コードエディタ
これらを揃えましょう。
コードエディタは、VSCodeなど専門的なソフトがあれば良いですが、準備するのが難しい際には
などインターネット上で利用できるエディターを使用しましょう。
ここから制作のカリキュラムを紹介します。
まずはコードに慣れてもらうためにも、簡単な機能を実装するところから始めましょう。
【対戦型タイピングゲーム】基本的なHTML、CSS、JSの理解と入力時に文字が灰色になる機能の実装しよう
続いては攻撃のモーションをJavaScriptとCSSを使って表現してみましょう。
基本的な構造を理解できれば、HTML、CSS、JavaScriptに追記していき、完成させましょう。
Step3で完成形になりました。ここからはアレンジしてオリジナルのゲームに仕上げていきましょう。
ここで紹介するアレンジ例は以下です。
- 条件を満たすとクリティカルヒットできるようにしよう
- ゲームにBGMと効果音をつけよう
条件を満たすとクリティカルヒットできるようにしよう
制限時間の半分以内の時間でミスなく入力できた際にはクリティカルヒットとなって、相手に与えるダメージを大きくしよう。
ゲームにBGMと効果音をつけよう
プレイして楽しいゲームになるように、BGMや効果音をつけてみましょう。
プログラミング実技授業のアイディアとして「対戦型タイピングゲームの制作」を紹介しました。
このゲーム制作を通してプログラミングが楽しいと少しでも思ってもらえると非常に嬉しいです。
最後まで読んでいただきありがとうございました。
この記事が少しでも参考になれば幸いです。
それではまたここで会いましょう！
にほんブログ村
ブログ村に参加中です。上のバナーをクリックいただくだけで当ブログにポイントが入ります。いつも応援クリックありがとうございます。
Twitter やってます。
新着記事のお知らせをしていますのでぜひフォローしてください！人気の記事
この記事を読んだ人はこちらの記事も読んでいます。
▶︎「【塾長分析】大学入学共通テスト2025「情報」まとめ【難易度・対策】」
共通テスト「情報」対策に必要なことは？塾講師が解説！勉強法と参考書
▶︎「【最新】（情報1）共通テスト試作問題 難易度と3つの対策」
【最新】（情報1）共通テスト試作問題 難易度と3つの対策
スポンサーリンク
