Canvas

• 2016年11月2日
• 2016年12月28日
• 0件

ブタさん背景に祝日旗を表示

祝日の場合、それと判りやすいように、ブタさんの背景に旗を表示するようにしました。 ・・・「ブタの丸焼き」お子様ランチ風に見えたらゴメンナサイ・・・。 旗の描画は下記トンカツソースの159〜224行目辺り。 今回もテスト用Webサーバー環境で、時刻を進めて確認してみました。 年末年始中の祝日に関しては、吹き出し上で「元日」「振替休日」と表示せず、祝日旗のみとしました。 1月3日は旗日（祝日）ではない […]

続きを読む

• 2016年10月18日
• 2016年12月28日
• 0件

ブタさんバルーン表示を改修

バルーンの背景色を、薄青（月、火、木）、薄緑（水、金、土）、薄赤（日、祝日、休診日）で変わる様にしました。 その他、ブダさんの足の色を濃くしました。 さらに、祝日の情報を追加し、該当日には「休診」を知らせるバルーンも表示するようにしました。 今回は、過去を表示する事は無いので、PHPカレンダーで作成した連想配列から、2016年11月〜2020年12月の分を転用しました。 年末年始とお盆休みの休診日 […]

続きを読む

• 2016年10月17日
• 2016年12月31日
• 0件

バルーン表示にブタさんを追加

診療時間の表で、該当曜日の上にブタさんが顔を出している絵を追加しました。 ブタさんは、HTML5のCanvas機能で描きました。 （下記ソースの72〜173行目） 吹き出しの「・・・でブー！」は御愛嬌。 現在時刻はサーバー時計を参照しています。 今回も、ローカルテスト用Webサーバー環境が役立ちました。 以下はサーバーの時計を進めて行きながら、クライアントでの表示を確認したものです。 「ブタさん吹 […]

続きを読む

• 2016年9月9日
• 2022年10月9日
• 0件

アナログ時計のデザイン変更

デザイン変更 前回の時計から、短針（時針）、長針（分針）、秒針のデザインを変更しました。 CanvasのquadraticCurveTo()メソッドで、ペジェ曲線で描いたのですが、なかなか難しい・・・。 ・・・もしかすると、良いツールがあるのかも知れない・・・。 インラインフレームに表示してみました。 みっともないソースはこちら

続きを読む

• 2016年9月8日
• 2022年10月9日
• 0件

アナログ時計を追加

「診療時間と休診日」ページにアナログ時計を追加 診療時間のページに、「現在の時刻」と「カレンダー」を追加しました。（初回「F5」キーで再読み込み必要かも） 「現在の時刻」は、JavaScriptで閲覧端末から時刻情報を得て、HTML5のCanvas機能でアナログ時計を描画しています。 以下のサイトを参考にさせて頂きました。ありがとうございました。 HTML5 – Canvas でアナロ […]

続きを読む

• 2016年9月7日
• 2016年12月27日
• 0件

本日の日付と曜日をバルーン表示

診療時間のページに、表示している「本日の日付と曜日」を吹き出し風に変更しました。 曜日が変わると、該当する曜日の上に、吹き出しが移動するようにしました。 吹き出しは、背景画像ではなく、Canvasで描画。 本日の日付はレンタルサーバーからPHPにより取得。 ただし、吹き出しの位置は、クライアントＰＣの時計からJavaScriptにより取得した日付情報を元に表示。 その為、閲覧環境の時計が遅れていた […]

続きを読む

• 2014年10月2日
• 2022年9月29日
• 0件

ジャンプアクションゲーム

日経ソフトウェア2014年11月号「HTML5でゲームを作ろう（第12回）」に掲載された「横スクロールジャンプアクションゲーム」です。 ・・・連載は最終回。 右の画像をクリックするとゲームページを表示します。 ゲームは、プレイヤーをジャンプさせて、障害物（落とし穴、壁）を避けて、できるだけ走り続けるだけです。 ただし、飛んで来る鳥にぶつかってもゲームオーバーとなるので注意して下さい。 ジャンプ操作 […]

続きを読む

• 2014年8月28日
• 2022年9月29日
• 0件

卓球ゲーム

日経ソフトウェア2014年10月号「HTML5でゲームを作ろう（第11回）」に掲載されたオンライン対戦型の「卓球ゲーム」です。 右の画像をクリックするとゲームページを表示します。 今回も、プログラムソースには手を加えていません。 2014/08/30gameClient.js の33〜38行目を追加。画面を閉じたメッセージをサーバーに送信。 オンライン対戦ゲームなので、相手がゲームページを開いてく […]

続きを読む

• 2014年7月31日
• 2022年9月29日
• 0件

Fish Shooting

日経ソフトウェア2014年9月号「HTML5でゲームを作ろう（第10回）」に掲載されたシューティングゲーム「Fish Shooting」です。 右の画像をクリックするとゲームページを表示します。 遊び方は、プレイヤーの位置をカーソルキーで上下左右に動かし、「Ｚ」キーを押してモリを発射し、向かってくる魚を仕留めます。 サバが３点、サメが２点、クラゲが１点。 クラゲ、魚（サバ）、サメのいずれかに触れら […]

続きを読む

• 2014年6月27日
• 2022年11月26日
• 0件

神経衰弱ゲーム

日経ソフトウェア2014年8月号「HTML5でゲームを作ろう（第9回）」に掲載された「神経衰弱」です。 今回もプログラムソースには手を加えていません。 2015年7月26日追記・・・「sinsui.js」ファイル修正。ゲームをクリアした後、２回目以降のプレイから、カウントダウンのスピードが早くなっていました。そうならないように改修しました。・19行目・・・変数「timer」を追加。・129行目・・ […]

続きを読む

• 2014年5月29日
• 2023年1月6日
• 4件

箱入り娘パズル

日経ソフトウェア2014年7月号「HTML5でゲームを作ろう（第8回）」に掲載された「箱入り娘パズル」です。 今回もプログラムソースには手を加えていません。HTML は少し手を加えました。（※） 右の画像をクリックすると実際のゲームを表示します。 箱の中に収められている10個の駒を動かして、一番大きな駒である「娘」を箱から出してやってください。 ・・・難解過ぎて、いまだクリアできず。 ・・・なので […]

続きを読む

• 2014年4月28日
• 2022年9月29日
• 0件

スネークゲーム

マムシ、アオダイショウ、ヤマカガシ、・・・、いきなりニョロニョロと動くものに出遭っても驚くし、トグロを巻いて静かに休んでいる姿を見つけても、ゾクッと悪寒が走る。毒を持たない種類にしても、大蛇を首に巻いて上機嫌な人の気が知れない。どうしても嫌悪感が先に立つ。マムシ酒もハブ酒も興味なし。ヘビの抜け殻も要りません。 そんな前置きは置いといて、日経ソフトウェア2014年6月号「HTML5でゲームを作ろう（ […]

続きを読む

• 2014年3月28日
• 2022年9月29日
• 0件

落ち物パズル

日経ソフトウェア2014年5月号「HTML5でゲームを作ろう（第6回）」に掲載された「落ち物パズル」です。 右の画像（タブレットで表示した画像）をクリックすると実際のゲームページを表示します。 落ち物（ピース）は動物で、犬・ゾウ・サル・猫・パンダの5種類です。（Inkscapeでお絵描き） ピースは2個セットで落ちてきます。プレーヤーは落下中に、カーソルキー（または下部ボタン）を押して、ピースを動 […]

続きを読む

• 2014年3月2日
• 2022年9月29日
• 0件

ブロック崩し

日経ソフトウェア2014年4月号「HTML5でゲームを作ろう（第5回）」に掲載された「ブロック崩し」です。 プログラムソースは、表示エリアに関係する部分のみ変更してみました。 「横幅640×高さ700」を「横幅300×高さ400」に変更し、タブレットとスマートフォンで操作できるようにしたが、ＰＣでは小ぢんまりした画面に・・・。 背景画像のグラデーション設定部分は変数（定数）を参照するように変更しま […]

続きを読む

• 2014年2月4日
• 2022年9月29日
• 0件

モグラ叩き

モグラは畑の農作物を食い荒らす害獣だと思っていたが、動食性（ミミズや昆虫の幼虫）であり、実際に食害しているのはモグラのトンネルを利用したネズミとのこと。 モグラは、主にミミズ（土龍）を食うので「土龍追い」などと呼ばれた。モグラを「土竜」と書くのは実は誤りらしい。確かに竜というほどスマートじゃない。 そんなこんなで、日経ソフトウェア2014年3月号「HTML5でゲームを作ろう（第4回）」に掲載された […]

続きを読む

• 2013年12月26日
• 2022年9月29日
• 0件

七並べ（しちならべ）

日経ソフトウェア2014年2月号「HTML5でゲームを作ろう（第3回）」に掲載されたものです。 特にプログラムソースには手を加えていません。 右の画像をクリックすると実際のゲームを実行します。 コンピュータ3人（COM1～COM3）とプレーヤー1人（YOU）の4人対戦で順位を競います。 52枚（ジョーカー無し）のカードから、ランダムにカードを配り、7のカードは場（ステージ）に出されます。 最初はコ […]

続きを読む

• 2013年12月9日
• 2022年9月29日
• 0件

Maze Ver.1.01（ゴール後に足跡を表示）

迷路をクリアした後の全体表示に、プレーヤーの足跡を表示するようにしました。 右の画像をクリックすると実際の迷路ゲームを表示します。 JavaScriptのコレクション（またはコンテナ）と言うデータを格納する仕組み（高機能な配列）を使用し、プレーヤーの操作を記録してみました。 配列宣言は、maze101.js の21行目。 配列にセットする場合は、push()メソッドを使います。同91行。要素数はプ […]

続きを読む

• 2013年12月7日
• 2022年9月29日
• 0件

Maze

「迷路」は英語で「maze（メイズ）」と言うようです。なので、パズルとしての迷路は、迷図（めいず）という当て字が使われるらしいです。 今回も日経ソフトウェア2014年1月号「HTML5でゲームを作ろう」に掲載されたものです。 右の画像をクリックすると実際のゲームを表示します。プレーヤー（■）を移動させるのはマウスでもできますが、上下左右のカーソルキーの方が扱いやすいようです。 そうそう、スタートは […]

続きを読む

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

15 PUZZLE Ver.1.04（配列記述見直し）

アイソン彗星を肉眼で見てみたいと思いますが、悪天候が続く予報で見れそうにありません。・・・今後は、明け方・・・と言うよりは、未明の空に見えるようです。 「国際宇宙ステーション（ＩＳＳ）に滞在中の若田光一さんが、太陽に近づきつつあるアイソン彗星を超高感度カメラで撮影」というニュースをTVでは観ました。 2013/11/30追記NASAによると、アイソン彗星は29日未明、太陽に最接近した際に崩壊し、ほ […]

続きを読む

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

15 PUZZLE Ver.1.03（写真説明追加）

ゲームをクリアした後に、写真の下に説明文を表示するようにしました。 映画「スターウォーズ」最新作エピソード７が2015年12月18日に公開予定らしい。 まだまだ、だいぶ先の話ですが、今から楽しみです。 そんなこんなで、今回は、写真に星雲・星団・銀河を使用してみました。 画像はネット上から、説明文はウィキペディアのサイトから拝借いたしました。 説明文がどのように表示されるかは、画像をクリックして実際 […]

続きを読む