昨天在家裝了ie9，感覺不錯，介面終於清爽了，跑html5也還不錯！期待ie10正式版！
上一節我簡單了介紹了html5 canvas 中的 drawimage方法，並繪製了一條扇動翅膀的小紅龍，那麼，今天我想讓小龍在我的控制下飛行起來！
首先我們再回顧下drawimage的九個引數，第乙個引數是繪製物件，可以是，也可以是canvas，第二到五個引數是的裁剪引數，控制裁剪的位置與大小，第六至九個引數控制繪製到畫布的位置與大小！到這裡，估計大家都知道該怎麼做了，只要更改在畫面的位置就可以讓小紅龍「飛行」起來了！
不過先別急，在這處理這個過程前，還有涉及到乙個方向的問題，在2d遊戲中，一般主流有四個方向或者八個方向兩種(橫版的是二個方向的,最近也比較流行),我這裡將以八個方向為例，演示如何控制小紅龍的飛行！
為了方便控制，我先定義乙個列舉物件，嗯，不過js中不存在列舉物件，沒關係，js是一種十分自由的語言，我發現我越來越喜歡它了,我定義乙個物件字面量！
var directions=;
本節演示的精靈素材繼續沿用上一節的小紅龍！我在這裡用0-7 來代表東南西北等八個方向！這裡哪個方向代表哪個數字是有一定規律的，細心的朋友可能發現了，在素材圖中，每一行均代表了乙個方向！directions中每個方向的值對應每行的索引值，比如第一行，紅龍的朝向為東，則directions.east=0,第二行為東南，則directions.southeast=1,依此類推！
然後定義乙個物件來儲存精靈的當前位置，乙個物件來儲存精靈當前朝向！
var currentpoint = ;
var direction=0;
然後可以通過onclick事件來處理精靈的移動！另外，我通過canvas的onmousemove事件來獲取當前的滑鼠點選座標，完整**如下
var ctx = document.getelementbyid("scene").getcontext("2d");
var ctxw = document.getelementbyid("scene").width;//
畫布寬var ctxh = document.getelementbyid("scene").height;//
畫面高var currentpoint = ;//
精靈當前位置
var mousepoint = ;//
滑鼠相對位置
var direction=0;//
當前朝向
var directions=;
var timer;//
定時器//
獲取滑鼠相對座標
document.getelementbyid("scene").onmousemove=function(e)else
var boundingclient=document.getelementbyid("scene").getboundingclientrect();
mousepoint.x-=parseint(boundingclient.left+document.documentelement.scrollleft);
mousepoint.y-=parseint(boundingclient.top+document.documentelement.scrolltop);
};//
獲取兩個座標點的距離
function getdistance(x,y);
//獲取精靈朝向
function getdirection(current,target) else
if (math.abs(n) > math.tan(math.pi / 8) && math.abs(n) < math.tan(math.pi * 3 / 8) && target.x > current.x && target.y < current.y) else
if (math.abs(n) <= math.tan(math.pi / 8) && target.x >= current.x) else
if (math.abs(n) > math.tan(math.pi / 8) && math.abs(n) < math.tan(math.pi * 3 / 8) && target.x > current.x && target.y > current.y) else
if (math.abs(n) >= math.tan(math.pi * 3 / 8) && target.y >= current.y) else
if (math.abs(n) > math.tan(math.pi / 8) && math.abs(n) < math.tan(math.pi * 3 / 8) && target.x < current.x && target.y > current.y) else
if (math.abs(n) <= math.tan(math.pi / 8) && target.x <= current.x) else
if (math.abs(n) > math.tan(math.pi / 8) && math.abs(n) < math.tan(math.pi * 3 / 8) && target.x < current.x && target.y < current.y) else
};//
判斷精靈是否到達指定座標
function ratherpoint(p1,p2);
return
true;
};//
獲取每次移動步長
function getmovepoint(topoint);
return ;}//
滑鼠點選事件
document.getelementbyid("scene").onclick=function();//
滑鼠點選座標，引用值不能直接用mousepoint，不然當滑鼠在點選後移動時，目的座標會變更
direction = getdirection(currentpoint,tp);//
設定精靈朝向
var movepoint = getmovepoint(tp);//
獲取移動步長
getdistance, getdirection這兩個方法其實我是直接從深藍的部落格中的copy過來的，有興趣的朋友可以去看下他寫的silverlight遊戲開發系列教程，寫得非常好，位址是：
其實html5除了安全效能上面外，有一些效果處理起來還是相當方便的！大家玩魔獸時，對山丘之王的天神下凡應該都有印象，小矮人大吼一聲，身子迅速變大，威風凜凜，其實用html5來做的話，非常簡單的，其實就是縮放效果而已！
不廢話，直接上**：
到這裡，乙個基本的精靈就已經出現了！不過如果用來做遊戲的話，這樣零散的**是很痛苦的，下一節，我將介紹如果封裝這些**！
演示位址： (注：裡面的**比文章裡面的要新一些，已經完成了基本的精靈，地圖等，會不定時修改，每篇文章的源**直接在文章後附出，不單獨出現在演示位址中)
目錄位址：
HTML 5 GAME的幾款小遊戲例子推薦
html5 時代就要來了,連game也很多開始往html5上轉移,html5 game有幾個好處 1 跨平台瀏覽器 2 不用安裝 3 編寫維護快,容易 當然目前還有些問題,比如版權保護,渲染速度等,下面是幾個不錯的網上的小例子遊戲程式 1 是個迷宮的效果 2 webgl的小game,3d的 3 乙個...
Castle 開發系列文章
castle 是針對.net平台的乙個開源專案，從資料訪問框架orm到ioc容器，再到web層的mvc框架 aop，基本包括了整個開發過程中的所有東西，為我們快速的構建企業級的應用程式提供了很好的服務。4月份以來，terrylee寫了一系列的castle的文章，這裡做一下總結，後續還有facilit...
iOS開發系列文章
ios開發系列的文章，內容循序漸進，包含c語言 objc ios開發以及日後要寫的遊戲開發和swift程式設計幾部分內容。文章會持續更新，希望大家多多關注，如果文章對你有幫助請點贊支援，多謝！ios開發系列 c語言之基礎知識 ios開發系列 c語言之陣列和字串 ios開發系列 c語言之指標 ios開...