CATEGORY

Canvas

  • 2013年11月16日
  • 2022年9月30日
  • 0件

15 PUZZLE Ver.1.02(MENU追加)

これまでは、画像をプレーヤーが選択できず、ゲーム開始時にランダム選択としていました。その為、特定の画像を選ぶには、何度かブラウザで再読み込みが必要でした。 今回は、最初に、画像を選択するメニュー画面「15 PUZZLE MENU (写真16枚)」を表示するようにしました。 前回から更に6枚追加し、全16枚から選んで開始します。 実を言うと、この画面の画像は16枚の写真を縮小表示しているのではなく、 […]

  • 2013年11月11日
  • 2022年9月30日
  • 0件

15 PUZZLE Ver.1.01(ちょっと手直し)

ゲームクリア後に原画を3秒だけ表示するようにしてみました。 3秒経過後は、ポップアップを表示します。 PCのブラウザ(Firefox)で表示するとこんな感じ。 右の画像をクリックすると実際のゲームページを開きます。 また、画像を5つ増やしました。以下の10個からランダム選択となります。

  • 2013年11月7日
  • 2022年9月30日
  • 0件

15 PUZZLE

日経ソフトウェア2013年12月号の92ページから掲載「HTML5でゲームを作ろう」で紹介されていた15パズルを作成してみました。 Canvas で制作したのは、これまで円グラフと折れ線グラフぐらい。たまにはゲーム制作も楽しそうだな・・・と、これを試したくて、日経ソフトウェア(月刊誌)を初購入。 紙面を見てソースを打ち込んだので、入力ミスが多かったのですが、ブラウザ(Firefox)のWeb開発→ […]

  • 2012年6月27日
  • 2013年11月7日
  • 0件

Canvasで折れ線グラフ IE8対応

円グラフを描いた際は、IE8対応に、Google謹製のexcanvas.js を使用しました。 今回は文字を描く関数fillText()を使ったのですが、excanvas.jsが対応しておらず、そこでエラーを吐き動作停止。 Web検索したら、文字も書けるJavaScriptライブラリ「uupaa-excanvas.js」があると言うことで、それを組み込んでみました。 このライブラリは、マイクロソフ […]

  • 2012年6月25日
  • 2013年10月25日
  • 0件

Canvasで折れ線グラフを描いてみた

初めてcanvasタグを使って折れ線グラフを描いてみました。 これまでなら、エクセル等の表計算ソフトでグラフを作って、それをキャプチャーして画像にしていた訳ですが、そんな必要もなくなったので試してみました。 エクセルのように、なにも考えずに生成させることはできませんが、JavaScriptの配列変数にデータを入れ、なんとか描画できました。 グラフの下のデータ表(テーブル)もJavaScriptで生 […]

  • 2012年6月24日
  • 2013年11月7日
  • 0件

excanvas.js では表示が違う?

昨日はCanvasで初めて円グラフを表示させて見ました。 サンプルソースを見ていて、ふと、「進捗率を100%、あるいは0%にしても問題無いかな?」と思い、試してみました。 最初の画像は、6%,10%,5%を指定しており、全てのバージョンで問題なく同様の表示でした。 次の(2番目と3番目の)画像は、共に100%,0%,5%を指定しています。 IE9では問題なく表示しました。 画像の掲載は省略しますが […]

  • 2012年6月23日
  • 2013年11月7日
  • 0件

Canvas で 円グラフを描く

画像を使わず、JavaScriptで図形が描けると言う<canvas>タグを使って、リニューアル作業の進捗状況を円グラフにしてみました。 これなら進捗状況が進んでも、値を変えるだけで、画像を作る必要がないので楽チンです。 ただし、IE7、IE8はCanvasに対応していないようなので、Googleが提供のExplorerCanvasというJavaScriptライブラリ(excanvas.js)を組 […]