WEBブラウザで動くタイピングゲームのコード解説（HTML、CSS）
前回作成したWEBブラウザゲームのコード解説（HTML、CSS）です。
- タイピングゲーム（1/3）
- タイピングゲーム（2/3）
- タイピングゲーム（3/3）
- ブラウザゲームのURL
- GitHubのURL
GitHubのPagesで公開しているのでゲームプレイできます。
コード概要
• HTML5とCSS3を使用したタイピングゲームの基本構造
• レスポンシブデザインに対応したレイアウト設計
• ゲーム要素（単語表示、入力フィールド、タイマー、スコア）の実装
• 複数のJavaScriptファイルを使用したモジュール構造
• スタートボタンによるゲーム開始機能の実装
HTMLファイル (index.html)の解説
DOCTYPE宣言と HTML開始タグ
<!DOCTYPE html>
<html lang="ja"><!DOCTYPE html>: これは HTML5 文書であることを宣言しています。<html lang="ja">: HTML文書の開始を示し、lang="ja"は文書の主要言語が日本語であることを指定しています。
これらは、ブラウザに対してこのファイルがHTML5形式で書かれていること、そして主に日本語で書かれていることを伝えています。
head要素
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイピングゲーム</title>
<link rel="stylesheet" href="css/style.css">
</head><meta charset="UTF-8">: 文字エンコーディングをUTF-8に設定しています。<meta name="viewport" ...>: モバイルデバイスでの表示を最適化します。<title>: ブラウザのタブに表示されるタイトルを設定します。<link>: 外部CSSファイルを読み込みます。
head要素には、ページの設定や外部リソースの読み込みなど、ページの見た目や動作に関する重要な情報が含まれます。
body要素の開始
<body>
<div class="container">
<h1>タイピングゲーム</h1><body>: ページの本文を含む要素です。<div class="container">: ページのコンテンツをグループ化します。<h1>: ページの主要な見出しを表示します。
body要素は、ウェブページで実際に表示される内容を含みます。containerクラスのdiv要素は、ページのレイアウトを整えるために使用されることが多いです。
ゲーム本体の要素
<div id="game">
<p id="word"></p>
<input type="text" id="input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<p id="timer"></p>
<p id="score"></p>
</div><div id="game">: ゲームの主要部分を囲む要素です。<p id="word">: タイピングする単語を表示する要素です。<input>: ユーザーが入力するためのテキストフィールドです。各種自動補完機能を無効にしています。<p id="timer">: タイマーを表示する要素です。<p id="score">: スコアを表示する要素です。
これらの要素は、ゲームの主要な部分を構成します。単語の表示、ユーザー入力、タイマー、スコア表示など、ゲームに必要な要素がすべて含まれています。
スタートボタン
<button id="startButton">スタート</button>
</div><button>: ゲームを開始するためのボタンです。
このボタンをクリックすることで、ゲームが開始されるようになっています。
JavaScriptファイルの読み込み
<script src="js/word.js"></script>
<script src="js/timer.js"></script>
<script src="js/game.js"></script>
<script src="js/ui.js"></script>
<script src="js/main.js"></script>
</body>
</html>- 複数の
<script>タグ: 各JavaScriptファイルを読み込みます。 </body>: body要素の終了を示します。</html>: HTML文書の終了を示します。
これらのスクリプトタグは、ゲームの動作を制御するJavaScriptファイルを読み込みます。ファイルの読み込み順序が重要で、依存関係に基づいて適切に配置されています。
このHTMLファイルは、タイピングゲームの基本的な構造を定義し、必要なスタイルシートとJavaScriptファイルを読み込んでいます。各要素にIDが付けられているので、JavaScriptからこれらの要素を簡単に操作できるようになっています。
CSSファイル (style.css)の解説
ページ全体のスタイル
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}font-family: テキストのフォントをArialに設定し、なければsans-serifフォントを使用します。display: flex: フレックスボックスレイアウトを使用します。justify-contentとalign-items: コンテンツを水平・垂直方向に中央揃えします。height: 100vh: ページの高さをビューポートの高さ（画面の高さ）に合わせます。margin: 0: ページの外側の余白をなくします。background-color: 背景色を薄いグレー（#f0f0f0）に設定します。
このスタイルは、ページ全体をフレックスボックスとして設定し、その中のコンテンツを中央に配置します。背景色を設定し、ページいっぱいに表示されるようにしています。
ゲームコンテナのスタイル
.container {
text-align: center;
background-color: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}text-align: center: コンテナ内のテキストを中央揃えにします。background-color: white: コンテナの背景色を白に設定します。padding: 2rem: コンテナの内側に余白を設定します。border-radius: 10px: コンテナの角を丸くします。box-shadow: コンテナに影をつけて立体感を出します。
このスタイルは、ゲームのメイン部分を白い背景の上に配置し、角を丸くして影をつけることで、視覚的に浮き上がって見えるようにしています。
ゲーム部分のスタイル
#game {
margin-bottom: 1rem;
}margin-bottom: 1rem: ゲーム部分の下に余白を設定します。
これにより、ゲーム部分とスタートボタンの間に適切な間隔が確保されます。
タイピングする単語のスタイル
#word {
font-size: 2rem;
margin-bottom: 1rem;
}font-size: 2rem: 単語のフォントサイズを大きくします。margin-bottom: 1rem: 単語の下に余白を設定します。
タイピングする単語を大きく表示し、その下の入力フィールドとの間に適切な間隔を設けています。
入力フィールドのスタイル
#input {
font-size: 1.5rem;
padding: 0.5rem;
width: 80%;
margin-bottom: 1rem;
}font-size: 1.5rem: 入力テキストのサイズを設定します。padding: 0.5rem: 入力フィールドの内側に余白を設定します。width: 80%: 入力フィールドの幅をコンテナの80%に設定します。margin-bottom: 1rem: 入力フィールドの下に余白を設定します。
入力フィールドを大きく見やすくし、適切な余白を設定しています。
タイマーとスコアのスタイル
#timer, #score {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}font-size: 1.2rem: タイマーとスコアのフォントサイズを設定します。margin-bottom: 0.5rem: 下に小さな余白を設定します。
タイマーとスコアを適度な大きさで表示し、それぞれの間に小さな余白を設けています。
スタートボタンのスタイル
button {
font-size: 1.2rem;
padding: 0.5rem 1rem;
cursor: pointer;
}font-size: 1.2rem: ボタンのテキストサイズを設定します。padding: 0.5rem 1rem: ボタンの内側に余白を設定します。cursor: pointer: マウスがボタン上にあるときにカーソルを手の形に変更します。
スタートボタンを見やすいサイズにし、クリックしやすいように余白を設定しています。また、ホバー時にカーソルが変わることで、クリック可能であることを示しています。
このCSSコードは、タイピングゲームのユーザーインターフェースを整えるために使用されています。全体的に見やすく、使いやすいデザインを実現しています。
まとめ
HTMLの特徴
• セマンティック要素の活用（header, nav, main, footerなど）
• 構造化されたマークアップによる明確なドキュメント構造
• メタタグによるエンコーディングとビューポートの設定
• 入力フィールドでの予測変換防止属性の使用
• モジュール化されたJavaScriptファイルの効率的な読み込み
• アクセシビリティを考慮した要素の使用（適切なラベリングなど）
CSSの特徴
• フレックスボックスを使用した中央揃えレイアウト
• ビューポートの高さを利用した全画面表示設計
• ボックスシャドウとボーダーラディウスによるモダンな外観
• レスポンシブデザインに対応したスタイリング
• rem単位の使用によるスケーラブルなフォントサイズ設定
• カーソルスタイルの変更によるインタラクティブ性の向上
• 効果的なマージンとパディングの使用によるスペーシング
• 背景色とテキスト色のコントラストを考慮した配色
このコードは、シンプルながら効果的なタイピングゲームのユーザーインターフェースを構築しています。HTML5の最新機能を活用しつつ、CSSでゲームの視覚的な側面を整えています。特に、フレックスボックスを使用したレイアウトや、ゲーム要素のサイズ調整、影の追加などにより、ユーザーフレンドリーなデザインを実現しています。また、JavaScriptファイルを分割して読み込むことで、コードの管理と保守が容易になっています。全体として、モダンなウェブ開発の良い例となっているといえるでしょう。
コメント