SlideShare a Scribd company logo
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
)!"

(!"

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

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

%!"                          *+,-./&"

$!"                          023245"6"

#!"                          023245"677"

 !"
      #"   #!"   $!"   %!"
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
)!"

(!"

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

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

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

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

(!"

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

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

%!"                           +,-./0&"

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

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

'!"

&!"

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

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

#!"

 !"
      !)'"   #"   #)'"   $"
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
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);
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
スマホ向けCanvasゲームの作り方
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

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

  • 22. )!" (!" '!" *+,-./%0" &!" *+,-./%01" %!" *+,-./&" $!" 023245"6" #!" 023245"677" !" #" #!" $!" %!"
  • 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" $!" #!" !" !)'" #" #)'" $"
  • 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);
  • 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