SlideShare a Scribd company logo
1 of 51
)!"

(!"

'!"                          *+,-./%0"

&!"                          *+,-./%01"

%!"                          *+,-./&"

$!"                          023245"6"

#!"                          023245"677"

 !"
      #"   #!"   $!"   %!"
)!"

(!"

'!"                           +,-./0%1"

&!"                           +,-./0%12"

                              +,-./0&"
%!"
                              134356"7"
$!"
                              134356"788"
#!"

 !"
      !*'"   #"   #*'"   $"
)!"

(!"

'!"                           +,-./0%1"

&!"                           +,-./0%12"

%!"                           +,-./0&"

                              134356"7"
$!"
                              134356"788"
#!"

 !"
      !*'"   #"   #*'"   $"
(!"

'!"

&!"

%!"                           *+,-./%01234.5416"

                              *+,-./%012*748/6"
$!"

#!"

 !"
      !)'"   #"   #)'"   $"
var dist = 30;
var id;
function run(){
   this.x += (dist - this.x) / 3;
   if(dist - this.x < 0.01){
       clearInterval(id);
   }
}
id = setInterval(run, 100);
var startTime = Date.now();    //
var startX = this.x;    //
var distX = 30;    //
var duration = 1500; //
var id;
function run(){
   var currentTime = Date.now(); //
  var progress = (currentTime - startTime) / duration; //
  this.x = (distX - startX) * progress + startX; //
  if(this.x >= distX){ //
      clearInterval(id);
  }
}
id = setInterval(run, 10);
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方

More Related Content

What's hot

Mediamplify Music and Mediamplify Platform
Mediamplify Music and Mediamplify PlatformMediamplify Music and Mediamplify Platform
Mediamplify Music and Mediamplify PlatformDr. Edwin Hernandez
 
Curriculum 21ste Eeuw
Curriculum 21ste EeuwCurriculum 21ste Eeuw
Curriculum 21ste Eeuwa.hofstede
 
Gaviria dllo economico_pais
Gaviria dllo economico_paisGaviria dllo economico_pais
Gaviria dllo economico_paisDavid Cabezss
 
기획에서 요구사항이 중요한 이유
기획에서 요구사항이 중요한 이유기획에서 요구사항이 중요한 이유
기획에서 요구사항이 중요한 이유GOODgle :)
 
당신이 9시부터 6시까지 근무해야 하는 이유
당신이 9시부터 6시까지 근무해야 하는 이유당신이 9시부터 6시까지 근무해야 하는 이유
당신이 9시부터 6시까지 근무해야 하는 이유zdnet_goodgle
 
radi_msc_eum_onlab_abstract
radi_msc_eum_onlab_abstractradi_msc_eum_onlab_abstract
radi_msc_eum_onlab_abstractAttila R
 
Andrew and Colleen Gustafson
Andrew and Colleen GustafsonAndrew and Colleen Gustafson
Andrew and Colleen GustafsonBruce Clary
 
Declaracao de Amsterda 1975
Declaracao de Amsterda 1975Declaracao de Amsterda 1975
Declaracao de Amsterda 1975Aline Naue
 
기획자는 무엇을 하는 사람일까?
기획자는 무엇을 하는 사람일까?기획자는 무엇을 하는 사람일까?
기획자는 무엇을 하는 사람일까?GOODgle :)
 
การสร้างวัตถุทรงตัน
การสร้างวัตถุทรงตันการสร้างวัตถุทรงตัน
การสร้างวัตถุทรงตันsopanri
 
The new seven wonders:Coliseum
The new seven wonders:ColiseumThe new seven wonders:Coliseum
The new seven wonders:ColiseumericGarrido2
 
複数時点の単語出現頻度を 扱う時系列データモデリング
複数時点の単語出現頻度を 扱う時系列データモデリング複数時点の単語出現頻度を 扱う時系列データモデリング
複数時点の単語出現頻度を 扱う時系列データモデリング奈良先端大 情報科学研究科
 
Η ΓΛΩΣΣΑ C - ΜΑΘΗΜΑ 8 - ΔΕΙΚΤΕΣ (ΕΚΤΥΠΩΣΗ)
Η ΓΛΩΣΣΑ C - ΜΑΘΗΜΑ 8 - ΔΕΙΚΤΕΣ (ΕΚΤΥΠΩΣΗ)Η ΓΛΩΣΣΑ C - ΜΑΘΗΜΑ 8 - ΔΕΙΚΤΕΣ (ΕΚΤΥΠΩΣΗ)
Η ΓΛΩΣΣΑ C - ΜΑΘΗΜΑ 8 - ΔΕΙΚΤΕΣ (ΕΚΤΥΠΩΣΗ)Dimitris Psounis
 

What's hot (19)

Mediamplify Music and Mediamplify Platform
Mediamplify Music and Mediamplify PlatformMediamplify Music and Mediamplify Platform
Mediamplify Music and Mediamplify Platform
 
Curriculum 21ste Eeuw
Curriculum 21ste EeuwCurriculum 21ste Eeuw
Curriculum 21ste Eeuw
 
Gaviria dllo economico_pais
Gaviria dllo economico_paisGaviria dllo economico_pais
Gaviria dllo economico_pais
 
Datawiz.io for executives, Georgian
Datawiz.io for executives, Georgian Datawiz.io for executives, Georgian
Datawiz.io for executives, Georgian
 
How to Listen
How to ListenHow to Listen
How to Listen
 
기획에서 요구사항이 중요한 이유
기획에서 요구사항이 중요한 이유기획에서 요구사항이 중요한 이유
기획에서 요구사항이 중요한 이유
 
당신이 9시부터 6시까지 근무해야 하는 이유
당신이 9시부터 6시까지 근무해야 하는 이유당신이 9시부터 6시까지 근무해야 하는 이유
당신이 9시부터 6시까지 근무해야 하는 이유
 
radi_msc_eum_onlab_abstract
radi_msc_eum_onlab_abstractradi_msc_eum_onlab_abstract
radi_msc_eum_onlab_abstract
 
strategie11_2009-15
strategie11_2009-15strategie11_2009-15
strategie11_2009-15
 
Andrew and Colleen Gustafson
Andrew and Colleen GustafsonAndrew and Colleen Gustafson
Andrew and Colleen Gustafson
 
Declaracao de Amsterda 1975
Declaracao de Amsterda 1975Declaracao de Amsterda 1975
Declaracao de Amsterda 1975
 
기획자는 무엇을 하는 사람일까?
기획자는 무엇을 하는 사람일까?기획자는 무엇을 하는 사람일까?
기획자는 무엇을 하는 사람일까?
 
การสร้างวัตถุทรงตัน
การสร้างวัตถุทรงตันการสร้างวัตถุทรงตัน
การสร้างวัตถุทรงตัน
 
The new seven wonders:Coliseum
The new seven wonders:ColiseumThe new seven wonders:Coliseum
The new seven wonders:Coliseum
 
Webpro2 pert4
Webpro2 pert4Webpro2 pert4
Webpro2 pert4
 
Alto Nilópolis
Alto NilópolisAlto Nilópolis
Alto Nilópolis
 
複数時点の単語出現頻度を 扱う時系列データモデリング
複数時点の単語出現頻度を 扱う時系列データモデリング複数時点の単語出現頻度を 扱う時系列データモデリング
複数時点の単語出現頻度を 扱う時系列データモデリング
 
Η ΓΛΩΣΣΑ C - ΜΑΘΗΜΑ 8 - ΔΕΙΚΤΕΣ (ΕΚΤΥΠΩΣΗ)
Η ΓΛΩΣΣΑ C - ΜΑΘΗΜΑ 8 - ΔΕΙΚΤΕΣ (ΕΚΤΥΠΩΣΗ)Η ΓΛΩΣΣΑ C - ΜΑΘΗΜΑ 8 - ΔΕΙΚΤΕΣ (ΕΚΤΥΠΩΣΗ)
Η ΓΛΩΣΣΑ C - ΜΑΘΗΜΑ 8 - ΔΕΙΚΤΕΣ (ΕΚΤΥΠΩΣΗ)
 
Ii quedaran les paraules...
Ii quedaran les paraules...Ii quedaran les paraules...
Ii quedaran les paraules...
 

Viewers also liked

Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceupHtml canvas shooting_and_performanceup
Html canvas shooting_and_performanceupYohei Munesada
 
クリスマス直前! HTML5 で作る♥ はじめての iOS & Android アプリ開発
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
クリスマス直前! HTML5 で作る♥ はじめての iOS & Android アプリ開発Osamu Monoe
 
Impact beginngers guide_1.19
Impact beginngers guide_1.19Impact beginngers guide_1.19
Impact beginngers guide_1.19Keisuke Hata
 
JavaScriptゲーム制作勉強会
JavaScriptゲーム制作勉強会JavaScriptゲーム制作勉強会
JavaScriptゲーム制作勉強会Yoshiki Shibukawa
 
Arctic.js開発者から見るFlasherの未来
Arctic.js開発者から見るFlasherの未来Arctic.js開発者から見るFlasherの未来
Arctic.js開発者から見るFlasherの未来chikathreesix
 
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -Toshio Ehara
 
Gcm#3 グリーモバイルサウンドの歩み・変遷
Gcm#3 グリーモバイルサウンドの歩み・変遷Gcm#3 グリーモバイルサウンドの歩み・変遷
Gcm#3 グリーモバイルサウンドの歩み・変遷GREE/Art
 
Gcm#3 vr project making of サラと毒蛇の王冠
Gcm#3 vr project making of サラと毒蛇の王冠Gcm#3 vr project making of サラと毒蛇の王冠
Gcm#3 vr project making of サラと毒蛇の王冠GREE/Art
 
Gcm#3 アーティストのためのプログラマブルシェーダ講座
Gcm#3 アーティストのためのプログラマブルシェーダ講座Gcm#3 アーティストのためのプログラマブルシェーダ講座
Gcm#3 アーティストのためのプログラマブルシェーダ講座GREE/Art
 
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?GREE/Art
 
Railsチュートリアルの歩き方 (第4版)
Railsチュートリアルの歩き方 (第4版)Railsチュートリアルの歩き方 (第4版)
Railsチュートリアルの歩き方 (第4版)Yohei Yasukawa
 

Viewers also liked (11)

Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceupHtml canvas shooting_and_performanceup
Html canvas shooting_and_performanceup
 
クリスマス直前! HTML5 で作る♥ はじめての iOS & Android アプリ開発
クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発クリスマス直前!HTML5 で作る♥はじめての iOS & Android アプリ開発
クリスマス直前! HTML5 で作る♥ はじめての iOS & Android アプリ開発
 
Impact beginngers guide_1.19
Impact beginngers guide_1.19Impact beginngers guide_1.19
Impact beginngers guide_1.19
 
JavaScriptゲーム制作勉強会
JavaScriptゲーム制作勉強会JavaScriptゲーム制作勉強会
JavaScriptゲーム制作勉強会
 
Arctic.js開発者から見るFlasherの未来
Arctic.js開発者から見るFlasherの未来Arctic.js開発者から見るFlasherの未来
Arctic.js開発者から見るFlasherの未来
 
HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -HTML5のCanvas入門 - Img画像を編集してみよう -
HTML5のCanvas入門 - Img画像を編集してみよう -
 
Gcm#3 グリーモバイルサウンドの歩み・変遷
Gcm#3 グリーモバイルサウンドの歩み・変遷Gcm#3 グリーモバイルサウンドの歩み・変遷
Gcm#3 グリーモバイルサウンドの歩み・変遷
 
Gcm#3 vr project making of サラと毒蛇の王冠
Gcm#3 vr project making of サラと毒蛇の王冠Gcm#3 vr project making of サラと毒蛇の王冠
Gcm#3 vr project making of サラと毒蛇の王冠
 
Gcm#3 アーティストのためのプログラマブルシェーダ講座
Gcm#3 アーティストのためのプログラマブルシェーダ講座Gcm#3 アーティストのためのプログラマブルシェーダ講座
Gcm#3 アーティストのためのプログラマブルシェーダ講座
 
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
 
Railsチュートリアルの歩き方 (第4版)
Railsチュートリアルの歩き方 (第4版)Railsチュートリアルの歩き方 (第4版)
Railsチュートリアルの歩き方 (第4版)
 

スマホ向けCanvasゲームの作り方

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22. )!" (!" '!" *+,-./%0" &!" *+,-./%01" %!" *+,-./&" $!" 023245"6" #!" 023245"677" !" #" #!" $!" %!"
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29. )!" (!" '!" +,-./0%1" &!" +,-./0%12" +,-./0&" %!" 134356"7" $!" 134356"788" #!" !" !*'" #" #*'" $"
  • 30. )!" (!" '!" +,-./0%1" &!" +,-./0%12" %!" +,-./0&" 134356"7" $!" 134356"788" #!" !" !*'" #" #*'" $"
  • 31. (!" '!" &!" %!" *+,-./%01234.5416" *+,-./%012*748/6" $!" #!" !" !)'" #" #)'" $"
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43. var dist = 30; var id; function run(){ this.x += (dist - this.x) / 3; if(dist - this.x < 0.01){ clearInterval(id); } } id = setInterval(run, 100);
  • 44.
  • 45.
  • 46.
  • 47. var startTime = Date.now(); // var startX = this.x; // var distX = 30; // var duration = 1500; // var id; function run(){ var currentTime = Date.now(); // var progress = (currentTime - startTime) / duration; // this.x = (distX - startX) * progress + startX; // if(this.x >= distX){ // clearInterval(id); } } id = setInterval(run, 10);

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n