HTML5小遊戲 是男人就下一百層 UI美化版

之前寫的小遊戲，要麼就比較簡單，要麼就是比較難看，或者人物本身是不會動的。

結合了其它人的經驗，研究了一下精靈運動，就寫乙個簡單的小遊戲來試一下。

介紹一下幾個主要的類：

遊戲的檔案結構：

wfn.js：基礎檔案，包含動畫定義，公共方法（都是比較簡單的）

person.js：人物的定義

block.js：各種障礙物塊的定義

main.js：遊戲主邏輯入口檔案，處理主要邏輯

遊戲的檔案結構：

timeprocess：主要用於統一處理定時器的事件，確保全域性只有乙個計時器

1

//定義貞管理類，相容
2var requestanimationframe =window.requestanimationframe
3                                 ||window.mozrequestanimationframe
4                                 ||window.webkitrequestanimationframe
5                                 || function(cb);67
var timeprocess = function
()12     timeprocess.prototype =);
17},
18         start : function
()35
36if
(self.isstart)requestanimationframe(arguments.callee);
37});
38},
39         stop : function
()43     }

frame：幀的定義，就類似flash中的幀

1

//幀的定義2/*
*3@param x int 幀在雪碧圖中的起始x座標
4@param y int 幀在雪碧圖中的起始y座標
5@param w int 幀在雪碧圖中的寬
6@param y int 幀在雪碧圖中的高
7@param dw int 幀實際的寬
8@param dh int 幀實際的高9*/
10var frame = function
(x,y,w,h,dw,dh)

animation：動畫的定義，乙個動作需要多個連貫的幀才能完成

1

//乙個動畫得定義
2var animation = function
(param) 
26     animation.prototype =
3839
this.index = 0;
40this.current = this.ls[0];
41},
42//
下一幀43         next : function
() 52}53
else
59},
60//
重置為第一幀
61         reset : function
(),66         size : function
();69
}70     }

sprite：精靈的定義，乙個完整的個體，是需要多個動畫，例如向左，向右等

1

//乙個精靈的定義2/*
*3@param objparam object 動畫的json物件 
4@param def string 預設動畫索引
5@param img object 精靈得雪碧圖
6@param cxt object canvas物件
7@param x int 精靈的起始位置x
8@param y int 精靈的起始位置y9*/
10var sprite = function
(img,cxt,fps,param);
13this.img =img;
14this.cxt =cxt;
15this.x = param.x || 0;
16this.y = param.y || 0;
17this.fps =fps;
1819
this.xspeed = param.xspeed || 0;
20this.yspeed = param.yspeed || 0;
2122
this.yaspeed = param.yaspeed || 0;
2324
this.lazy = 1000 / this
.fps;
25this.last = 0;
2627
this.movelazy = 33;
28this.movelast = 0;
2930
//當前動畫
31this.index = null;32
33this.key = "";34}
35     sprite.prototype =
44},
45//
修改當前動畫
46         change : function
(key),
59//
繪畫出當前幀
60         draw : function
(),68
//更新精靈
69         update : function
()81
82if(diff >= this
.lazy)
8889
if(movediff >= this
.movelazy)
98},
99//
移動100         move : function
(x,y),
105         setxspeed : function
(xs),
109         setyspeed : function
(ys,yas),
114//
獲取當前精靈得大小
115         size : function
();120
}121     }

下面是遊戲試玩：

鍵盤左右控制移動，介面上的按鈕是給iphone觸屏用，全面相容iphone4的retina，可以直接放在phonegap中使用！

第0層<

>

載入中...

flash版小遊戲 是男人就下100層

最近買了android，在電車上挺無聊的，給android做了個小遊戲玩玩，順便弄了個flash版 遊戲畫面如下 遊戲測試url如下 這個遊戲實現起來很簡單，也很少，首先需要幾個碎圖 因為遊戲簡單，直接把相應的圖做成mc來的比較快 一共以下幾個mc 遊戲精靈，普通地板，可旋轉地板，左移地板，右移地板...

HTML5遊戲開發 是男人就下100層

專案流程 市場調研 可行性分析 可行性報告書 需求分析師 客戶經理 需求分析 需求說明書 專案經理 需求分析師 概要設計 概要設計說明書 er圖，uml 專案經理 專案組長 詳細設計 詳細設計說明書 流程圖 資料庫建好 專案週期表 甘特圖 office project visio 專案組長 開發人員...

html5小遊戲基礎知識

顯示乙個div和隱藏乙個div 首先，我們要顯示乙個div和隱藏乙個div需要使用css裡面使用 hide show 在需要顯示或隱藏的div輸入 id title class show id title class hide 還有一種點選顯示和隱藏方法 js裡面的 function fun id ...