見出し画像

JavaScriptで簡単ゲーム！

donguri

このサイトで紹介されているコードがほんとちょうど分かりやすくて短くまとまっていて理解しやすいと思うのでご紹介。

全体は以下。これだけで全てです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
   <form name="form">
  Q1)日本で一番大きい山はなんでしょう？<br>
  <font size="2" color="#FF0000">
    （答え記入後、「回答する」をクリックしてください）
  </font><br>
    答え：<input type="text" name="anser">
  <input type="button" value="回答する" onClick="check()">
</form>
<div id="feedback"></div>

<script>
function check(){
  const feedback = document.getElementById("feedback")
  if (document.form.anser.value=="富士山"){ 
    feedback.textContent = "正解！富士山の標高は3776mです。ちなみに2番目に高い山は北岳で3193mです。"}
  else {alert("残念、間違いです")}
}
</script>
  
</body>
</html>

JsBinで実行してみます。

問題が1問、答えの入力欄があって回答するというボタンがあります。

ホームページの中でJavaScriptで操作する形になっています。

ホームページはHTMLと呼ばれるマークアップ言語が使われます。プログラム言語ではないところが注意点です。マークアップは画面表示させるためのものでいろんな動きをさせるには別にJavaScriptを使います。

まず最初、見た目を作って行きます。HTMLですね

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>

</body>
</html>

これが基本です。

<body>
Hello
</body>

としてやると"Hello"と画面に表示されます。ということでこの"body"要素に挟まれたところに画面表示させたいものを書いて行きます。

<form name="form">
  Q1)日本で一番大きい山はなんでしょう？<br>
  <font size="2" color="#FF0000">
    （答え記入後、「回答する」をクリックしてください）
  </font><br>
    答え：<input type="text" name="anser">
  <input type="button" value="回答する" onClick="check()">
</form>

<form>: フォーム要素を使っています。

<font size="2" color="#FF0000">

文字の大きさと色を指定しています。

<font size="2" color="#FF0000">
（答え記入後、「回答する」をクリックしてください）
</font><br>

フォーム全体を見ると

<form>
 　 <font>
　　　// 表示させたい文字
　 </font>
</form>

ちなみに"<br>"は改行しなさいとう命令となります。そして入力欄は

答え：<input type="text" name="anser">

答えを入れて押すボタンは

<input type="button" value="回答する" onClick="check()">

これで表示部分はほぼ、完成です。もう1行

<div id="feedback"></div>

を付け加えて完成です。あとはボタンを押した時の動きをJavaScriptで書いて行きます。

onClick="check()"

この部分で使われる"check()関数を作ります。

 <script>
   function check(){
     const feedback = document.getElementById("feedback")
     if (document.form.anser.value=="富士山"){ 
    feedback.textContent = "正解！富士山の標高は3776mです。
    ちなみに2番目に高い山は北岳で3193mです。"}
     else {alert("残念、間違いです")}
   }
 </script>

JavaScriptを書く部分は

<script>
　　// 処理を書きます。
</script>

となります。そして関数check()を作ります。

   function check(){
     const feedback = document.getElementById("feedback")
     if (document.form.anser.value=="富士山"){ 
    feedback.textContent = "正解！富士山の標高は3776mです。
    ちなみに2番目に高い山は北岳で3193mです。"}
     else {alert("残念、間違いです")}
   }

この関数が実行されたときにまず、

const feedback = document.getElementById("feedback")

が実行され、表示部分で最後に記入したところ

<div id="feedback"></div>

"feedback"と名前がついた<div>の領域を変数で取得しおきます。これでこの部分を操作できるようになります。

あとは答えをチェックするコードになります。

 if (document.form.anser.value=="富士山"){
 //処理
}

答えが"富士山"であれば以下の処理が実行される仕組みです。

 feedback.textContent = "正解！富士山の標高は3776mです。ちなみに2番目に高い山は北岳で3193mです。"}

正解であれば、先ほど取得した"feedback"をつかって文字を表示させます。

feedback.textContent　・・・　文字を表示させる命令

if (document.form.anser.value=="富士山"){
　　　//処理
}
else {alert("残念、間違いです")}

答えが"富士山"以外が入れば"else"以降が実行され、"残念、間違いです"とアラートがでます。

今回のコードでは、表示、、ボタンを押すアクション、データの受付、判定、エリアの取得、取得したものを操作して表示させる、ということが詰まったものとなっています。

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