彙整

Posts Tagged ‘GAME’

HTML5 遊戲開發範例整理(1-10)

2012 年 10 月 14 日 1 則迴響

整理自 Script Tutorials 上的 HTML5 Game Development 一系列課程,每個課程都有 Live Demo、Download Source 和簡單解說,整理在這,以備不時之需。

備註:圖片、Source、Live Demo 連結都來自於  Script Tutorials 。


第一課:HTML5 Game Development – Lesson 01

在第一篇文章中,將涵蓋基礎知識 – 在畫布上,創建簡單的對象,填寫,並通過鼠標的一些鏈接的事件處理程序。

Live Demo
download

第二課:HTML5 Game Development – Lesson 02

告訴你如何填充漸變色的對象,繪製文本,使用自定義的字體繪製文本,基本的動畫,最重要的 UI 元素 – 按鈕。

Live Demo
download

第三課:HTML5 Game Development – Lesson 03

開始添加動畫,和一些更有趣的功能。我們的演示將包括一艘太空船飛越時空,和一個新的元素 – “對話”。對話將包含兩頁,按鈕打開對話框頁面 + 隱藏對話框上的第二次點擊。

Live Demo
download

第四課:HTML5 Game Development – Lesson 04

今天要學的:有聲動畫精靈和基礎性工作。在我們的演示中,你會看到一個飛龍。在所有時間我們將聽到翅膀的聲音(我們將循環這個聲音),另一種聲音 – 龍的怒吼(mouseup 事件)。最後,我們會教我們的龍的鼠標光標(當我們按住鼠標)。
(Demo 測試:沒聽到聲音)

Live Demo
download

第五課:HTML5 Game Development – Lesson 05

音樂的例子。
主要學習優化 CSS3,讓 JavaScript 更簡化,提高效率。
(Demo 測試:沒聲音、滑鼠鍵盤都沒反應)

Live Demo
download

第六課:HTML5 Game Development – Lesson 06

模擬早期的舊電腦遊戲 – 坦克大戰。我會教你使用替代陣列的地圖,再加上我將顯示 – 如何檢測碰撞的活動對象(坦克)與環境(基於陣列的地圖)。

Live Demo
download

第七課:HTML5 Game Development – Lesson 07

模擬早期電玩店或街邊的打磚塊遊戲。在這一課中,主要學習如何檢測基本的碰撞和 HTML5 本地存儲。您可以使用鼠標和鍵盤(左 / 右按鈕)。我們將經過時間和碎磚(點)的量存儲在本地中。

Live Demo
download

第八課:HTML5 Game Development – Lesson 08

演示如何使用 Box2D 的一些物理引擎應用到您的項目中。 Box2D 是流行的開源 2D 物理引擎模擬的應用。 2D 物理引擎是遊戲開發的一個熱門話題。隨著物理引擎的幫助下,我們可以很容易地創建一個可玩的遊戲,只是定義一個環境和一個簡單的規則。

Live Demo
download

第九課:HTML5 Game Development – Lesson 09

使用第四課的畫布遊戲,並增加了火球,敵人和碰撞檢測。所以,現在我們的龍可以施放火球術和殺死敵人,讓這個遊戲是互動性更強。

Live Demo
download

第十課:HTML5 Game Development – Lesson 10

這是一個飛行模擬器 – 天行者,飛機,多個敵人。我們的目標 – 到終點線。旁邊還有主要特點:使用精靈的飛機和爆炸,可能按多個鍵(如 – 在同一時間,你可以移動和攻擊),有一定的水平長度,增強了碰撞檢測(現在的敵人可能會損壞我們的飛機) ,生活和分數 PARAMS。

Live Demo
download

以上,到目前總共 10 堂課。

分類:HTML5, 源碼 標籤:, ,

HTML5 Game 微軟九宮格速讀(源碼下載)

2012 年 10 月 14 日 發表留言

出自微軟的 HTML5 Game,是一個想了解 HTML5 & CSS 的好範例。

不得不說,Microsoft 這個 Demo 很有愛,很有教學示範的 Fu

因為:

如果不嫌麻煩的話,其實這個原始碼很好自行下載。
先從一開始的 Default.html 查看內容,再一一根據內容的連結,建立 Folder 和下載 png, css, js 等,這樣自己做過一遍之後,對於整個檔案架構也都了解完了。

九宮格數獨,是一種源自 18 世紀末的瑞士,後在美國發展、並在日本得以發揚光大的數字謎題。數獨盤面是個九宮,每一宮又分為九個小格。在這八十一格中給出一定的已知數字和解題條件,利用邏輯和推理,在其他的空格上填入 1-9 的數字。使 1-9 每個數字在每一行、每一列和每一宮中都只出現一次。

這種遊戲全面考驗做題者觀察能力和推理能力,雖然玩法簡單,但數字排列方式卻千變萬化,所以不少教育者認為數獨是訓練頭腦的絕佳方式。

演示 (DEMO)下載 (FILE)

PS. 下載連結的源碼已做了部分繁體中文化,僅作為研究用途,如有侵權請通知我移除,謝謝!!

分類:HTML5, 源碼 標籤:, ,

HTML5 遊戲開發資源

2012 年 10 月 14 日 發表留言

請原諒我的英文非常破,所以只好借用 Google 翻譯,讓自己多少能看懂一些。部分懶的調整翻譯了,簡單寫上了一些自己的理解和筆記。(藍色字部分)


翻譯來源:HTML5 game development resources

原作者 James 和 Josh 整理和收集了一些很有幫助的資源列表。並且發布和分享在自己的 Blog 上。

Me and Josh have been working hard on getting our first game Back To Earth out of the door. During this development, we’ve been collecting a pretty nice list of resources that have been very helpful for us. Why not wrap this up into a blog post and share with the world? I will continue to update this post whenever I get more information.




遊戲開發庫 (Game development libraries)

這是一個專業級的 JavaScript 遊戲庫和平台,可以開發出令人驚嘆的桌面和手機的 HTML5 遊戲,有自己的 2D 關卡編輯器 (Weltmeister) 和調適工具。參考資源如下:

  1. HTML5 遊戲開發工具推薦:IMPACT (簡體)
  2. Weltmeister 的介紹 (Vimeo) 
  3. Weltmeister 介紹 & 教學影片 (Youtube) 

This is a fantastic JavaScript game library, which the creator has admitted to it being perfect for arcade/platform games. It’s beautifully put together, comes with a great level editor and just works. There is a license fee, but it’s been worth every penny. 

這是一個輕量、模塊化的 JavaScript 遊戲引擎,內置動畫、事件管理、碰撞檢測等等。這個 JavaScript Engine 頗有趣的,比較注重接口和模塊。

    I’ve always found this framework interesting. You can make games with either canvas or DOM, it has a great entity component system and it keeps it’s base codebase small and promotes the use of plugging in modules to bring new functionality.

    突然出現的,但目前還很少人關注,作者似乎很有興趣,但是還沒開始嘗試。一些顯著的特點是它的瓷磚地圖格式,補間效果非常強大,跨瀏覽器支持多個音頻通道。

      This framework seems to pop up here and there though we’ve not tried it ourselves. Some notable features are it’s tiled map format, tween effects, very strong cross browser support and the multiple audio channel support (something very interesting which we would like to try out).

      在 GitHub 上,這是一個很好的資源,它幾乎列出了每一種 JS 遊戲庫。

        This is a great resource on GitHub, it lists pretty much every JS game library out there. 


        遊戲開發網站 (Game development websites)

        提供最新的遊戲開發各方面的新聞。它有很多高質量的文章和鏈接,用 RSS 訂閱它吧,讓自己隨時都能看到有趣的文章。

        This one to us is the daddy of the blogs. Just subscribe to it, and it will ensure you’re up to date on all sides of game development news. It’s has quality articles, quality links and it’s always very, very interesting. 

        另一個很好的資源,有幾個部分不只是新聞,如教程,演示,工具等,這將是另一個值得放進您的 RSS 閱讀器的好資源。

          Another great resource that has a few more sections than just news, such as tutorials, demos, tools etc. Another great resource which is worth putting in your RSS reader.


          遊戲開發播客 (Game development podcasts)

          I love these guys. Geoff Blair and Matt Hackett have a real chatty style and they have great chemistry, which makes every one of their podcasts fun and interesting. One of their podcasts featured an interview with the creator of Impact JS Dominic Szablewski which was very interesting to us as Impact is our game development framework of choice. Really recommend this podcast, not only is it interesting to hear how they’re building their indie game shop Lost Decade Games but they have lots of great topics to talk about too.

          Though this isn’t targeted totally at HTML5, we’ve still found this an interesting and enjoyable podcast. They’re currently covering the huge topic of game design, which has been very relavant to us so far. Definitely worth a good listen.


          其他 Impact JS 資源 (Other Impact JS resources)

          這是一個很好的資源,致力於影響 JS 的開發。它包含了很多的框架,資源,教程和插件,包括遊戲的亮點。如果也在 Impact JS 上製作一些東西,或是有興趣,這是一個不錯的參考地方。

          This is a great resource dedicated to Impact JS developers. It includes lots of highlights including games made with the framework, resources, tutorials and even plugins that were made. If you do stuff in Impact JS too, or you’re interesting in it, this is a great place to visit.

          這是一本不錯的書。不知道有沒有發行中文版本。

          這是一個非常整潔的小本子,很容易閱讀和學習。

            This is a very neat and tidy little book on getting up and running with Impact JS very quickly. Jesse Freeman did a great job on making this very easy to read and learn. In a good weekend you can get up and running with Impact and have a fully functional game. We hope to do a full review soon.





            其他 JavaScript  資源 (Other JavaScript resources)

            姑且稱之為討論區吧,這裡的討論涵蓋了許多有趣的 JavaScript 主題。

            This is a great podcast that I’ve been listening to recently. Though it has nothing to do with game development as such, it’s a great podcast that covers many topics to do with JavaScript in general. Saying that, there was a recent podcast where they talk to a professional Flash game developer. They discussed if HTML5 could (or could not) replace Flash fully on the web. Worth a listen. 

            用一個好的、現代的方式來學習 JavaScript。有助於了解一些陌生的概念的語言。

              A great, modern way to learn JavaScript. It definitely helped to understand some of the strange concepts of the language. 

              這不適合初學者,但是可以了解到很多相當優秀的 JavaScript Parts。

                This book has nothing to do with game development as such, but seeing that HTML5 game development is mostly about JavaScript, this is still a great resource. It’s written by Douglas Crockford and it’s a pretty definitive resource on JavaScript. It’s certainly not for beginners, but it’s definitely helped me step up to being a better programmer.

                分類:HTML5 標籤:,
                %d 位部落客按了讚: