13
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ブラウザゲームを作ってみよう(その1)

Posted at

#はじめに
今までは基本的にサーバサイドの記事が多かったのですが、今回はゲームということでクライアントサイドになります。
ここではJavaScriptを使って作っていきたいと思います。

#Webシステムとゲームの違いについて
今まで記事にしていたWeb系のシステムとゲームですが少し作り方が違います。
それぞれの動き方ですが、概ね以下のようになっています。

[Webシステム]
1.ページアクセス
2.サーバプログラム実行(セッション、データベースから値取得など)
3.クライアントプログラム実行(画面表示)
※ここで終了、別ページへのリンクをクリックするとまた1から実行される

[ゲーム]
1.プログラム実行
2.タイマー起動
3.タイトル画面、ゲーム画面など(タイマーの中で画面遷移)
※2のタイマーがずっと実行されていて終了することがない

主にこのような違いがあります。

#JavaScriptで作れるのか?
冒頭でJavaScriptで作ると書いているのですが、そもそも作れるのか?と思う方もいるかもしれませんので、どういったことが実現出来ればゲームが作れるのか簡単に整理したいと思います。
皆さんはゲームと言われてどういったものを思い浮かべるでしょうか?

■画面に絵や文字が表示される
■コントローラ操作で画面のキャラクターが操作出来る
■タイマーで繰り返し処理が出来る(プレイしているユーザは意識しませんが)

これらの要素をJavaScriptで実現出来るかですが

要素 結果
画面に絵や文字が表示される 表示出来るので○
コントローラ操作で画面のキャラクターが操作出来る キーボードやマウス入力が出来るので○
タイマーで繰り返し処理が出来る タイマー処理(setIntervalなど)が出来るので○
実現出来そうですね。

#サンプル
タイマー処理が確認出来るサンプルを作ったので以下にコードと実行結果を記載します。

See the Pen by nojima (@noji505) on CodePen.

#最後に
とりあえず一回目ということで、Webシステムとゲームの作り方の違いを中心に解説しました。
次回は文字表示処理を作ってみたいと思います。

13
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?