見出し画像

【超初級JavaScript講座　2回目】　変数を利用して表示された画像を変更しよう

ミネヂル

前回は変数の和・差・積・商について軽く触れました。ゲームと呼ぶにはおこがましいボタンをクリックすると、数が増えていくだけの簡単な計測マシーンです。つかったコードはこちらです。

〇〇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;
});

ボタンを押しているだけでは味気ないので変えてみましょう。

画像表示

岩の画像を表示させてスコアが10回を越えたら、割れた岩の画像に変えます。

コードはこう変わりました。
〇〇.html　（〇〇の部分は好きに名前を付けて良いです）

<!DOCTYPE html>
<html>
<head>
  <title>クリックゲーム</title>
</head>
<body>
  <h1>クリックゲーム</h1>
  <p>スコア: <span id="score">0</span></p>
  <img id="clickImage" src="g1/1.png" alt="クリックしてスコアを増やす" style="cursor: pointer;">

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

clicker_game.js

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

let score = 0;

clickImage.addEventListener("click", function() {
  // スコアを1ずつ増やす
  score++;
  // スコアが10になったら画像を変更
  if (score === 10) {
    clickImage.src = "g1/2.png";
  }
  // スコアを表示する
  scoreDisplay.textContent = score;
});

新しく出てきてコードはこれです。
画像を表示するために同一階層にg1フォルダーを作り、その中に適当に作った1.pngと2.pngの画像を入れておきます。


面倒くさい人ようにサンプル画像の岩の1.png


2.pngは岩が割れて何か出てきたイメージです

自分で作る時は好きコードを変えてファイルの名前とか画像を変えても大丈夫です。

コードの解説

変更内容は、button要素をimg要素に置き換えて、idをclickImageに変更しました。また、画像がクリックできるようにstyle="cursor: pointer;"を追加しました。

さらに、イベントリスナーをclickImageに追加して画像がクリックされた時にスコアが増えるようにし、スコアが10になったときに画像を変更するようにしました。clickImage.src = "g1/2.png";の部分で画像を切り替えています。

コードについては上記のサイトでも詳しく解説しているから、良かったら参照して下さい。


これにより、任意の画像を使ってクリックゲームを作成し、画像をクリックすることでスコアが増え、スコアが10に達すると別の画像に変わるゲームが完成します。

これが何に使えるかというと
脱出ゲームならば、ヒビの入った壁を何度か叩くと割れるとかに使えそうです。
ホラーなら3回触ると呪われる。
エロゲーなら乳首を5回タッチすると絶頂させるなど、応用もできます。

このように変数を使って色々な事をできます。




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