JavaScriptプログラミング 初心者 入門用 乱数編

JAVA 練習問題
とあるJAVA言語のオブジェクト指向問題

とあるJavaScriptの練習問題

このページはJavaScript目当てで来る方が多いようなので、久々にプログラム関係の初心者向けの練習問題を書いてみます。
個人でJavaScriptを学習したい人に向いていると思います。
今回は初心者でも作れる、JavaScriptで簡単なゲームを作ってみようと思います。
この手のプログラム入門で・・・みたいな書籍でよくあるスロットゲームです。

私もよくPCスクールなどのプログラム初心者体験コースでJavaScriptでスロットゲームをテーマに初心者向け講義をしていました。
今回はその詳細版です。結構長いので数回にわけて記事にしていこうと思います。

さて、スロットゲームというと、どういったものをイメージするでしょうか?
イラストがコロコロ変わって、3つ揃えるとメダルがでる。そんなゲームだったかと思います。
しかし、いきなりイラストが変わって、3つ揃ったか判定して・・・
みたいなのは難しいので、まずはイラストが変わるための仕組みを考えてみましょう。

イラストがコロコロかわるにはイラストの画像番号を変更することで行います。
しかし、毎回プログラムが動くたびに、この番号が変化しなければいけません。
しかも、ランダムにです。そこでよく使われるのが乱数発生させる処理です。
この処理を次回説明する、タイマー処理とあわすことで、毎秒番号が変化するようになるのです。

では乱数を発生させる処理はJavaScriptではどう書くのでしょうか?
これがとても簡単です。下記のようなJavaScriptのコードになります。

Math.random()

たったこれだけです。この命令でJavaScriptは乱数を発生させ、
毎回プログラムの命令が呼ばれるたびに適当な数値を吐き出すのです。
今回はこの数値を画面に表示するJavaScriptのプログラムを書いて試してみましょう。

<script>
document.write( Math.random())
</script>

これでページを見てみましょう。サンプルページはこちらです。
ちなみに上記のJavaScriptのサンプルでは小数点数の値が出てしまいますので、
もし、整数でしかも乱数の大きさを指定したい場合は次のように書きます。

<script>
document.write( Math.floor( Math.random() * 5 ) )
</script>

これで0〜5までの数値がランダムで出力されます。サンプルページはこちらです。

実は「 Math.random()」だけではJavaScriptでは0〜1未満の数値を発生させる意味になるので、
その数値に5を掛けて、さらに小数点数を切り捨てにする「Math.floor」で整数にしているのです。
例えば乱数の結果が「0.25345」とかならばそれに5を掛け算して
「1.29」さらに小数点を切り捨てて結果は「1」と表示されるわけです。

これでイラストに番号をつけて管理し、乱数で選ばせて表示するというのができるようになっていくわけです。
最後に数値だけでちょっとだけスロットっぽくしてみましょう。
どうすればそれっぽくできるか考えてみましょう。すでにヒントは今回の記事に含まれています。

答えは次回の記事で紹介しましょう。それではまた。

JavaScriptのプログラムを勉強するのにおすすめな本を紹介しておきます。

JavaScriptプログラミングの初心者を卒業したい方に オライリー Javascript第6版


オライリーの本は少しむずかしいですが、これをしっかり理解できるようになれば、JavaScriptプログラミングの初心者は卒業できます。どんな難易度のプログラムも組めるようになるでしょう。

基礎の命令文を忘れるなら必須 JavaScriptポケットリファレンス


JavaScriptプログラミングの関数(メソッド)などを忘れるようなら、この本を持っておきましょう。
サンプルソースも載っているので、使いやすいです。開発エンジニアはだいたい皆さんこれを持っています。
この関数を理解できればプログラミング入門編はほぼクリアできるようになると思います。

初心者に優しい技術書 いちばんやさしいJavaScriptの教本


やさしいシリーズは他の言語にもあるのですが、プログラミング初心者を意識した構成になっており、とても読みやすいです。
JavaScriptプログラミングを1から学び直したいというプログラミング初心者や入門者に良いと思います。