一、js編寫的小游戲有哪些

有是有，但并不是很多，而且都是貪吃蛇之類的，非常小的游戲，即便是頁游也一樣。

能運行在瀏覽器端的語言，確實只有JS，但在開發階段，卻并不一定要使用JS寫。而是用其他語言寫，直接使用JS寫游戲，實在太自虐了。

JS本身的缺點非常嚴重，如果只是寫DOM的話，其實并沒什么感覺，因為代碼量太少。

但如果寫類似游戲這種復雜邏輯，代碼量一變大，瞬間就令人崩潰了。弱類型，回調地獄問題，即便將來版本更新到ES10，也不可能完全解決。

如果你看過一個游戲項目的JS源碼，你會發現一個非常恐怖的現象。在代碼的最底部，有幾百個，甚至幾千個大括號。。。。所有大型程序的JS源碼，拉到最底部，大概都是長這個樣子的：

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}.Listen(127.0.0.1)}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}

大括號的數量還必須絕對精準，少一個，或者多一個，都無法正常運行。。。這就是平時所說的回調地獄。由于JS項目總是函數里面套函數，層層相套，這叫做回調函數。層數一多，就算你是N年的老手，也照樣懵比。。。。

所有的游戲項目，都比網頁特效的代碼量要多的多。。。比如寫一個斗地主，就需要4，5萬行的JS代碼。。。。。最底部的大括號數量，輕松上千。。。。

弱類型的缺陷更嚴重，但由于解釋起來篇幅會很長，所以這里就不提了。

所以為了避開JS本身太多的語法缺陷，一般游戲項目，都是使用其他語言編寫，最后再通過一些手段，編譯成JS。。。就如同你用一般編程語言編寫，最終運行的時候，只有1和0的道理一樣。。。在制作頁游的時候，一般都是用強類型語言編寫，最后開發完成之后，把那些強類型語言編寫的代碼，通過一些手段“轉換”成JS代碼。

“轉換”成JS代碼的方法有很多，其中在游戲行業比較主流的，一共有三種：

1，ActionScript語言，簡稱AS語言。也就是當年FLASH使用的那個語言。。。當年也曾輝煌過，后來隨著FLASH的沒落而逐漸沒落。。。但有很多H5游戲引擎，也同樣使用AS語言。比如LayaAir引擎等。

2,TypeScript語言，簡稱TS語言。由微軟出品，微軟和谷歌共同維護的一門完全符合ECMA標準的語言，可以視作JS的超集。超集這個概念怎么理解呢？就是“所有的JS語言，同時也是TS語言，而TS比今天的JS，更像未來的JS”。就比如目前的JS版本只出到了ES6或ES7。那么ES10是啥樣？現在并沒人見過，連ECMA組織也不知道。。。但有一點可以確定的是，它和TypeScript長的很像。而TS是包含JS的。換言之，JS本身也可以視作是TS的一部分。只是TS里的內容要遠比JS多的多。這語言主要有兩種用法，一是像AS語言一樣結合游戲引擎，比如cocos creator，白鷺等引擎都支持。還有一種用法就是。。。結合Three.JS之類的庫，完全按照JS本身的用法去使用。

3，C#語言。雖然JS得名字里面帶個Java。但和它長的最像的語言，卻并不是JAVA，而是C#。簡單說就是：“JS的名字和JAVA有多像，語法就和C#有多像”。所以C#也比較容易轉換成JS。但這并不是重點，重點是有一個超級牛的游戲引擎，是使用C#作為開發語言的。就是大名鼎鼎的Unity3D。Unity3D可以直接把C#編寫的游戲項目，虛擬現實項目等，編譯發布到WebGL。

二、關于Cocos2dx-js游戲的jsc文件解密

上一期關于Cocos2dx-js游戲的jsc文件解密教程后，收到不少同學反饋，提出了相關問題。本文將對這些問題進行初步分析，并提供一些解答。

通過官網下載CocosCreator開發工具并構建編譯，發現有腳本加密選項。構建后的樣本APK中，通過Jadx-gui進行java層源碼分析，了解到assets目錄下二進制源代碼的加載情況。在入口Cocos2dxActivity處，有一個onLoadNativeLibraries函數加載libcocos2djs.so文件。在AndroidManifest.xml中找到其定義為cocos2djs。

初步分析顯示，腳本加密操作可能發生在非java層，因此將研究對象轉移至libcocos2djs.so文件。通過閱讀Cocos2dx源碼，發現其使用xxtea加密和解密。CocosCreator構建項目過程則相反，運行時進行解密操作。

為了獲取Key值，我們以兩個游戲案例進行分析。游戲A中，將libcocos2djs.so文件拖入十六進制編輯器搜索ASCII字符串"Cocos Game"，未找到相關信息。使用IDA分析libcocos2djs.so文件，發現函數名簡潔，未進行安全處理。搜索xxtea/ key函數，找到相關函數。嘗試直接在so層獲取Key值，發現jsb_set_xxtea_key函數可能設置Key。通過回溯，找到了游戲A中的Key值（v26），使用該值成功解密jsc文件。

游戲B的分析類似，同樣在jsb_set_xxtea_key函數中找到Key值（v10），并通過附近的字符串找到可疑的Key值和Cocos Game。嘗試使用此Key值解密，同樣獲得成功。對比游戲A中的密匙，發現都位于applicationDidFinishLaunching函數內，可能為新的找Key值的關鍵。

通過閱讀相關源碼，了解Cocos2d-x應用入口中加載完成時回調的方法。結合CocosCreator構建項目過程，理解游戲應用環境加載完畢后，Key值傳入解密函數中，解密文件化為js文件，并在內存中拷貝，游戲調用js文件進入游戲界面。

在其他關鍵函數分析中，可以進一步探索解密過程。在xxtea_decrypt函數中觀察memcpy和memset操作，以及do_xxtea_decrypt函數的大量計算。結合CocosCreator源代碼，可以確定傳入參數中的Key值。使用Frida框架在游戲運行時Hook xxtea_decrypt函數，通過簡單的js腳本直接獲取Key值，操作相對簡單。

關于解密工具，獲取Key值后，直接參照CocosCreator源代碼實現解密邏輯即可。網上也存在一些封裝好的加解密程序，如jsc解密v1.44，可滿足當前Cocos2dx版本的文件加解密需求，操作較為簡單。

通過初步分析和實例探索，已經提供了一些解密Cocos2dx-js游戲jsc文件的關鍵步驟和方法。歡迎交流和分享更多見解。

三、如何使用Createjs來編寫HTML5游戲EaselJS簡介

createJs的由來，基礎什么的就不說了，就直接說createJs的用法吧。

首先到createJs官網下載，createJs分成easelJs（圖形動畫）、preloadJs（文件加載）、soundJs（音頻控制）以及tweenJs（補間動畫）四部分，大家下載的時候，建議下載兩個文件，一個是壓縮版文件，用于項目中的引用，再下載個源碼文件，用于查看用法、API、demo等。因為樓主目前只用了easelJs和preloadJs，所以暫時就只說這兩個，其實就這兩個已經非常夠用了。

接下來開始分析代碼：

首先引入js文件

<script src="easeljs-0.7.1.min.js"></script>

<script src="preloadjs-0.4.1.min.js"></script>

然后進行舞臺初始化操作：

function init(){

stage= new createjs.Stage("cas");

C_W= stage.canvas.width;

C_H= stage.canvas.height;

var manifest= [

{src:"image/man.png", id:"man"},

{src:"image/ground.png", id:"ground"},

{src:"image/bg.png", id:"bg"},

{src:"image/high.jpg", id:"high"},

{src:"image/coins.png", id:"coin"}

]

loader= new createjs.LoadQueue(false);

loader.addEventListener("complete", handleComplete);

loader.loadManifest(manifest);

drawLoading();

}

上面就用到了preloadJs中的方法，實例化一個loader，把需要加載的圖片文件放在manifest里面，進行加載，加載完成后調用回調handleCompelete函數：

function handleComplete(){//當圖片素材load完后執行該方法

var manImage= loader.getResult("man"),

lowground= loader.getResult("ground"),

highground= loader.getResult("high"),

bgImage= loader.getResult("bg"),

coins= loader.getResult("coin");

sky= new createjs.Shape();

sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);

sky.setTransform(0, 0, 1, C_H/bgImage.height);

stage.addChild(sky);

man= createMan(200,326,manImage);

//該框為判定角色的判定區域

kuang= new createjs.Shape();

kuang.graphics.beginStroke("rgba(255,0,0,0.5)").drawRect(0, 0, man.size().w, man.picsize().h*1.5);

// stage.addChild(kuang);

mapHandle(lowground, highground, coins);

createjs.Ticker.timingMode= createjs.Ticker.RAF;//設置循環方法，可以是requestAnimationFrame或者是setTimeout

createjs.Ticker.setFPS(30);//舞臺幀率控制

createjs.Ticker.addEventListener("tick", tick);//綁定舞臺每一幀的邏輯發生函數

window.addEventListener("keydown", function(event){

event= event||window.event;

if(event.keyCode===32&&man.jumpNum<man.jumpMax){

man.jump();

}

})

}

獲得加載完成后端的圖片數據就直接用loader.getResult就可以獲取了，跑酷游戲需要一個背景，咱們實例化一個sky，然后進行位圖繪制，bf方法是beginBitmapFill的縮寫，該方法就是開始繪制位圖，后面的drawRect是位圖的繪制區域，區域當然是整個畫布啦，所以就是drawRect(0,0,C_W,C_H)。實例化出來sky后就直接添加到舞臺stage里面就行了。接下來是實例化一個角色，createMan方法后面有說，是自己封裝的。

然后進行舞臺循環設置，上面有注釋了，就不說了。