デザイン

デザイン

【コードで遊ぼう】マリオからゼルダまで……HTML5・JS・CSSで再現!懐かしのゲーム10選!

2,880 views

読了時間 : 約2分42秒

年齢に関わらず昔懐かしのゲームは今も人気で、2016年にアメリカで発売された復刻版小型ファミコン「NES」や、今年発売された小型スーパーファミコン「SNES」の大人気ぶりがそれを証明しています。また、米Atari社もゲーム機の発売を発表しました。

 

ゲームのシンプルさもさることながら、懐かしくてつい楽しい気持ちになる昔のゲームですが、友達や家族とプレイすることで、新たな思い出を作れるというのもまた人々を惹きつける要素なのでしょう。

 

デザイナーなどは特にマリオやポケモン、ソニックに夢中になる傾向が強いようで、CodePenには実際にそれらを含め、HTML5・CSS・Javascriptで再現された昔懐かしのゲームが多く見られます。

以下に我々のお気に入り10選をご紹介します。

(イメージをクリックするとCodePenが見られます。)

 

 

1.Q*bert

このオレンジの奇妙な生き物Q*bertは80年代アメリカで爆発的な人気を誇り、土曜日の朝に当時放送されていたアニメの主人公にもなりました。こちらはCSSで作られたアニメーションですが、キャラクターがそのQ*bertであるというところがポイント。

 

 

2.Enduro

Enduroは1983年にAtari 2600用として発売されたゲームです。家にゲーム機とカセットがなくても大丈夫、このHTML5バージョンをプレイできます!

 

 

3.スーパーマリオブラザーズ

CodePenにはマリオ関連のものが山ほどあります。残念ながら全てを紹介することはできませんが、中でもMedia Query Marioはひときわ優れており、スーパーマリオブラザーズ3をアニメーションで再現しています。唯一の難点は、ブラウザを320 x 420にリサイズしないと見られないということ。

 

 

4.ソニック・ザ・ヘッジホッグ

セガといえば、ソニックですよね。1991年にメガドライブ用ゲームとして登場し、ダッシュするブルーのキャラクターは今も健在。CSSアニメーションでもその持久力を見ることができます。

 

 

5.ゼルダの伝説

ゼルダを何時間もぶっ通しでプレイした人も多いのでは?バッテリーバックアップ方式のおかげで、データをセーブできる数少ないゲームの1つでした。ここではリンクがエラー画面にかっこよく登場。

 

 

6.Asteroids

1979年に発売されたAsteroidsは、クラシックゲームの代表格。その中毒性は昔も今も変わらず、ゲームは派手なグラフィックだけが全てじゃないということがよく分かります。ブラウザ上でこのHTML5バージョンをすぐにプレイできるので、ぜひお試しを。

 

 

7.パックマン

次々とドットを食べていくこの黄色いキャラは、誰もが知っていますよね。パックマンは(のちには女性版パックマン「Ms. Pac-Man」も)当時ゲームセンターで大流行しました。以下のHTML5で再現されたバージョンも、ブラウザで簡単にプレイできますよ。

 

8.ギャラクシアン

Asteroidsと同様に1979年に発売されたギャラクシアン。当時では珍しく、家でもゲームセンターにいる感覚で楽しめるゲームでした。異次元感覚に鳴り響く効果音に親たちは頭を抱えていたものです。そしてこちらはHTML5およびJSバージョンになります。

 

 

9.ポン

家にポン(Pong)があった人は、20分もしたら飽きてしまっていたのでは?しかし、ゲーム業界の道を切り開いたとも言える、とても意味のある作品の1つです。JSバージョンでぜひお楽しみください。

 

 

10.ポケモン

ポケモンとえば、マリオに続きシリーズ累計売上ナンバー2という大人気作品。ゲームボーイでのデビューから始まり最近のポケモンGOまで、世界中で社会現象を巻き起こしました。以下ではレトロなHTML5版がプレイできますよ。

 

 

何十年も経った今でも、これらのゲームが世間で受け入れられているのは素晴らしいことですが、昔懐かしのゲームの凄さはもとより、ウェブの技術が短い期間でこれだけの進化を遂げたというのもまた注目すべきところです。

 

複雑なゲームやアニメーションは、今や少しのコーディングで作れるようになったのです。さて、もう少しパックマンでもやりましょうか。

 

 

※本記事は、10 Retro Video Games Recreated with HTML5, JS & CSSを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ