JS/Canvas Tutorial1
0 likes179 views
サークル向けゲーム開発講座(第1回)で使用したスライドです。 HTML5 CanvasとJavaScriptを用いたシューティングゲームの作り方を解説します。
![ElasticsearchでSPLADEする [Search Engineering Tech Talk 2025 Winter]](https://cdn.slidesharecdn.com/ss_thumbnails/searchtech-250228102455-ddc5ce09-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (10)
Recently uploaded (8)
JS/Canvas Tutorial1
- 2. About Me > ソフトウェア情報学部 1 年 > プログラミング歴8年 (9年目) > 言語 - (話せる) 日本語 (英語?) - (得意) JavaScript - (語れる) Haxe - (憧れ) CommonLisp
- 3. 講座の概要 > 実装部ではこれまでプログラミングの勉強を行ってきました > Ｑ：何のために？ > Ａ：ゲームを作るため！ > んじゃそろそろゲーム作ろうか？
- 4. 今回作るもの > 言語 - HTML/JavaScript > ジャンル - シューティングゲーム > 動作環境 - PC - スマートフォン(※) > その他 - 1人プレイ - ステージは1つ - 自機は×3 - パワーアップ有り - スコア(ツイート)
- 5. 講座の準備 > Google Chrome > Firefox > Sublime Text 3 (MCA実装部仕様) - 日本語化 - プラグイン導入済み - 研究室で使える > すげえ！！俺ゲーム作ってる！！ - （ ????｀）どや ブラウザ エディタ ドヤリティ
- 6. 講座の準備 > 講座資料 - ここ(https://github.com/tamamu/js_tutorial) > 質問用Slack - ここ(https://mca-dev.slack.com/)
- 8. 変数(オブジェクト)の扱い > 宣言 - var hoge; - この時点でhogeの中身はundefined(未定義) > 代入 - hoge = 10; > 型 - JSでは型(intとかstringとか)に関するルールが緩い - 1 + 1 := 2 - "Hello" + "World" := "HelloWorld" - "No." + 1 := "No.1"
- 10. document.getElementById > game.js 3行目 canvas = document.getElementById("game"); HTML/JS特有の関数 HTMLファイルのタグをIDで取得する HTMLファイルとJSでIDを揃えること(間違えやすい！)
- 11. Canvasオブジェクト > HTMLで言えば<canvas> > 今回はゲーム画面として扱う > 持っているプロパティ(変数) - width (幅) - height (高さ) > 持っているメソッド(関数) - getContext (描画系を取得)
- 12. > fillStyle = "COLOR" - 塗りつぶしの色を指定 > strokeStyle = "COLOR" - 線の色を指定 > fillRect(x, y, w, h) - 矩形塗りつぶし > lineWidth = INT - 線の幅を指定(実数) > lineCap="STYLE" - 線の端の処理方法を指定 - butt,square, round Contextの操作 > beginPath() - パスの作成開始 > moveTo(x, y) - パスの始点を指定 > lineTo(x, y) - 直線パスを作成 > arc(x, y, r, s, e, reverse?) - 円弧パスを作成 > stroke() - パスに沿って線を描く > fill() - パスに沿って塗りつぶし
- 13. 次回 へ続 く