【超初級JavaScript講座】テキスト表示と変数を勉強するためにクリックゲームを作ってみた

2023年7月28日 18:19

最近は便利なもので、簡単なコードならchatGPTのようなAIが書いてくれます。

せっかくなんでプログラム初心者の私もAIと対話しながら勉強して、その過程を発信していきます。

脱出ゲーム
サウンドノベル
アドベンチャーゲーム

こういうテキストと画像だけでも成り立つゲームを作ることを目的にしています。テキストと画像周りの処理が分かればwebページを作るのにも応用できるはずでしょう。

JavaScriptについては超初級の初心者むけですが、HTML/CSSは少し分かる程度の知識の前提で書いています。このhtmlからJavaScriptにステップアップする段階で挫折する人が多いみたいなので、何とか習得してみたいですね。

変数は文字通り変化する数値で、どのプログラム言語でも超使います。簡単に概念だけでも覚えておきましょう。

コードをコピペ

chatGPTにJavaScriptで作れる簡単なゲームを教えて欲しいと尋ねると何個かリストアップさせます。その中からクリックゲームすれば数字が足されていくだけの簡単ゲームを作ってみます。
コードが2つあるから、それぞれをメモ帳にコピペして保存する。ファイル名も変えます。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>クリックゲーム</title>
</head>
<body>
  <h1>クリックゲーム</h1>
  <p>クリックした回数: <span id="score">0</span></p>
  <button id="clickButton">クリックしてスコアを増やす</button>

  <script src="clicker_game.js"></script>
</body>
</html>

clicker_game.js

const clickButton = document.getElementById("clickButton");
const scoreDisplay = document.getElementById("score");

let score = 0;

clickButton.addEventListener("click", function() {
  // クリックするたびにスコアを増やす
  score++;
  // スコアを表示する
  scoreDisplay.textContent = score;
});

同一フォルダー内にindex.htmlとclicker_game.jsの2つのファイルがあればOKです。
ファイル名のindex.htmlの前半部分は別になんでも良いです。

起動しよう

出来たらGooglechromeで起動します。別にIEやedge、Linuxどんなブラウザーでも起動できます。

「クリックしてスコアを増やす」のボタンを押すと数字が増えていきます。クソ簡単です。ゲームと言うにはおこがましいレベルです。でも基本中の基本表示を覚えるにはちょうど良いんです。

よくあるハローワールドと表示させる奴の発展系ですね。

ざっくりコードを解説

chatGPTにコードを解説してもらいます。

index.html

<!DOCTYPE html>: HTML5のドキュメントタイプ宣言です。HTML5を使用することを宣言しています。
<html>: HTMLのルート要素であり、全体のコンテンツを囲むコンテナです。
<head>: 文書に関するメタ情報を含むセクションです。ここでは、ページのタイトルが設定されています。
<title>: ページのタイトルを指定します。ブラウザのタブに表示されるタイトルになります。
<body>: 文書の表示内容を含むセクションです。実際に画面に表示されるコンテンツがここに配置されます。
<h1>: 見出し（Heading 1）を示す要素です。大見出しとして使用されます。
<p>: 段落を示す要素です。テキストをまとめて表示する際に使います。
<span>: インライン要素を囲むための要素で、特定の範囲にスタイルを適用するのに便利です。
<button>: ボタンを示す要素です。クリックイベントを発火させることができます。
id: 要素にユニークなIDを付与する属性です。JavaScriptから要素を操作する際に使います。
<script>: JavaScriptコードを埋め込むための要素です。src属性を使うことで外部のJavaScriptファイルを読み込むこともできます。

clicker_game.js

const clickButton = document.getElementById("clickButton");
document.getElementById()メソッドを使って、idが"clickButton"のボタン要素を取得しています。clickButton変数に取得した要素が代入されます。このボタンがクリックされると、スコアが増える仕組みを実現します。
const scoreDisplay = document.getElementById("score");
document.getElementById()メソッドを使って、idが"score"のスパン要素を取得しています。scoreDisplay変数に取得した要素が代入されます。このスパン要素は、スコアが表示される部分を指定します。
let score = 0;
スコアを保持するための変数です。初期値は0で、クリックするたびにこの変数が増えます。
clickButton.addEventListener("click", function() { ... });
ボタンに対してclickイベントリスナーを追加しています。クリックされると、関数内の処理が実行されます。
score++;
ボタンがクリックされるたびに、score変数を1つ増やします。これにより、クリックした回数（スコア）が更新されます。
scoreDisplay.textContent = score;
スコアを表示するスパン要素のtextContentプロパティに、更新したスコアの値を設定します。これにより、画面上にスコアが表示されます。

少しずつ細分化したら分かりやすい

htmlが画面の表示部分で、clicker_game.jsはscoreの変数を処理しています。2手に分かれて処理する使用です。jSファイルは必要なら3つでも4つでも作れます。

上のコードも色々とありますが、一気に覚えると分からないですが、少しずつ覚えて行けば良いです。

変数について解説

上のコード群の中から、まず最初に覚えて欲しいのは変数です。試しにスコアをマイナス１ずつする処理にしたいなら

const clickButton = document.getElementById("clickButton");
const scoreDisplay = document.getElementById("score");

let score = 0;

clickButton.addEventListener("click", function() {
  // クリックするたびにスコアを-1ずつ減らす
  score--;
  // スコアを表示する
  scoreDisplay.textContent = score;
});

変更内容は、score++;　を　score--;　です。

他にはscore += 5;ならスコアが5ずつ増えます。
続いて掛け算　score *= 2;ならスコアを2倍にします。
割り算なら score /= 2;でscoreの値を2で割ることを意味します。

変数はプログラムでデータを一時的に保存するためのコンテナです。プログラムが実行される過程で、データを保持したり更新したりする際に変数を利用します。変数はプログラムの中で名前を持ち、その名前を使ってデータにアクセスします。

JavaScriptにおいて、変数を宣言する方法は以下のようになります：

javascriptCopy codelet score; // 変数の宣言（値は未定義）

letキーワードを使って変数を宣言します。この場合、scoreという変数が宣言されていますが、値は未定義です。初期値を与えない場合は、変数の値はundefinedとなります。

変数に値を代入するには、以下のようにします：

javascriptCopy codescore = 100; // 変数に値を代入

変数には様々なデータ型の値を代入することができます。例えば、整数や小数、文字列、配列、オブジェクトなどが挙げられます。

変数を宣言と同時に初期化することもできます：

javascriptCopy codelet playerName = "Alice"; // 変数の宣言と初期化
let age = 30;
let scores = [90, 85, 95];

変数は値を代入したり、更新したりできます：

javascriptCopy codelet x = 5; // xに5を代入
x = x + 3; // xの値に3を加えて再代入（xの値は8になる）

また、constキーワードを使って定数を宣言することもできます。定数は一度値を代入すると、その後変更できません：

javascriptCopy codeconst PI = 3.14; // 定数PIを宣言して3.14を代入（再代入不可）

変数はプログラム内で情報を保持するために非常に重要な役割を果たしています。JavaScriptではletとconstキーワードを使って変数を宣言し、データの保持や更新に活用します。

まとめ

ゲームを作る時には文字や数字を変化させることは、良くあることです。
次回はその辺りの解説をします。

つづく

この記事が参加している募集

#AIとやってみた

27,969件

この記事が気に入ったらサポートをしてみませんか？