More Related Content
Similar to 初心者向けJavaScript/HTML5ゲームプログラミング (20)
初心者向けJavaScript/HTML5ゲームプログラミング
- 2. 自己紹介
• 北海道天塩町出身
• 先週、30歳になりました
• 小学5年 プログラミングに目覚める
(BASIC)
• VisualBasic/VisualC++でDirectXで
ゲームプログラミングして遊ぶ
• ゲーム会社でプログラマとして5年過
ごした(主にC++)
• 現在:システム開発会社に転職して
色々やってる
@zukkun
- 19. フルスクラッチ
【 full scratch 】
• フルスクラッチとは、既存のものを一切流用せずにまったく
新規に開発すること。もとは模型の用語。
• システムやソフトウェアの開発において、パッケージ製品や
他のソフトのソースコード、雛形などを使用せず、ゼロから
開発していくことをスクラッチ開発というが、まったく何も
流用していないことを強調したいときにフルスクラッチとい
う。
• フルスクラッチとは|full scratch - 意味/解説/説明/定義
: IT用語辞典 http://e-words.jp/フルスクラッチ.html
- 25. JavaScript (main.js)
var canvas = null;
var ctx = null;
// 初期化
function init() {
canvas =
document.querySelector(‘#main_canvas’);
// document.getElementByIdでも良い
}
- 26. JavaScript (main.js)
var canvas = null;
var ctx = null;
// 初期化
function init() {
canvas =
document.querySelector(‘#main_canvas’);
ctx = canvas.getContext(‘2d’);
}
- 28. JavaScript (main.js)
var canvas = null;
var ctx = null;
// 初期化
function init() {
canvas =
document.querySelector(‘#main_canvas’);
ctx = canvas.getContext(‘2d’);
}
CanvasRenderingContext2D
- 42. 画像の描画
function render() {
// 画面をクリア
ctx.clearRect(
0, 0, canvas.width, canvas.height);
// drawImage(画像, X座標, Y座標)
ctx.drawImage(image, 0, 0);
}
- 43. 画像の描画
function render() {
// 画面をクリア
ctx.clearRect(
0, 0, canvas.width, canvas.height);
// drawImage(画像, X座標, Y座標)
ctx.drawImage(image, 0, 0);
}