JavaScriptで簡単な双六をつくります。

超シンプル編

まず超単純なものから。

一応、双六として最低限の条件は満たしていると思います。ボタンをクリックしたら1~6の乱数を生成して、現在の点数に追加していきます。setTimeout関数を使って1秒後に自分のサイコロを転がして、2秒後にコンピュータのサイコロを転がして結果を表示しています。また処理中はボタンを非表示にしてクリックできないようにしています。

ただ、これだけではつまらないです。

演出を加える

サイコロを描画して目が出たら自分の駒をその数だけピョンピョンと跳ねるように移動させます。

HTML部分

JavaScript部分

app.js

ゲーム開始前はサイコロを転がすボタンは非表示にしておきます。ゲーム開始のボタンがクリックされたらサイコロを転がすボタンを表示させ、ゲーム開始のボタンは非表示にします。

またゲーム開始に伴う変数の初期化も行ないます。プレイヤーの位置、サイコロの目を0に戻します。そして描画処理をおこないます。

ゲームが終わったら、ゲーム開始のボタンを表示してサイコロを転がすボタンを非表示にします。

描画処理をする関数DrawFieldを示します。

最初にcanvasの高さから各プレイヤーのマスを描画するY座標を求めます(baseYPosPlayer0とbaseYPosPlayer1)。

ShowDice関数はcanvas上に引数で指定された座標に指定された大きさでサイコロの目を描画します(第一引数が1~6の場合のみ)。

GetValue関数はサイコロを転がしたときの1~6までの乱数を取得するためのものです。

サイコロを転がすボタンをクリックしたときの処理を示します。

まず処理中はサイコロを転がすボタンを非表示にします。

GetValue関数で目を取得します。これによって勝負がついているかもしれないのでそのチェックをおこないます。どれだけプレイヤーの駒を進めるかが取得できたら描画の処理をおこないます。

まずサイコロが転がっているように最初はバラバラの数字を表示させます。そのあとGetValue関数で得られた値と同じ目を表示させます。そのあと駒を上下に移動させながら背景を左にスクロールさせて移動しているように見せかける処理をおこないます。そのあとコンピュータ側も同様の処理をおこないます。

駒を移動させる処理をするMovePlayer関数を示します。実際にはshiftXの値を増やして背景を左にスクロールさせているだけです。また移動中は駒が跳ねているように見せるためにjumpUpdateCountXを変更して表示されるY座標を変更しています。