Submit Search
Upload
JavaScript でパックマン!第3回
•
0 likes
•
785 views
Project Samurai
Follow
JavaScript と HTML5 で新たに導入された Canvas を用いてパックマンを作ります。MPS Setagaya 第6回(2015/09/27) ミーティング資料です。
Read less
Read more
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 40
Recommended
JavaScript でパックマン!第6回
JavaScript でパックマン!第6回
Project Samurai
MPS Setagaya 第9回ミーティング資料です。
JavaScript でパックマン! 第2回
JavaScript でパックマン! 第2回
Project Samurai
JavaScript と HTML5 で新たに導入された Canvas を用いてパックマンを作ります。MPS Setagaya 第5回(2015/09/13) ミーティング資料です。
JavaScript で パックマン! 第5回
JavaScript で パックマン! 第5回
Project Samurai
MPS Setagaya 第8回ミーティングの資料です。 MPSは東京で活動しているクリエイティブなキャリアをつくるための場の活動です。 Websiteはこちらです! http://mpsamurai.org/ MPS(世田谷)はこちらです! http://setagaya.mpsamurai.org/ コミュニティ/イベント告知はDoorkeeperでおこなっています。 https://mpsamurai.doorkeeper.jp/events 興味がある方はぜひご参加ください〜!
JavaScript でパックマン!第7回 (一旦最終回)
JavaScript でパックマン!第7回 (一旦最終回)
Project Samurai
MPS Setagaya 第10回ミーティング資料です。 GitHub https://github.com/morningprojectsamurai/mpssd_pacman_20151129 --- MPSは東京で活動しているクリエイティブなキャリアをつくるための場の活動です。 Websiteはこちらです! https://mpsamurai.org/ コミュニティ/イベント告知はDoorkeeperでおこなっています。 https://mpsamurai.doorkeeper.jp/events 興味がある方はぜひご参加ください〜!
JavaScript でパックマン!第1回
JavaScript でパックマン!第1回
Project Samurai
JavaScript でパックマン!第1回 Morning Project Samurai Setagaya (MPSSD) 第4回資料。 Create pacman by using JavaScript. An article at Morning Project Samurai Setagaya 4th meeting. --- MPSは東京で活動しているクリエイティブなキャリアをつくるための場の活動です。 Websiteはこちらです! https://mpsamurai.org/ コミュニティ/イベント告知はDoorkeeperでおこなっています。 https://mpsamurai.doorkeeper.jp/events 興味がある方はぜひご参加ください〜!
JavaScript でパックマン!第4回
JavaScript でパックマン!第4回
Project Samurai
MPS Setagaya 第7回ミーティング資料
VRボドゲ実装の話
VRボドゲ実装の話
MaxNeetGames
Unity お・と・な のLT大会 2015で発表した時に使ったスライドです。
プログラミング技法特論第8回
プログラミング技法特論第8回
Noritada Shimizu
Recommended
JavaScript でパックマン!第6回
JavaScript でパックマン!第6回
Project Samurai
MPS Setagaya 第9回ミーティング資料です。
JavaScript でパックマン! 第2回
JavaScript でパックマン! 第2回
Project Samurai
JavaScript と HTML5 で新たに導入された Canvas を用いてパックマンを作ります。MPS Setagaya 第5回(2015/09/13) ミーティング資料です。
JavaScript で パックマン! 第5回
JavaScript で パックマン! 第5回
Project Samurai
MPS Setagaya 第8回ミーティングの資料です。 MPSは東京で活動しているクリエイティブなキャリアをつくるための場の活動です。 Websiteはこちらです! http://mpsamurai.org/ MPS(世田谷)はこちらです! http://setagaya.mpsamurai.org/ コミュニティ/イベント告知はDoorkeeperでおこなっています。 https://mpsamurai.doorkeeper.jp/events 興味がある方はぜひご参加ください〜!
JavaScript でパックマン!第7回 (一旦最終回)
JavaScript でパックマン!第7回 (一旦最終回)
Project Samurai
MPS Setagaya 第10回ミーティング資料です。 GitHub https://github.com/morningprojectsamurai/mpssd_pacman_20151129 --- MPSは東京で活動しているクリエイティブなキャリアをつくるための場の活動です。 Websiteはこちらです! https://mpsamurai.org/ コミュニティ/イベント告知はDoorkeeperでおこなっています。 https://mpsamurai.doorkeeper.jp/events 興味がある方はぜひご参加ください〜!
JavaScript でパックマン!第1回
JavaScript でパックマン!第1回
Project Samurai
JavaScript でパックマン!第1回 Morning Project Samurai Setagaya (MPSSD) 第4回資料。 Create pacman by using JavaScript. An article at Morning Project Samurai Setagaya 4th meeting. --- MPSは東京で活動しているクリエイティブなキャリアをつくるための場の活動です。 Websiteはこちらです! https://mpsamurai.org/ コミュニティ/イベント告知はDoorkeeperでおこなっています。 https://mpsamurai.doorkeeper.jp/events 興味がある方はぜひご参加ください〜!
JavaScript でパックマン!第4回
JavaScript でパックマン!第4回
Project Samurai
MPS Setagaya 第7回ミーティング資料
VRボドゲ実装の話
VRボドゲ実装の話
MaxNeetGames
Unity お・と・な のLT大会 2015で発表した時に使ったスライドです。
プログラミング技法特論第8回
プログラミング技法特論第8回
Noritada Shimizu
論理指向とプログラミング2010年度秋学期第9回
論理指向とプログラミング2010年度秋学期第9回
Noritada Shimizu
ggplot2 110129
ggplot2 110129
Takashi Minoda
Tokyo.R 用 資料 ggplot2
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
Unity Technologies Japan K.K.
講演者:安原 祐二(ユニティ・テクノロジーズ・ジャパン合同会社) こんな人におすすめ ・これから誘導ミサイルを学んでみたい方 ・そろそろコンピュートシェーダの使い方を学んでおきたい方 ・誘導ミサイルが好きな方 受講者が得られる知見 ・誘導ミサイルの実装方法 ・誘導ミサイルのゲームデザイン上の特徴 ・コンピュートシェーダをエフェクト以外で利用する際の注意点
Tsukuba
Tsukuba
syou6162
ggplot2 110129
ggplot2 110129
Takashi Minoda
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
UnityTechnologiesJapan002
講演者:藤岡 裕吾(株式会社タノシマス) こんな人におすすめ ・Unityの最適化事例を知りたい方 ・高速化によって世界を縮められると思う方 受講者が得られる知見 ・実際にリリースされている60fpsゲームの設計事例 ・シリアライズを利用した静的データの活用
【Unity道場スペシャル 2017博多】クォータニオン完全マスター
【Unity道場スペシャル 2017博多】クォータニオン完全マスター
Unity Technologies Japan K.K.
2017/6/3に開催されたUnity道場 博多スペシャルの講演スライドです。 講師:安原 祐二(ユニティ・テクノロジーズ・ジャパン合同会社) 講演動画:https://youtu.be/uKWLPU8gfIY 知ってはいるけれどピンとこない、知ってはいるけれどピンとこない、そんなクォータニオンについて基本となる概念からたっぷりと、丁寧に説明していきます。行列についても解説しますので、これからシェーダプログラミングに取り組もうとするエンジニアにも役に立つ内容です。数学に苦手意識のある人も、この機会にマスターしてしまいましょう! こんな人におすすめ ・プログラマ全般および数学に興味のある人 受講者が得られる知見 ・クォータニオンの意味 ・行列とクォータニオンの関係 ・数学的な背景 Unityのイベント資料はこちらから: https://www.slideshare.net/UnityTechnologiesJapan/clipboards
CG2013 02
CG2013 02
shiozawa_h
CG2013 02
CG2013 07
CG2013 07
shiozawa_h
CG2013 07
CG2013 05
CG2013 05
shiozawa_h
CG2013 05
CG2013 03
CG2013 03
shiozawa_h
CG2013 03
数学的基礎から学ぶ Deep Learning (with Python) Vol. 12
数学的基礎から学ぶ Deep Learning (with Python) Vol. 12
Project Samurai
数学的基礎から学ぶ Deep Learning (with Python) Vol. 12
Python で画像処理をやってみよう! -SIFT 第7回-
Python で画像処理をやってみよう! -SIFT 第7回-
Project Samurai
Python で画像処理をやってみよう! -SIFT 第7回-
数学的基礎から学ぶ Deep Learning (with Python) Vol. 9
数学的基礎から学ぶ Deep Learning (with Python) Vol. 9
Project Samurai
MPS横浜第9回ミーティング資料
Python で画像処理をやってみよう! -SIFT 第6回-
Python で画像処理をやってみよう! -SIFT 第6回-
Project Samurai
MPS 第47回ミーティング
数学的基礎から学ぶ Deep Learning (with Python) Vol. 8
数学的基礎から学ぶ Deep Learning (with Python) Vol. 8
Project Samurai
第8回 MPS Yokohama Meeting
数学的基礎から学ぶ Deep Learning (with Python) Vol. 7
数学的基礎から学ぶ Deep Learning (with Python) Vol. 7
Project Samurai
MPS横浜 第7回ミーティング資料。
Python で画像処理をやってみよう! -SIFT 第5回-
Python で画像処理をやってみよう! -SIFT 第5回-
Project Samurai
MPS 46th meeting.
数学的基礎から学ぶ Deep Learning (with Python) Vol. 6
数学的基礎から学ぶ Deep Learning (with Python) Vol. 6
Project Samurai
MPS横浜 第6回ミーティング資料。
Mpsy20160423
Mpsy20160423
Project Samurai
MPS Yokohama 5th meeting.
Make your Artificial Intelligence
Make your Artificial Intelligence
Project Samurai
MPS meeting at University of Khartoum, Sudan.
数学的基礎から学ぶ Deep Learning (with Python) Vol. 4
数学的基礎から学ぶ Deep Learning (with Python) Vol. 4
Project Samurai
MPS 横浜 第4回 (2016/4/9) ミーティング
More Related Content
What's hot
論理指向とプログラミング2010年度秋学期第9回
論理指向とプログラミング2010年度秋学期第9回
Noritada Shimizu
ggplot2 110129
ggplot2 110129
Takashi Minoda
Tokyo.R 用 資料 ggplot2
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
Unity Technologies Japan K.K.
講演者:安原 祐二(ユニティ・テクノロジーズ・ジャパン合同会社) こんな人におすすめ ・これから誘導ミサイルを学んでみたい方 ・そろそろコンピュートシェーダの使い方を学んでおきたい方 ・誘導ミサイルが好きな方 受講者が得られる知見 ・誘導ミサイルの実装方法 ・誘導ミサイルのゲームデザイン上の特徴 ・コンピュートシェーダをエフェクト以外で利用する際の注意点
Tsukuba
Tsukuba
syou6162
ggplot2 110129
ggplot2 110129
Takashi Minoda
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
UnityTechnologiesJapan002
講演者:藤岡 裕吾(株式会社タノシマス) こんな人におすすめ ・Unityの最適化事例を知りたい方 ・高速化によって世界を縮められると思う方 受講者が得られる知見 ・実際にリリースされている60fpsゲームの設計事例 ・シリアライズを利用した静的データの活用
【Unity道場スペシャル 2017博多】クォータニオン完全マスター
【Unity道場スペシャル 2017博多】クォータニオン完全マスター
Unity Technologies Japan K.K.
2017/6/3に開催されたUnity道場 博多スペシャルの講演スライドです。 講師:安原 祐二(ユニティ・テクノロジーズ・ジャパン合同会社) 講演動画:https://youtu.be/uKWLPU8gfIY 知ってはいるけれどピンとこない、知ってはいるけれどピンとこない、そんなクォータニオンについて基本となる概念からたっぷりと、丁寧に説明していきます。行列についても解説しますので、これからシェーダプログラミングに取り組もうとするエンジニアにも役に立つ内容です。数学に苦手意識のある人も、この機会にマスターしてしまいましょう! こんな人におすすめ ・プログラマ全般および数学に興味のある人 受講者が得られる知見 ・クォータニオンの意味 ・行列とクォータニオンの関係 ・数学的な背景 Unityのイベント資料はこちらから: https://www.slideshare.net/UnityTechnologiesJapan/clipboards
CG2013 02
CG2013 02
shiozawa_h
CG2013 02
CG2013 07
CG2013 07
shiozawa_h
CG2013 07
CG2013 05
CG2013 05
shiozawa_h
CG2013 05
CG2013 03
CG2013 03
shiozawa_h
CG2013 03
What's hot
(11)
論理指向とプログラミング2010年度秋学期第9回
論理指向とプログラミング2010年度秋学期第9回
ggplot2 110129
ggplot2 110129
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
Tsukuba
Tsukuba
ggplot2 110129
ggplot2 110129
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unity道場スペシャル 2017博多】クォータニオン完全マスター
【Unity道場スペシャル 2017博多】クォータニオン完全マスター
CG2013 02
CG2013 02
CG2013 07
CG2013 07
CG2013 05
CG2013 05
CG2013 03
CG2013 03
More from Project Samurai
数学的基礎から学ぶ Deep Learning (with Python) Vol. 12
数学的基礎から学ぶ Deep Learning (with Python) Vol. 12
Project Samurai
数学的基礎から学ぶ Deep Learning (with Python) Vol. 12
Python で画像処理をやってみよう! -SIFT 第7回-
Python で画像処理をやってみよう! -SIFT 第7回-
Project Samurai
Python で画像処理をやってみよう! -SIFT 第7回-
数学的基礎から学ぶ Deep Learning (with Python) Vol. 9
数学的基礎から学ぶ Deep Learning (with Python) Vol. 9
Project Samurai
MPS横浜第9回ミーティング資料
Python で画像処理をやってみよう! -SIFT 第6回-
Python で画像処理をやってみよう! -SIFT 第6回-
Project Samurai
MPS 第47回ミーティング
数学的基礎から学ぶ Deep Learning (with Python) Vol. 8
数学的基礎から学ぶ Deep Learning (with Python) Vol. 8
Project Samurai
第8回 MPS Yokohama Meeting
数学的基礎から学ぶ Deep Learning (with Python) Vol. 7
数学的基礎から学ぶ Deep Learning (with Python) Vol. 7
Project Samurai
MPS横浜 第7回ミーティング資料。
Python で画像処理をやってみよう! -SIFT 第5回-
Python で画像処理をやってみよう! -SIFT 第5回-
Project Samurai
MPS 46th meeting.
数学的基礎から学ぶ Deep Learning (with Python) Vol. 6
数学的基礎から学ぶ Deep Learning (with Python) Vol. 6
Project Samurai
MPS横浜 第6回ミーティング資料。
Mpsy20160423
Mpsy20160423
Project Samurai
MPS Yokohama 5th meeting.
Make your Artificial Intelligence
Make your Artificial Intelligence
Project Samurai
MPS meeting at University of Khartoum, Sudan.
数学的基礎から学ぶ Deep Learning (with Python) Vol. 4
数学的基礎から学ぶ Deep Learning (with Python) Vol. 4
Project Samurai
MPS 横浜 第4回 (2016/4/9) ミーティング
数学的基礎から学ぶ Deep Learning (with Python) Vol. 3
数学的基礎から学ぶ Deep Learning (with Python) Vol. 3
Project Samurai
MPS Yokohama 第3回ミーティグ資料
数学的基礎から学ぶ Deep Learning (with Python) Vol. 2
数学的基礎から学ぶ Deep Learning (with Python) Vol. 2
Project Samurai
Morning Project Samurai 第2回
数学的基礎から学ぶ Deep Learning (with Python) Vol. 1
数学的基礎から学ぶ Deep Learning (with Python) Vol. 1
Project Samurai
第1回 Morning Project Samurai Yokohama (2016/02/27) 資料。
Python で画像処理をやってみよう!第11回 - SIFT Vol.1 キーポイント候補 -
Python で画像処理をやってみよう!第11回 - SIFT Vol.1 キーポイント候補 -
Project Samurai
第42回 MPS ミーティング資料。Python で画像処理をやってみよう!第11回 - SIFT Vol.1 キーポイント候補 -
Instagram API を使ってウェブアプリを作ろう!
Instagram API を使ってウェブアプリを作ろう!
Project Samurai
MPS世田谷やってみた祭り 第1回資料
Pythonで画像処理をやってみよう!第8回 - Scale-space 第7回 -
Pythonで画像処理をやってみよう!第8回 - Scale-space 第7回 -
Project Samurai
二次元画像を用いた Scale-space の作成について。Morning Project Samurai 第39回 ミーティング資料。
Pythonで画像処理をやってみよう!第7回 - Scale-space 第6回 -
Pythonで画像処理をやってみよう!第7回 - Scale-space 第6回 -
Project Samurai
二次元画像を用いた Scale-space の作成について。Morning Project Samurai 第38回 ミーティング資料。
Pythonで画像処理をやってみよう!第6回 - Scale-space 第3回 -
Pythonで画像処理をやってみよう!第6回 - Scale-space 第3回 -
Project Samurai
Python で画像処理をやってみよう!第4回 - Scale-space - 第35回 MPS ミーティング資料 Let's learn image processing with Python part 4. "Scale space" The 35nd Morning Project Samurai (MPS) meeting document.
Python で OAuth2 をつかってみよう!
Python で OAuth2 をつかってみよう!
Project Samurai
Python と Django を用いて、OAuth2 について実習形式で学びました。Google や Facebook にあるリソースに OAuth2 を用いてアクセスするプログラムを作成しました。 Morning Project Samurai 第23回 (2015/03/14) の定例ミーティングの勉強会資料です。
More from Project Samurai
(20)
数学的基礎から学ぶ Deep Learning (with Python) Vol. 12
数学的基礎から学ぶ Deep Learning (with Python) Vol. 12
Python で画像処理をやってみよう! -SIFT 第7回-
Python で画像処理をやってみよう! -SIFT 第7回-
数学的基礎から学ぶ Deep Learning (with Python) Vol. 9
数学的基礎から学ぶ Deep Learning (with Python) Vol. 9
Python で画像処理をやってみよう! -SIFT 第6回-
Python で画像処理をやってみよう! -SIFT 第6回-
数学的基礎から学ぶ Deep Learning (with Python) Vol. 8
数学的基礎から学ぶ Deep Learning (with Python) Vol. 8
数学的基礎から学ぶ Deep Learning (with Python) Vol. 7
数学的基礎から学ぶ Deep Learning (with Python) Vol. 7
Python で画像処理をやってみよう! -SIFT 第5回-
Python で画像処理をやってみよう! -SIFT 第5回-
数学的基礎から学ぶ Deep Learning (with Python) Vol. 6
数学的基礎から学ぶ Deep Learning (with Python) Vol. 6
Mpsy20160423
Mpsy20160423
Make your Artificial Intelligence
Make your Artificial Intelligence
数学的基礎から学ぶ Deep Learning (with Python) Vol. 4
数学的基礎から学ぶ Deep Learning (with Python) Vol. 4
数学的基礎から学ぶ Deep Learning (with Python) Vol. 3
数学的基礎から学ぶ Deep Learning (with Python) Vol. 3
数学的基礎から学ぶ Deep Learning (with Python) Vol. 2
数学的基礎から学ぶ Deep Learning (with Python) Vol. 2
数学的基礎から学ぶ Deep Learning (with Python) Vol. 1
数学的基礎から学ぶ Deep Learning (with Python) Vol. 1
Python で画像処理をやってみよう!第11回 - SIFT Vol.1 キーポイント候補 -
Python で画像処理をやってみよう!第11回 - SIFT Vol.1 キーポイント候補 -
Instagram API を使ってウェブアプリを作ろう!
Instagram API を使ってウェブアプリを作ろう!
Pythonで画像処理をやってみよう!第8回 - Scale-space 第7回 -
Pythonで画像処理をやってみよう!第8回 - Scale-space 第7回 -
Pythonで画像処理をやってみよう!第7回 - Scale-space 第6回 -
Pythonで画像処理をやってみよう!第7回 - Scale-space 第6回 -
Pythonで画像処理をやってみよう!第6回 - Scale-space 第3回 -
Pythonで画像処理をやってみよう!第6回 - Scale-space 第3回 -
Python で OAuth2 をつかってみよう!
Python で OAuth2 をつかってみよう!
JavaScript でパックマン!第3回
1.
MPS Setagaya 第6回
(2015/09/27) ミーティング JavaScript でパックマン! 第3回 金子純也 Morning Project Samurai 代表 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
2.
今日の目標 JS のパスについてさらに理解する! JS でパックマンを動かす準備! (関数の理解) MPS
Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
3.
前回描いたパックマン MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
4.
arc() arc(中心x, 中心y, 半径,
開始角度, 終了角度, 反時計回り) * 開始角度、終了角度はラジアンで指定 (360度 = 2 * Math.PI ラジアン) ctx.arc(100, 100, 50, 0, 1/2 * Math.PI, true); ctx.arc(100, 100, 50, 0, 1/2 * Math.PI, false); MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
5.
arc を使ったパックマンの描画 • ヒント1 白い扇形を赤い丸に重ねてやればいい!! •
ヒント2 扇形はどうやって作ればいい?? + MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
6.
var cv =
document.getElementById(‘pac-man'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
7.
var cv =
document.getElementById(‘pac-man'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); 赤い円を描画 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
8.
var cv =
document.getElementById(‘pac-man'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); 口を描画 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
9.
var cv =
document.getElementById(‘pac-man'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fill(); ctx.strokeStyle="#FFFFFF"; ctx.fillStyle="#FFFFFF"; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(100, 100, 50, -30 * Math.PI/180, 30 * Math.PI/180) ctx.moveTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(-30 * Math.PI/180), 100 + 50 * Math.sin(-30 * Math.PI/180)); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI/180), 100 + 50 * Math.sin(30 * Math.PI/180)); ctx.stroke(); ctx.fill(); Pathってなに? MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
10.
パスの例 1 2 3 4 5 6 MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
11.
ctx.beginPath() MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
12.
パスの例 1 2 3 4 5 6 ctx.beginPath() ctx.arc() MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
13.
パスの例 1 2 3 4 5 6 ctx.beginPath() ctx.arc() ctx.linTo() MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
14.
パスの例 1 2 3 4 5 6 ctx.beginPath() ctx.arc() ctx.linTo() . . . ctx.linTo() MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
15.
stroke() 1 2 3 4 5 6 ctx.beginPath() ctx.arc() ctx.linTo() . . . ctx.linTo() ctx.stroke() 実際に線が描かれる MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
16.
パスと色塗りの関係 ctx.beginPath() ctx.arc() ctx.linTo() . . . ctx.linTo() ctx.fill() パスに囲まれた部分が 塗りつぶされる MPS Setagaya
第6回 (2015/09/27) ミーティング (c) Junya Kaneko
17.
パスと色塗りの関係 MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
18.
パスと色塗りの関係 Q. 囲まれてるから? MPS Setagaya
第6回 (2015/09/27) ミーティング (c) Junya Kaneko
19.
この場合は? MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
20.
非ゼロワインディングルール -1 1 1 MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
21.
0 1 MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
22.
MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
23.
パックマンを非ワインディング ルールを考慮して書いてみよう! MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
24.
var cv =
document.getElementById('pacman'); var ctx = cv.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100, 100, 50, 30 * Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI / 180), 100 + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
25.
アニメーションに必要なこと MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
26.
アニメーションに必要なこと MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
27.
アニメーションに必要なこと MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
28.
アニメーションに必要なこと MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
29.
アニメーションに必要なこと パックマンを何度も何度も描くこと! MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
30.
アニメーションに必要なこと パックマンを何度も何度も描くこと! 何度でも気軽にパックマンを かけないと困る! MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
31.
「パックマンを描く」というJSの命令を 新たにブラウザに教えてやる! (関数を定義する) MPS Setagaya 第6回
(2015/09/27) ミーティング (c) Junya Kaneko
32.
関数 複数の命令をセットにして名前をつけたもの (必要があれば、入力と出力を持つ) 例: パックマンを描く関数 パックマンを描くのに必要な命令をまとめたもの MPS Setagaya
第6回 (2015/09/27) ミーティング (c) Junya Kaneko
33.
関数の例 function drawPacman(ctx) { ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100,
100, 50, 30 * Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI / 180), 100 + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); } MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
34.
下記関数を<script>の直下に 書いて定義してみよう! function drawPacman(ctx) { ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100,
100, 50, 30 * Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI / 180), 100 + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); } MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
35.
関数の例 function drawPacman(ctx) { ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100,
100, 50, 30 * Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI / 180), 100 + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); } 関数の名前 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
36.
関数の例 function drawPacman(ctx) { ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(100,
100, 50, 30 * Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(100, 100); ctx.lineTo(100 + 50 * Math.cos(30 * Math.PI / 180), 100 + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); } 関数への入力 MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
37.
使い方 <script> function drawPacman(ctx) { … } var
cv = document.getElementById('pacman'); var ctx = cv.getContext("2d"); drawPacman(ctx); </script> MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
38.
関数を改良してみよう function drawPacman(ctx, cx,
cy) { ctx.strokeStyle="#FF0000"; ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(cx, cy, 50, 30 * Math.PI / 180, 330 * Math.PI / 180); ctx.lineTo(cx, cy); ctx.lineTo(cx + 50 * Math.cos(30 * Math.PI / 180), cy + 50 * Math.sin(30 * Math.PI / 180)); ctx.fill(); } MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
39.
改良した関数を使って 複数のPacman を描いてみよう! var cv
= document.getElementById('pacman'); var ctx = cv.getContext("2d"); drawPacman(ctx, 50, 50); drawPacman(ctx, 240, 50); drawPacman(ctx, 400, 50); *注意) canvas の width を 500 に変更! MPS Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko
40.
次回 • 今度こそ、パックマンを動かす! • キーボードからの入力を処理する! MPS
Setagaya 第6回 (2015/09/27) ミーティング (c) Junya Kaneko