光で始めるSilverlight
光を動かしてみよう!
2010/10/10  

さーて、ここから一気にゲームを作っちゃうよ!
まずは、マウスで光を動かすところから。

光をクリックするとタイマーが動き出して、ゲームがスタートするよ。
 >> サンプルをダウンロード

ゲームでは、画面をクリックすると、そこに光が移動するようにしたいんだけど。。。
そんなときには、背景の Canvas に「マウスをクリックしたときの動作」を入れればいいんだよね。

myxaml.xaml の先頭部分:
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  MouseLeftButtonDown="MouseClick">  <-- ここ。
そんでもって、マウスをクリックしたときの動きは、こうなっているの。
myScript.js の中:
// マウスクリック
function MouseClick(sender, eventArgs)
{
  ClickX = eventArgs.getPosition(sender).x;
  ClickY = eventArgs.getPosition(sender).y;
}
ここで初めて登場したのが、eventArgs ってやつ。
マウスをクリックしたときの位置は、この eventArgs の中に入ってくるんだ。
それを、こうやって ClickX と ClickY に覚えさせちゃいます。

一番大事な、光の動きはこんな風になってまーす。

// 時間ごとの処理
function TimerMain()
{
  var diffX = ClickX - Hikaru1["Canvas.Left"]; // マウスと現在の光の位置の差分
  var diffY = ClickY - Hikaru1["Canvas.Top"];

  if( Hikaru1["Canvas.Left"] > 0
   && Hikaru1["Canvas.Left"] < 640 ){ // 光が画面の範囲をはみ出さなければ
    Hikaru1["Canvas.Left"] += diffX / 30; // 差分をつめる(差の1/30を足し込む)
  }
  if( Hikaru1["Canvas.Top"] > 0
   && Hikaru1["Canvas.Top"] < 400 ){ // 光が画面の範囲をはみ出さなければ
    Hikaru1["Canvas.Top"] += diffY / 30; // 差分をつめる(差の1/30を足し込む)
  }
}
マウスをクリックした位置と、現在の光の位置の差分を出して、その差分を小さくするように調整しています。
この調整のところを、1/30っていう割り算で近づけると、だんだん近づいてゆくっていう動きになるんだ。
30 っていう数字は近づくスピードみたいなもの。
この数字は実際に動かしてみて、ちょうどいい大きさに調整するんだよ。

ページ先頭に戻る▲