これまでは、画像をプレーヤーが選択できず、ゲーム開始時にランダム選択としていました。その為、特定の画像を選ぶには、何度かブラウザで再読み込みが必要でした。 今回は、最初に、画像を選択するメニュー画面「15 PUZZLE MENU （写真16枚）」を表示するようにしました。 前回から更に6枚追加し、全16枚から選んで開始します。 実を言うと、この画面の画像は16枚の写真を縮小表示しているのではなく、 […]
ゲームクリア後に原画を3秒だけ表示するようにしてみました。 ３秒経過後は、ポップアップを表示します。 ＰＣのブラウザ（Firefox）で表示するとこんな感じ。 右の画像をクリックすると実際のゲームページを開きます。 また、画像を５つ増やしました。以下の１０個からランダム選択となります。
円グラフを描いた際は、IE8対応に、Google謹製のexcanvas.js を使用しました。 今回は文字を描く関数fillText()を使ったのですが、excanvas.jsが対応しておらず、そこでエラーを吐き動作停止。 Web検索したら、文字も書けるJavaScriptライブラリ「uupaa-excanvas.js」があると言うことで、それを組み込んでみました。 このライブラリは、マイクロソフ […]
初めてcanvasタグを使って折れ線グラフを描いてみました。 これまでなら、エクセル等の表計算ソフトでグラフを作って、それをキャプチャーして画像にしていた訳ですが、そんな必要もなくなったので試してみました。 エクセルのように、なにも考えずに生成させることはできませんが、JavaScriptの配列変数にデータを入れ、なんとか描画できました。 グラフの下のデータ表（テーブル）もJavaScriptで生 […]
昨日はCanvasで初めて円グラフを表示させて見ました。 サンプルソースを見ていて、ふと、「進捗率を100%、あるいは0%にしても問題無いかな？」と思い、試してみました。 最初の画像は、6%,10%,5%を指定しており、全てのバージョンで問題なく同様の表示でした。 次の（2番目と3番目の）画像は、共に100%,0%,5%を指定しています。 IE9では問題なく表示しました。 画像の掲載は省略しますが […]
画像を使わず、JavaScriptで図形が描けると言う＜canvas＞タグを使って、リニューアル作業の進捗状況を円グラフにしてみました。 これなら進捗状況が進んでも、値を変えるだけで、画像を作る必要がないので楽チンです。 ただし、IE７、IE8はCanvasに対応していないようなので、Googleが提供のExplorerCanvasというJavaScriptライブラリ（excanvas.js）を組 […]