blob: 06051cec72dda6734f9b54736b301e84627698a5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
---
title: そのままのJavaScriptを使ったブロックくずしゲーム
slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript
translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript
original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript
---
<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ja/docs/Games")}}</div>
<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}}</p>
<p class="summary">このステップ・バイ・ステップのチュートリアルでは全てJavaScriptだけで書かれた、HTML5 {{htmlelement("canvas")}}で表示できる簡単な<strong>MDN ブロックくずし</strong>ゲームを作ります。</p>
<p>全てのステップには編集可能かつすぐに実行できるサンプルがあり、どのような過程で作るべきか確認できます。映像の描画、移動、当たり判定、操作機構、勝ち負けの状態といった基礎的なゲームの仕組みを{{htmlelement("canvas")}}要素を使って実装する基本を学びましょう。</p>
<p>このシリーズのほとんどの記事は理解するために初歩または中級レベルの<a href="/ja/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>の知識を必要とします。このチュートリアルを一通りこなすことで簡単なWebゲームを作れるようになるでしょう。</p>
<p><img alt="Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives." src="https://mdn.mozillademos.org/files/10383/mdn-breakout-gameplay.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
<h2 id="レッスン詳細">レッスン詳細</h2>
<p>全てのレッスン、そしてこれから一緒に作る<a href="http://breakout.enclavegames.com/lesson10.html">MDNブロック崩しゲーム</a>の各バージョンは<a href="https://github.com/end3r/Canvas-gamedev-workshop">GitHub上で入手可能</a>です:</p>
<ol>
<li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">Canvasを作ってその上に描画する</a></li>
<li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">ボールを動かす</a></li>
<li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">ボールを壁で弾ませる</a></li>
<li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">パドルとキーボード操作</a></li>
<li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">ゲームオーバー</a></li>
<li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">ブロックのかたまりを作る</a></li>
<li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">衝突検出</a></li>
<li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">スコアと勝ち負けを記録する</a></li>
<li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">マウス操作</a></li>
<li><a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">仕上げ</a></li>
</ol>
<p>まずはJavaScriptだけで始めるのがWebゲーム開発の確実な知識を手に入れる一番良い方法です。そのあと、自分のプロジェクトで使うフレームワークを選びましょう。フレームワークはJavaScript言語で書かれた単なるツールです。ですから、たとえフレームワークを用いて開発しようとしていてもまずはその言語を学び、手元で実際に何が起こっているか理解すると良いでしょう。フレームワークは開発速度を上げ、ゲームのとるに足らない部分を処理してくれますが、もし何かが思ったように動かないなんてことがあったらいつでもデバッグしたり、あるいは単にJavaScriptで自分なりの解を出すということもできるのです。</p>
<div class="note">
<p><strong>ノート</strong>: ゲームライブラリを用いた2D Webゲーム開発に興味があるのであれば、このシリーズに対応する<a href="/ja/docs/Games/Workflows/2D_breakout_game_Phaser">Phaserを使ったブロックくずしゲーム</a>も参照してください。</p>
</div>
<div class="note">
<p><strong>ノート</strong>: このシリーズはゲーム開発ワークショップのハンズオンの資料として使えます。ゲーム開発全般について話すつもりならこのチュートリアルに基づいた<a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content Kit</a>も利用できます。</p>
</div>
<h2 id="次のステップ">次のステップ</h2>
<p>それでは始めましょう! 最初の章、<a href="/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it">『Canvasを作ってその上に描画する』</a>に進みます。</p>
<p>{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} </p>
|
