HTML、CSS、JS打造Windows桌面版《2048》

前言:

受益于Node的問世,Javascript終于能夠掙脫瀏覽器這個(gè)條條框框的盒子。于是,Javascript能夠開發(fā)服務(wù)器應(yīng)用了。既然Javascript能夠運(yùn)行在操作系統(tǒng)中,那是否也能使用Javascript像C/C++開發(fā)那些個(gè)桌面應(yīng)用呢。

在Google一番之后,果然已經(jīng)有高人實(shí)現(xiàn)了這個(gè)想法了。

Node-WebKit,把瀏覽器的布局引擎WebKit和Node.js結(jié)合了在一起。WebKit負(fù)責(zé)處理HTML5 UI相關(guān)的部分,而Node.js負(fù)責(zé)本地的API接口,比如文件系統(tǒng),網(wǎng)絡(luò),設(shè)備等等。

一個(gè)需要特別提醒的,Node-WebKit的開發(fā)維護(hù)者正是國內(nèi)的王文睿大大,中國人啊,很自豪有木有!!但是項(xiàng)目文檔好想沒有中文版的,只是英文版的,這也許是要和國際接軌的原因吧。

項(xiàng)目地址:https://github.com/rogerwang/node-webkit

話不多說,我們擼起袖子,開始嘗試一下使用前端技術(shù)開發(fā)桌面應(yīng)用的樂趣吧。

Windows桌面版《2048》

Step 1 準(zhǔn)備材料

1、node-webkit(本文使用v0.8.6-win版本):
http://dl.node-webkit.org/v0.8.6/node-webkit-v0.8.6-win-ia32.zip

2、基于jQuery實(shí)現(xiàn)的2048游戲:
http://www.w3cfuns.com/blog-5446836-5399036.html(原文地址)
https://github.com/JerryC8080/My2048(下載地址)

node-webkit的其他版本,在項(xiàng)目地址(https://github.com/rogerwang/node-webkit)可以下載得到,不同操作系統(tǒng)是不同版本的。

基于jQuery實(shí)現(xiàn)的2048游戲,是我之前做的一個(gè)小玩意,而這一次就完美移植到Windows桌面,哇嘎嘎嘎。

node-webkit下載并解壓之后,如下:


文件說明:

  • nw.pak --核心Javascript庫
  • incudt.dll --網(wǎng)絡(luò)庫
  • ffmpegsumo.dll --媒體庫,為、或者其他媒體功能提供支持
  • libEGL.dll、libGLESv2.dll、D3DCompiler_43.dll、d3dx9_43.dll --該四個(gè)dll,為WebGL、GPU、DirectX提供支持

基于jQuery實(shí)現(xiàn)的2048游戲下載并解壓之后,如下:


Step 2 編寫package.json文件

在《2048》游戲的目錄,新建一個(gè)package.json文件,輸入內(nèi)容:

{
  "name": "MyDemo",
  "main": "index.html",
  "window": {
    "toolbar": false,
    "resizable": false,
    "width": 660,
    "height": 800
  }
}

Step 3 壓縮源程序

我們使用壓縮工具,把已經(jīng)編寫好的../My2048-master目錄里面的內(nèi)容壓縮。
壓縮需要注意的兩點(diǎn):

  1. 壓縮格式要為zip;
  2. 文件后綴名要為.nw;

如圖:


壓縮完成


Step 4 預(yù)覽

把壓縮好的 My2048-master.nw 文件復(fù)制到node-webkit目錄:


運(yùn)行cmd,

移動(dòng)到node-webkit所在的目錄: cd + node-webkit所在的路徑

運(yùn)行命令:nw My2048-master.nw


便能看到預(yù)覽效果了


Step 5 生成exe執(zhí)行文件

依然在node-webkit的目錄下

運(yùn)行命令:copy /b nw.exe+My2048-master.nw My2048.exe


OK,我們可以看到node-webkit目錄下多了一個(gè)My2048.exe的執(zhí)行文件,我們雙擊它運(yùn)行看看效果:


Step 6 打包程序

如果想把這個(gè)程序發(fā)給朋友,除了.exe文件之外,還需要包括另外兩個(gè)必要的文件:

  • icudt.dll(必要網(wǎng)絡(luò)庫)
  • nw.pak(核心javascript庫)

這兩個(gè)是最基本的文件,如果程序還包含了其他功能,還需要包含相對應(yīng)的dll文件,各個(gè)文件功能說明文章開始已經(jīng)說明了。

所以,我們得到了最基本的發(fā)布版了:


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容