Skip to content

coderdojo-tokyo/rock-paper-scissors

Folders and files

NameName
Last commit message
Last commit date

Latest commit

32702ba · May 20, 2012

History

6 Commits
May 20, 2012
May 20, 2012
May 15, 2012
May 15, 2012
May 15, 2012
May 15, 2012
May 20, 2012

Repository files navigation

じゃんけん (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

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

paper

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

Step3

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

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

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

Step4

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

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

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

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

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

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

StepX (おまけ)

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

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published