CATEGORY

HTML5でゲーム

  • 2023年1月30日
  • 2023年2月6日
  • 0件

箱入り娘 Ver.1.03

箱入り娘と言っても、竈門 禰豆子(かまど ねずこ)の事ではありません。 ・・・「箱入り娘」で画像検索したら「ねずこ」がヒットしてワロタ・・・。 今回パズルの方は、以下の2点を改良しただけで、使用画像は前回と変えていません。 以下の画像をクリックすると実際のゲームを表示します。 タブレットでの表示を改善しました! Ver.1.02 → Ver.1.03 HTMLのmeta要素で、viewportの設 […]

  • 2022年12月28日
  • 2023年2月14日
  • 0件

箱入り娘 Ver.1.02

8年ほど前に投稿した箱入り娘パズルですが、今年9月に文字をイラストに置き換えたVer.1.01を掲載。 これまで、駒の移動は最小駒二個分の隙間が空いていても、最小駒の単位で動かす必要がありました。 (その為、手数のカウントも増えていました。) 今回、2クリックで移動していたところを、1クリックで移動可能としました。 以下の画像をクリックすると実際のゲームを表示します。 パズルで使用している画像は2 […]

  • 2022年8月1日
  • 2023年1月5日
  • 0件

箱入り娘パズル Ver.1.01

8年ほど前に投稿した箱入り娘パズルです。 暇つぶしに、フリーのイラストを貼り付けてみました。 画像サイズは倍の大きさにしました。 以下の画像をクリックすると実際のゲームを表示します。 また、クリアした際のポップアップ表示をやめタイトル変更に。 クリア後、約15秒で元に戻るようにしました。 パズルで使用している画像は2つ。 背景の画像・・・こちらは前作と同じ。 ソースファイル「hakoiri_101 […]

  • 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」です。 右の画像をクリックするとゲームページを表示します。 遊び方は、プレイヤーの位置をカーソルキーで上下左右に動かし、「Z」キーを押してモリを発射し、向かってくる魚を仕留めます。 サバが3点、サメが2点、クラゲが1点。 クラゲ、魚(サバ)、サメのいずれかに触れら […]

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

神経衰弱ゲーム

日経ソフトウェア2014年8月号「HTML5でゲームを作ろう(第9回)」に掲載された「神経衰弱」です。 今回もプログラムソースには手を加えていません。 2015年7月26日追記・・・「sinsui.js」ファイル修正。ゲームをクリアした後、2回目以降のプレイから、カウントダウンのスピードが早くなっていました。そうならないように改修しました。・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」に変更し、タブレットとスマートフォンで操作できるようにしたが、PCでは小ぢんまりした画面に・・・。 背景画像のグラデーション設定部分は変数(定数)を参照するように変更しま […]

  • 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(配列記述見直し)

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

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

15 PUZZLE Ver.1.03(写真説明追加)

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

  • 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開発→ […]