体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

自分でも作ってみたくなる!HTML5でできているゲーム10選

HTML5を使えば簡単にゲームを作ったり、やったりと楽しむことができます。

その中でHTML5に興味をもってもらえるようなゲームを10個紹介していきたいと思います。本格的なゲームをHTML5だけで作成できてしまうので、自分で作るとなった際に参考になるでしょう。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

1. グラディウス

おなじみのみんながやったことがあるあのゲームがなんとHTML5で再現されています。もし知らない方はこの機会にぜひやってみてください。

操作方法も簡単でまずは「スペース」がスタートボタンです。 「Z」でショット「C」でパワーアップです。

矢印キーが上下左右に対応しています。敵を倒してエネルギーを集めて、自分の好きな部分を強化してボスに挑みます。

グラディウス

 

2. スライダーパズル

これは1~15までの数字を順番に並べるゲームで、昔よくありましたね。

結構はまって時間を忘れて何時間もプレイしてしまいます。

クリックするだけで自動で隙間のところにブロックが動くので簡単です。

スライダーパズル

 

3. slither.io

ミミズを操作して大きくしていく簡単なゲームかと思いきや結構難しいです。

マウスの矢印の向いてるほうにミミズが移動して、光の球をとっていくと巨大になっていきます。

頭が相手ミミズの体に触れるとゲームオーバーになり、大きくなるにつれて長くなり難易度が上がってきます。

相手にあまり近づかずに、相手に触れずにどれだけ大きくできるかを競うゲームです。

slither.io

 

4. Zop

これは60秒で何個ブロックを消せるかを競うゲームです。

マウスで縦横同じ色のブロックをドラッグで線を結びます。ななめは消せません。

ブロックを消すと上からブロックが降ってきて、新たに消せるか所が増えます。

1 2次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。