じゃんけん (rock paper scissors)

JavaScriptの学習用のプログラムです。「もし〜なら」の形のプログラムを学びます。

Step0

HTMLとJavaScriptのファイルを配置してみよう。

• index.html
• index.js

★問題 変数ってなんだろう? handの中身を変えてみよう。

POINT!
- document.getElementById でHTMLの要素を見つける
- .innerHTML で何を表示するか変えられるよ!

Step1

キー入力を

• '1' → ぐー
• '2' → ちょき
• '3' → ぱー

で表示します。

★問題 それぞれのキーコードを調べてみよう。

POINT!
- window.onkeydown で キー入力の取得
- 「キーコード」で押したキーが何かわかるよ!
- console.log は隠れた人気者。(調べものや途中経過の記録に便利)
- if (〜) {・・・} で「もし〜なら・・・」

Step2

★問題 文字で表示する代わりに、手の画像を表示してみよう。

POINT!
- 画像を使うときは<img>タグ

Step3

コンピュータ対戦にします。コンピュータはランダムな数をつくることができます。

★問題 コンピュータが作った数をジャンケンの手として表示しよう。

POINT!
- Math.random() は、0から1までの小数をランダムに
- Math.ceil() は、小数を切り上げて整数に

Step4

じゃんけんの勝ち負けを判定します。

• ぐー vs ちょき
• ちょき vs ぱー
• ぱー vs ぐー

のとき、左の手が勝ちます。

★問題 判定も画像にしてみよう。

★問題 ぐーちょきぱーを数字に見立てて、もう少しプログラムを簡単にできないか考えてみよう。

POINT!
- ぐーちょきぱーは強い順にならんでいます。

StepX (おまけ)

時間があったらトライしよう。

配列や関数を使って、プログラムを整理すると、より本格的なプログラムに! 詳しくは先生に聞いてください。