1. 程式人生 > >【翻譯】動手動腦玩轉Web遊戲之三:人物動起來、敵人出現、自定義視角

【翻譯】動手動腦玩轉Web遊戲之三:人物動起來、敵人出現、自定義視角

讓角色動起來

   當鍵盤上特定的按鍵被按下時,為了讓我們建立的角色同步地動起來,需要讓Gamma來為我們改變物件水平、垂直方向的位置狀態。在本章節,我們將實現如下功能:

·鍵盤上向左的方向鍵控制角色往左移動

·鍵盤上向右的方向鍵控制角色往右移動

·鍵盤上的空格鍵控制角色跳躍

按鍵碼

    首先我們得知道這三個按鍵(左鍵,右鍵和空格鍵)分別對應的鍵碼(譯者注:就是我們所說的按鍵所對應的ASCII)。通過查閱鍵碼錶 我可以知道左鍵對應的ASCII碼值是37,右鍵是39,空格是32

移動角色的函式

    然後,我們得弄清楚Gamma提供了哪些函式可以用於改變角色的位置狀態。當遊戲開始後,一旦我們給角色下達了向右移動的按鍵指令,那麼角色就會以一個固定的速率動起來。本例中我們主要會用到

Gamma提供的movejump兩個API庫函式。呼叫move時為其傳遞LEFT引數實現角色向左移動的功能,同理,讓角色向右移動時只要將move函式的引數改為RIGHT即可。呼叫jump就可以實現角色的跳躍動作。movejump函式都需要一個按鍵事件的物件作為其輸入引數。

我們使用Gamma提供的API為按鍵註冊響應處理函式。響應處理函式被呼叫時系統會為其傳遞一個鍵盤事件,用於區分是按鍵被按下還是按鍵彈起。

gma.keyHandler.register(37, function (keyEvent) {

    manager.character.move(gma.constants.LEFT, keyEvent);

});

gma.keyHandler.register(39, function (keyEvent) {

    manager.character.move(gma.constants.RIGHT, keyEvent);

});

gma.keyHandler.register(32, manager.character.jump);

    為按鍵註冊訊息處理功能的API包含包裡,所以在game.js開頭的require函式裡需要匯入gma/events依賴包。

科裡化/閉包

    上面的程式碼不是很優美,我們可以使用

Javascript的科裡化功能。科裡化是一種根據輸入引數返回函式的函式,是閉包最偉大的應用之一(譯者注)。例如下面的(f1f2)函式是等價的。建立f2時,根據其第一個輸入引數對其進行科裡化之後,就只需要一個按鍵事件作為其輸入引數就可以了:

f1 = function (keyEvent) {

    manager.character.move(gma.constants.LEFT, keyEvent);

};

f2 = manager.character.move.curry(gma.constants.LEFT);

    所以,前面關於按鍵訊息處理函式的註冊程式碼可以簡化成:

gma.keyHandler.register(37, manager.character.move.curry(gma.constants.LEFT);

gma.keyHandler.register(39, manager.character.move.curry(gma.constants.RIGHT);

gma.keyHandler.register(32, manager.character.jump);

最終示範程式碼

require([

'gma/base',

'gma/manager',

'gma/entities/character',

'gma/events'

],

function(gma) {

var manager = gma.manager({

            width : 600,

            height : 500

        });

        manager.character = gma.character({

            left     : 0,

            bottom   : 0,

            width    : 3,

            height   : 6,

            depth    : 3

        });

var myLevel = {

            spawn : {

                main : [15, 24]

            },

            entities : [

                {top:0, left:0, width:30, height:3},

                {top:0, left:36, width:30, height:3}

            ]

        };

        manager.storeLevels(myLevel);

        gma.keyHandler.register(37, manager.character.move.curry(gma.constants.LEFT));

        gma.keyHandler.register(39, manager.character.move.curry(gma.constants.RIGHT));

        gma.keyHandler.register(32, manager.character.jump);

        manager.init();

    }

);

新增障礙

        Gamma也提供了一些用於定義障礙的物件,這些物件都有自己的行為方式。如果要在遊戲關卡里新增障礙,必須將其放置在一個數組裡。

entities : [

    gma.platformEnemy({bottom:0, left:45, width:3, height:6}),

    gma.patrolEnemy({bottom:0, left:6, width:3, height:6, limitLeft: 3, limitRight:12}),

    gma.jumpingEnemy ({bottom:0, left:7,  width:1, height:2}),

    gma.jumpingEnemy ({bottom:3, left:8,  width:1, height:2

相關推薦

翻譯動手動腦Web遊戲人物起來敵人出現定義視角

讓角色動起來    當鍵盤上特定的按鍵被按下時,為了讓我們建立的角色同步地動起來,需要讓Gamma來為我們改變物件水平、垂直方向的位置狀態。在本章節,我們將實現如下功能: ·鍵盤上向左的方向鍵控制角色往左移動 ·鍵盤上向右的方向鍵控制角色往右

.NeterLinux系列Linux下shell介紹以及TCPIP基礎

基礎篇 實戰篇 一、Linux下的shell 概述:每個人在成功登入LINUX後,系統會出現不同的提示符號,例如 $、~、#等,然後你就可以開始輸入需要的命令,若是命令正確,系統 就會依據命令的要求來執行,直到登出系統為止,在登入到登出期間, 輸入的每個命令都會經常解譯及

.NeterLinux系列Linux下的分割槽講解

基礎篇 實戰篇 一、Linux分割槽 概述:首先我們要對硬碟分割槽的基本概念進行一些初步介紹,硬碟的分割槽主要分為主分割槽和擴充套件分割槽兩種。主分割槽和擴充套件分割槽的數目之和不能大於四個,且基本分割槽可以馬上別使用,但不能再分割槽。擴充套件分割槽必須再進行分割槽後才能

程式碼用Python微信,echarts餅圖,WordCloud雲圖,自動回覆訊息,好友地區熱圖

參考用Python玩轉微信(一),做了一些修改 import re import os import time import itchat from echarts import Echart, Legend, Pie import wordcloud from wordcloud im

cocos2d-x十九Cocos2d-x 3.0截圖功能整合

3.0的截圖和2.x的截圖基本上相同,都是利用RenderTexture來處理,在渲染之前呼叫call函式,然後呼叫Cocos的場景visit函式對其進行渲染,渲染結束後呼叫end函式即可。只是3.0截圖需要在截完屏的下一幀才能處理RenderTexture,這點要注意。關

cocos2d-x十四繪圖CCDrawingPrimitives和CCDrawNode

最近忙出翔了,這年過的也揪心。好久沒來更新部落格了,今天就來寫一寫cocos2d-x中圖形的繪製。 1.概述 其實cocos2d-x封裝了大量的opengl的繪圖函式,我們可以很輕鬆的在遊戲

cocos2d-x點九圖和輸入框的使用

登入介面一個帳號/密碼輸入框或者主角命名框是少不了的。這節就來了解一下點九圖的輸入框的使用。這裡只是介紹基礎知識,並不進行平臺的移植,也不處理跨平臺可能出現的問題。 1.點九圖CCScale9S

專欄 - 帶你Visual Studio

帶你玩轉Visual Studio 本系列是從事C++開發工作一年半以來對VS用法的經驗和總結,主要內容有:1、Windows下Visual Studio在C++開發方面的功能和使用方法;2、用Visual Studio進行C++

cocos2d-x十七粒子系統的載入優化

Cocos2d-x的粒子系統是通過載入plist生成的。plist包含兩部分內容:粒子系統屬性和粒子紋理。然而每次呼叫create都會對plist進行讀取解析,如果重複地使用同一個粒子效果,這樣的呼叫明顯是低效冗餘的。所以我們要做的是,將粒子系統屬性和粒子紋理分別抽出。 (

整理Adam TaylorMicrozed系列——乙太網通訊部分

最近在學習ZYNQ 乙太網模組,找到的<Adam Taylor玩轉Microzed系列>比較分散,整理如下。 01 Adam Taylor玩轉MicroZed系列第77部分——Zynq SoC上的乙太網介紹 http://xilinx.eetrend.com/

cocos2d-x十一弱聯網與伺服器的通訊

這裡採用Apache+php搭建了一個簡易伺服器,服務端用php語言,客戶端採用cocos2d-x的CCHttpClient類通過http方式訪問服務端資源。模擬了cocos2d-x提交賬戶和密

.NeterLinux系列Linux下的文件目錄及文件目錄的權限

pac linux 在那 用戶 目錄結構 重要 bsp 樹狀 hub 一、Linux下的文件目錄 簡介:linux的文件系統是采用級層式的樹狀目錄結構,在此 結構中的最上層是根目錄“/”,然後在此目錄下再創建 其他的目錄。深刻理解linux文件目錄是

.NeterLinux系列Linux下MySQL的安裝配置使用

基礎篇 實戰篇 一、Linux安裝MySQL (1)下載安裝包:https://dev.mysql.com/downloads/mysql/ (2)解壓並安裝 命令:tar zxvf 檔名 解壓完成之後,重名一下資料夾名字。 命令:mv 檔名1 

.NeterLinux系列Linux下的檔案目錄及檔案目錄的許可權

基礎篇 實戰篇 一、Linux下的檔案目錄 簡介:linux的檔案系統是採用級層式的樹狀目錄結構,在此 結構中的最上層是根目錄“/”,然後在此目錄下再建立 其他的目錄。深刻理解linux檔案目錄是非常重要的,如下圖所示: 將來你用哪個使用者登入,你就會在那個使用

.NeterLinux系列crontab使用詳解和Linux的程序管理以及網路狀態監控

基礎篇 實戰篇 一、crontab使用詳解  概述:任務排程:是指系統在某個時間執行的特定的命令或程式。 任務排程分類:       (1)系統工作:有些重要的工作必須周而 復始地執行。       (2)個別使用者工作:個別使用者可能希望執 行某些程式。

老司機帶你面試(2)Redis 過期策略以及快取雪崩擊穿穿透

![](https://cdn.geekdigging.com/Interview/mianshi_header_1.jpg) ## 前文回顧 建議前一篇文章沒看過的同學先看下前面的文章: [「老司機帶你玩轉面試(1):快取中介軟體 Redis 基礎知識以及資料持久化」](https://www.gee

[]Web APi認證(Authentication)兩種實現方式(十三)

用戶數 ted das 客戶 元素 基礎 目標 開始 net 本文轉自:http://www.cnblogs.com/CreateMyself/p/4857799.html 前言 上一節我們詳細講解了認證及其基本信息,這一節我們通過兩種不同方式來實現認證,並且分析如

cocos2d-x十二plist解析工具Anti_TexturePacker

之前拿了一些別人的圖片素材,是用TexturePacker打包合成的,結果寫程式的時候不知道每個合成前小png圖的名字是什麼,只能一個一個從plist檔案中找,然後猜測對應的名字,再進行顯示,如果不對,

cocos2d-x二十六資料結構CCDictionary

CCDictionary在cocos2d-x中被大量的應用,比如CCTexureCache,CCSpriteFramCache等等。 1.實現原理 1.1.uthash CCDiction

cocos2d-x二十九利用CCClipingNode做遊戲遮罩

新手引導是遊戲中必備的(除了奇葩的MT用一段動畫開始),也是玩家對遊戲的第一印象,重要性不言而喻。一般採用的遮罩的形式來突出引導重點,同時遮蔽其他功能。這裡簡單的介紹一下游戲遮罩的實現,並給出一個