超初心者向けにJavaScriptゲーム開発講座を作ってみようと思いたった。
と言っても、講師が初心者なので深い説明はできない。
それどころか所々、非常識だったり、間違っている。
「取りあえず動けばいいや」という人のみ受講して欲しい。
必要なものと言っても、このブログが読めるPCがあれば、基本的に問題ないと思う。
では早速。
＊ブラウザはfirefoxを使用
今日の流れ
1.どこでもいいので、Lesson1というフォルダを作る。
2.Lesson1というフォルダの中にindex.htmlというファイルを作る
3.Lesson1というフォルダの中にcanvas.jsというファイルを作る
4.index.htmlを開く
となっている。
1.どこでもいいので、Lesson1というフォルダを作る
右クリック→新規作成→フォルダで作れる
2.Lesson1というフォルダの中にindex.htmlというファイルを作る
右クリック→新規作成→テキストドキュメントで一旦テキストファイルを作成する。
右クリック→名前の変更でindex.htmlという名前にする。
＊拡張子を表示する設定にしておくこと。方法はググると良い。
拡張子とは*.htmlとか*.txtとか点以下の名前のこと。
内容
<!DOCTYPE html>
<meta charset="utf-8">
<script src="canvas1.js"></script>
<canvas id="CV1"></canvas>
リネーム以降は、右クリック→プログラムから開くでテキストエディタを選ぶと良い。
3.Lesson1というフォルダの中にcanvas1.jsというファイルを作る
やり方は基本的には２と同じ。
JavaScriptでは、基本的に文末には「;」（セミコロン）をつけなければいけない。
つけなければいけない所と、つけてはいけない所があるので注意して欲しい。
内容
window.onload = function()
{
var canvas1 = document.getElementById('CV1');//指定したidの要素を取得
var context = canvas1.getContext('2d');//描画メソッドを使用するための準備
context.fillRect(0,0,500,500);//四角を描画
}
4.index.htmlを開く
全て成功していれば、
このようになっているはずだ。
失敗したら、何か間違っていないか見直して欲しい。
画面サイズの変更【HTML5 JavaScript ゲーム作成 講座】2
[0回]
PR
