光を動かしてみよう！

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

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

ゲームでは、画面をクリックすると、そこに光が移動するようにしたいんだけど。。。
そんなときには、背景の 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 っていう数字は近づくスピードみたいなもの。
この数字は実際に動かしてみて、ちょうどいい大きさに調整するんだよ。




Copyright(c) 2008 NakaNaka All Rights Reserved.