整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
onstruct 2是一款能夠幫助你制作HTML5電腦游戲的應(yīng)用程序，它將為你帶來一個(gè)清晰直觀、支持“拖拽”操作的開發(fā)環(huán)境。程序中的大部分工具都可通過圖形界面來使用，完全無需寫下任何代碼，即使你沒有任何編程經(jīng)驗(yàn)也能擁有自己的游戲哦。
Construct 2
Construct 2旨在創(chuàng)建2D游戲，內(nèi)置的各種資源讓游戲制作更加輕松：物理引擎使游戲中的物體支持地心引力，當(dāng)然還有元件、背景、音效等各種游戲所需的圖形與聲音。另外，將媒體文件導(dǎo)入程序也很簡單。
Construct 2
Construct 2
簡單、直觀的視覺環(huán)境是Construct 2所信奉的哲理之一。當(dāng)你拖拽元件至某個(gè)位置時(shí)，程序會(huì)使該元件與其他物體互動(dòng)。例如：我的人物->撞墻->停止。很容易理解吧！
Construct 2
Construct 2
免費(fèi)版允許你將作品導(dǎo)出至HTML5，在任何平臺(tái)的任何瀏覽器中運(yùn)行，但這并不能幫你掙到一分錢。專業(yè)付費(fèi)版則增加了一個(gè)導(dǎo)出工具，使用這個(gè)工具，你的游戲不僅能在安卓或iOS設(shè)備中運(yùn)行，甚至，你還能創(chuàng)建一個(gè)可執(zhí)行文件，在電腦中運(yùn)行游戲。
Construct 2
毫無疑問，對(duì)于任何想要制作游戲，卻不懂編程的用戶來說，Construct 2都是一款不可多得的工具。簡單好用的工具搭配大量素材，絕對(duì)是你創(chuàng)建游戲的好選擇。
戲葡萄原創(chuàng)專稿，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載
HTML5游戲有哪些做法？在很多人眼里，H5游戲?qū)τ谒麄兛赡苓€只是像《圍住神經(jīng)貓》那樣簡單的樣子——產(chǎn)品形態(tài)簡單、推廣方式簡單、盈利模式也很簡單。
在白鷺時(shí)代（Egret）今天主辦的HTML5游戲大會(huì)上，來自全國各地大大小小的廠商，給出了不同的答案。
關(guān)于推廣方式（入口），現(xiàn)在有了QQ瀏覽器、QQ空間、360手機(jī)助手、百度貼吧、獵豹瀏覽器等；關(guān)于盈利模式，也有廣告變現(xiàn)、游戲內(nèi)購等；我們會(huì)在其他文章中盤點(diǎn)各路觀點(diǎn)。
這里先介紹現(xiàn)在HTML5游戲研發(fā)上的一些“進(jìn)化形態(tài)”。
《開心豆豆》于5月上線，墨麟旗下魚之樂研發(fā)，已在騰訊玩吧平臺(tái)上面運(yùn)營了半年。基本上兩周一個(gè)迭代。
《開心豆豆》針對(duì)12-65歲的女性用戶，風(fēng)格是日系Q版，核心玩法有三個(gè)：消除、闖關(guān)、手勢效果，后者是玩法上的一個(gè)小小的創(chuàng)新。這個(gè)游戲看上去很像傳統(tǒng)的三消類游戲，例如《糖果粉碎傳奇》、《開心消消樂》，但實(shí)際上它是一款連線消除游戲。闖關(guān)模式有主線過關(guān)、大關(guān)套小關(guān)、三星完美闖關(guān)等設(shè)定。手勢效果是新版本的設(shè)定，在同樣的消除不同的連線方式可以產(chǎn)生不同的特效惡搞。此外游戲還設(shè)置了一些障礙物，比如巧克力奶油冰塊等等。
該游戲在社交環(huán)節(jié)中也做了一些嘗試。首先是好友邀請(qǐng)，好友之間可以互相贈(zèng)送體力和道具。到5月23日為止有近400萬的玩家，其中80%的活躍用戶是女性玩家。未來還會(huì)加入主角系統(tǒng)，以美食為主題。主角可以在闖關(guān)的過程中收集食材，然后在甜品屋里制做甜品，再參加美食競技。
墨麟魚之樂今天展示的第二款游戲，之前的形態(tài)叫做《Q將水滸》，最早出現(xiàn)在QQ瀏覽器的游戲平臺(tái)上。當(dāng)時(shí)這款游戲是一款策略養(yǎng)成類游戲，混雜了社交、建設(shè)等元素。現(xiàn)在的《口袋江湖》是在《Q將水滸》基礎(chǔ)上，把策劃的數(shù)值和體系移植過來，把IP從水滸改為武俠題材，再強(qiáng)化了休閑策略的設(shè)定而成的。游戲里面是標(biāo)準(zhǔn)的武俠設(shè)定，玩家可以建設(shè)門派、招募弟子，稱霸武林等。
游戲的界面不像傳統(tǒng)卡牌，而是有著自己的主城。主城里面所有的建筑都有自己的功能，需要玩家自己去升級(jí)。游戲的戰(zhàn)斗是回合制的，雙方各出5個(gè)人，進(jìn)行復(fù)雜的戰(zhàn)斗，而不是撞卡式的。所有的英雄有自己的行軍速度、攻擊范圍、攻擊招數(shù)等。游戲還設(shè)定了資源戰(zhàn)、擂臺(tái)賽等體系，玩家之間還可以互相占領(lǐng)主城，而不是像《刀塔傳奇》、《我叫MT》等類似于單機(jī)的設(shè)定。這樣就突出了玩家之間互動(dòng)，仇人和仇人之間有互動(dòng)，鄰居和鄰居之間有互動(dòng)。
《少女戰(zhàn)機(jī)》是一款純HTML5游戲。人設(shè)方面，游戲以機(jī)娘為中心，將少女的萌和機(jī)甲的燃相結(jié)合，讓眾多的宅男得以找到自己喜歡的那一款機(jī)娘。戰(zhàn)斗模式方面，游戲保留的經(jīng)典的關(guān)卡模式，通過設(shè)置出一些無盡關(guān)卡，讓老玩家們得以延續(xù)他們的挑戰(zhàn)。游戲也打造了一個(gè)斬首模式，在里面，玩家需要通過自己對(duì)關(guān)卡的了解，運(yùn)用智慧挑戰(zhàn)實(shí)力懸殊的BOSS。當(dāng)玩家獲得一定的成長之后，會(huì)需要更多的挑戰(zhàn)來證明自己的實(shí)力，逃生模式就是為此而設(shè)計(jì)的。在逃生模式中，玩家將要在如潮的彈幕中生存下來。
指上繽紛研發(fā)一款三國題材的卡牌游戲。將策略游戲的玩法規(guī)則和Q版畫風(fēng)的幽默詼諧深度融合。
中娛在線研發(fā)，一款橫版動(dòng)作卡牌角色扮演類游戲。“我們精心設(shè)計(jì)了近百種不同的武器和技能，讓玩家在游戲里面能非常自由的收集技能，體驗(yàn)組合搭建技能的樂趣。然后再圍繞著這個(gè)核心創(chuàng)新點(diǎn)，我們采用情感體驗(yàn)式的設(shè)計(jì)理念，精心開創(chuàng)了一個(gè)相關(guān)的成長體系以及相關(guān)的一個(gè)玩法。然后再配上我們由頂級(jí)美術(shù)打造的一個(gè)一流的遠(yuǎn)古游戲世界，能讓玩家從視角到其他游戲體驗(yàn)都能獲得一流的游戲享受。最后我再確定以及肯定的告訴大家，這就是H5游戲。”
未來人科技研發(fā)，橫版回合制戰(zhàn)斗，九宮格策略布陣的游戲。“其實(shí)玩法上說白了沒有什么太大的創(chuàng)新，但是我們在美術(shù)風(fēng)格上確實(shí)做了很用心的一些設(shè)定。”“我們的核心的玩法，簡單來說就是讓玩家去積累一定的游戲內(nèi)資源，然后去獲取，去購買更多的武將，然后更高星別的武將。核心玩法的策略性上主要體現(xiàn)在九宮格布陣。”“訓(xùn)練場稍微給玩家開放了一點(diǎn)點(diǎn)類似于掛機(jī)類的玩法。你可以不用在線，你把它掛在上面，它就會(huì)慢慢的升級(jí)。然后這是每天會(huì)開的一個(gè)Boss戰(zhàn)。”
夢啟科技的一款放置類RPG游戲，也就是掛機(jī)游戲。核心玩法上，游戲有仇殺這種創(chuàng)新，也引進(jìn)來類似傳奇的紅名機(jī)制，用這種新的交互方式來增加活躍。在掛機(jī)的過程中，玩家還可以通過PK來爆掉其他玩家的裝備，游戲也會(huì)在之后增加爆裝的機(jī)會(huì)和條件。爆掉別人的裝備之后也會(huì)產(chǎn)生紅名，上惡人排行榜，吸引別人PK。第二個(gè)系統(tǒng)是美人。不同的美人有不同的屬性，有的美人適合打裝備，有的美人適合PK，有的美人適合大BOSS。多個(gè)美人可以組成美人陣法，對(duì)玩家屬性是一個(gè)很大的提升。最后一個(gè)核心是跨服。現(xiàn)有的掛機(jī)類游戲可以看到，出現(xiàn)了頁游之前的快速開服、快速洗服的現(xiàn)象。這樣會(huì)造成當(dāng)服的用戶活躍度不高，跨服就用來緩解這種問題。
山水地科技的一款重度策略類游戲，采用F2P加道具收費(fèi)的模式。開發(fā)周期前后陸續(xù)加起來將近一年。這款游戲13年初已經(jīng)初見成品，但當(dāng)時(shí)的硬件無法支撐，因此項(xiàng)目停滯了一段時(shí)間。到了今年年中，游戲重新進(jìn)行了一些開發(fā)，并且已經(jīng)在手Q空間上線。
游戲的核心玩法與其他策略游戲類似，但也有航海題材的一些特色，包括航海、冒險(xiǎn)、貿(mào)易、國戰(zhàn)、占領(lǐng)城市等等。首先，游戲擁有一張非常巨大的地圖，玩家可以在擁有180座城市的世界地圖里航行，在航行的過程中還會(huì)遇到風(fēng)暴等各種隨機(jī)探險(xiǎn)事件。游戲界面左下角的舵用來控制航行方向，玩家靠扔骰子的結(jié)果確定在海上航行的天數(shù)。
其次，游戲針對(duì)不同的地區(qū)設(shè)計(jì)了不同的建筑風(fēng)格，如果玩家在加勒比誕生，那么建筑風(fēng)格就為海盜風(fēng)，此外還有英格蘭、奧斯曼、華夏等風(fēng)格。并且這些建筑風(fēng)格還會(huì)發(fā)生變化，玩家的游戲行為會(huì)影響城市的發(fā)展度，發(fā)達(dá)的地區(qū)建筑風(fēng)格也會(huì)相應(yīng)的更加華麗。
再次，航海題材離不開航海貿(mào)易，每個(gè)城市都擁有自己的特色商品，這與另外兩個(gè)系統(tǒng)相配合。第一，每個(gè)城市的商品除了可以低買高賣用來盈利以外，這些商品本身可以作為材料制造裝備和恢復(fù)體力的食物。而這個(gè)制造系統(tǒng)又與游戲中重要的國戰(zhàn)系統(tǒng)相聯(lián)系，游戲中一共有四個(gè)國家，四個(gè)國家之間會(huì)因?yàn)闋帄Z資源而產(chǎn)生沖突，如果城市被敵對(duì)國占領(lǐng)，玩家就無法購買這座城市的特色材料。
游戲的PVE基礎(chǔ)系統(tǒng)為探險(xiǎn)模式，呈現(xiàn)為第一人稱視角的推圖模式。探險(xiǎn)過程中玩家會(huì)遇到包括戰(zhàn)斗、好友互動(dòng)、獲得寶箱物品等多種事件。玩家可以在每個(gè)城市中參與到主線任務(wù)、日常任務(wù)和不同的隨機(jī)委托等多種形式的任務(wù)。
PVP方面游戲提供多種戰(zhàn)斗模式：海上劫掠遭遇戰(zhàn)、城市切磋戰(zhàn)、城市占領(lǐng)、競技場天梯戰(zhàn)與陣型戰(zhàn)斗策越。
游戲中最重要的就是異步實(shí)時(shí)多人國戰(zhàn)，每個(gè)國家的玩家不管等級(jí)高低可以隨時(shí)航行到正在發(fā)生國戰(zhàn)的城市進(jìn)行戰(zhàn)斗，每個(gè)人都可以做出自己的貢獻(xiàn)。國戰(zhàn)又與游戲中的選舉與官職系統(tǒng)相結(jié)合，尤其是當(dāng)玩家被選舉為國王時(shí)，他會(huì)產(chǎn)生強(qiáng)烈的社交付費(fèi)需求。
游戲中還包括卡牌抽取，并且進(jìn)行了一定的創(chuàng)新。卡牌抽取分為很多類，通過人民幣、紅水晶、黃水晶等不同材料抽取，獲得的英雄具有不同的功能，紅水晶抽取的英雄善于PVE，黃水晶抽取的英雄善于貿(mào)易，每一種水晶都與玩家的游戲行為相結(jié)合，戰(zhàn)斗時(shí)獲得黃水晶，貿(mào)易獲得紅水晶等等。此外，每張卡牌都有自己的技能系統(tǒng)，并且可以互相繼承，解決了傳統(tǒng)卡牌游戲的缺陷。
山水地科技一款休閑社交游戲，包含寵物養(yǎng)成、牧場捕捉、戰(zhàn)斗策略、配對(duì)交互四大系統(tǒng)，女性用戶占60%以上。
游戲有以下核心玩法：一、配對(duì)，玩家可以為自己的小鳥向朋友的小鳥提親、接受提親、共同孵化新的小鳥。二、訓(xùn)練，玩家可以對(duì)小鳥進(jìn)行訓(xùn)練和留學(xué)。三、入侵，玩家可以入侵獵場或幫助好友反抗。
游戲擁有很強(qiáng)的社交性，具有公會(huì)和結(jié)婚的功能，有利于增加收入和提高用戶留存率。
游戲的盈利模式為通過群體PVP副本、群體PVE副本以及個(gè)人天梯賽等模式刺激玩家不斷提升小鳥的戰(zhàn)斗力。
有愛互動(dòng)的一款放置類RPG網(wǎng)游，是由文字MUD游戲演化而成，具有實(shí)時(shí)RPG離線系統(tǒng)與離線掛機(jī)訓(xùn)練系統(tǒng)。游戲玩法包括競技PVP、商城道具、裝備強(qiáng)化、多人團(tuán)戰(zhàn)以及工會(huì)等，游戲中打怪、經(jīng)驗(yàn)升級(jí)、獲得金幣、掉落裝備都是自動(dòng)的，游戲行為會(huì)在玩家離線后繼續(xù)進(jìn)行。
源：眾成翻譯 譯者：betsey
游戲的靈感
在使用過一段時(shí)間的SVG動(dòng)畫之后，我相當(dāng)清楚如何利用它來制作動(dòng)畫片段或者網(wǎng)頁布局。一些動(dòng)畫庫平臺(tái)，例如Greensock，和原生的CSS動(dòng)畫簡直是絕配。于是我便打算深入地研究一下，看看我能否用這些來制作一款簡單的游戲。就像一個(gè)精美的工藝品一樣，好的游戲擁有許多細(xì)致的動(dòng)畫細(xì)節(jié)。有一天夜里，我的腦海中突然閃現(xiàn)了一個(gè)游戲的靈感，我馬上起來，畫了一些草圖，之后給我的哥哥看--他是一個(gè)專業(yè)的網(wǎng)頁設(shè)計(jì)師。我們立即開始著手設(shè)計(jì)，討論了所有的細(xì)節(jié)動(dòng)畫后（試著畫出來并且配以音效），我便開始進(jìn)行游戲開發(fā)。
如何玩: 來回彈跳的球是可以改變顏色的。你必須隨時(shí)觀察球當(dāng)前的顏色，并且在球和柱子相接觸的一瞬間，確保兩者的顏色是一樣的。點(diǎn)擊柱子可以改變它的顏色，單擊變紅，雙擊變黃，三擊則變?yōu)樽仙?/p>
這里是游戲的完整版: http://codepen.io/gregh/full/yVLOyO
創(chuàng)作的過程
在開發(fā)這款游戲的過程中，我不斷地遇到問題并重構(gòu)代碼。其中的一個(gè)最主要的問題就是，如何能讓游戲在所有的設(shè)備和所有尺寸的顯示器上都看起來不錯(cuò)。我使用我的Macbook Pro 開發(fā)，游戲的畫面很棒。但是當(dāng)?shù)搅?27" iMac screen 上時(shí)，整個(gè)畫面就看起來特別小，當(dāng)然在iPhone又會(huì)顯得特別大。我真心地希望可以有一把適配所有設(shè)備的“萬能鑰匙”。經(jīng)過了許多次的嘗試之后，我清楚地意識(shí)到，傳統(tǒng)的使用媒體查詢的技術(shù)來做響應(yīng)式設(shè)計(jì)是行不通的。
這篇文章并不是一個(gè)教程，因此我將不會(huì)逐行的解釋我的代碼。但是，我會(huì)展示給你一些十分酷的東西，你可以通過在CodePen上或者是在瀏覽器的調(diào)試工具里面修改參數(shù)進(jìn)行測試。同樣，我也會(huì)在相應(yīng)的地方寫出一些參考資料。在CodePen上，我盡可能多的寫出代碼注釋，趕快去看看代碼吧！
十分強(qiáng)大的GSAP讓我理所當(dāng)然地選擇了它，而我選擇在CodePen上面寫碼的原因是它內(nèi)置了一個(gè)Babel編譯器，這樣我就可以在上面書寫ES6的語法，你不知道Class和箭頭函數(shù)有多好用！ 關(guān)于ES6的特性介紹，你可以點(diǎn)擊這里: https://github.com/DrkSephy/es6-cheatsheet
使用GreenSock制作動(dòng)畫
我下面假設(shè)你熟悉GSAP用法,但如果你不熟悉的話，你可以看下這個(gè)“討厭番茄”的人的關(guān)于GSAP的教程。https://ihatetomatoes.net/get-greensock-101/
背景動(dòng)畫
幾乎所有你能在背景上看到的東西都是用SVG制作的。每個(gè)波浪是一個(gè)獨(dú)立的<div>,每一層的山峰也是一個(gè)<div>,甚至云也是<div>。當(dāng)你在制作一個(gè)復(fù)雜的動(dòng)畫時(shí)，有一點(diǎn)是需要注意的。你完全可以使用一整個(gè)SVG當(dāng)做背景，然后為這個(gè)SVG的子元素和路徑來制作動(dòng)畫。Greensock允許我們這樣做，你需要做的僅僅是為這些SVG的元素（比如說path，group等等）分配一些ID，然后用過ID選擇到他們。但這樣做的問題在于，在移動(dòng)設(shè)備上，這些動(dòng)畫跑不動(dòng)。所以你最好是把這些背景元素放在獨(dú)立的<div>里面，然后為這些<div>添加動(dòng)畫，我實(shí)際上就是使用這些SVG的作為背景。
通過類似于上面的代碼，我們就得到了一些簡單的補(bǔ)間動(dòng)畫。這些動(dòng)畫可以將背景水平地移動(dòng)54個(gè)像素（也就是背景的寬度），在這里我們想要背景勻速地移動(dòng)，所以我們不需要緩動(dòng)動(dòng)畫。當(dāng)我們?yōu)槊總€(gè)背景設(shè)置不同的移動(dòng)速度的時(shí)候，他們就有表現(xiàn)出了視覺差的效果，看上去很酷吧！
看到畫面上漂浮著一些白色的小圓點(diǎn)了沒？我創(chuàng)造了這些圓點(diǎn)并為他們設(shè)置了隨機(jī)的位置和尺寸，接著我讓他們做圓周運(yùn)動(dòng)。
這樣他們就緩慢地進(jìn)行圓周運(yùn)動(dòng)，但看上去卻像隨機(jī)運(yùn)動(dòng)一樣。
柱子動(dòng)畫
每一個(gè)柱子里都有一些會(huì)動(dòng)的小元素，這些小元素僅僅是由HTML和CSS制作出來的。使用SASS可以節(jié)省很多時(shí)間和代碼量（通常情況下是這樣的）。我通過創(chuàng)建形狀的mixins來為這些柱子里面的小東西添加效果。如果我們看下bublble這個(gè)效果的代碼，我們就會(huì)發(fā)現(xiàn)每個(gè)圓圈都使用了絕對(duì)定位并使用到了這個(gè)mixin。在CSS中創(chuàng)造三角形需要很多的代碼，所以mixin就派上了大用場。
讓我們看看紅色的柱子，柱子里面包含著很多的氣泡：
所以現(xiàn)在，如果想要在柱子里面創(chuàng)造一些氣泡的話，我只需要調(diào)用這些mixin，設(shè)置氣泡的大小，然后讓把他們放在柱子的特定的位置上就好了：
當(dāng)你需要通過邊框來制作一些小的三角形的時(shí)候，你需要用大概20行的css代碼來生成，所以使用mixin實(shí)在是太有必要了。
氣泡的動(dòng)畫
我使用交錯(cuò)動(dòng)畫來做這個(gè)效果。這個(gè)動(dòng)畫可以操控柱子里面所有的氣泡元素，并且可以讓每個(gè)氣泡有一個(gè)小小的延時(shí)，讓他們不會(huì)同時(shí)開始運(yùn)動(dòng)。點(diǎn)擊這個(gè)鏈接，你可以了解更多的關(guān)于交錯(cuò)動(dòng)畫的知識(shí):http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/
三角形的動(dòng)畫
在黃色的柱子里面，我使用到了旋轉(zhuǎn)的效果。但是你可能注意到，有些旋轉(zhuǎn)是圍繞著X軸的，有些是圍繞著Y軸進(jìn)行運(yùn)動(dòng)的。我們在這里使用到了 cycle屬性。
方塊的動(dòng)畫
在制作方塊的動(dòng)畫的時(shí)候，我們也使用到了相同的技術(shù)。因此，有一半的方塊是從左向右移動(dòng)的，而另外一般則做反方向的運(yùn)動(dòng)。
分?jǐn)?shù)的動(dòng)畫
讓我們點(diǎn)擊重新開始，再看下這個(gè)動(dòng)畫吧.
我想要分?jǐn)?shù)的動(dòng)畫有一種“Q彈”的感覺，于是我就寫了幾行代碼來形成這個(gè)效果。
為了做出這種“觸電”（或者說是“Q彈”）的效果，我們需要制作正確的緩動(dòng)動(dòng)畫。如果你想要看看你可以使用什么樣的緩動(dòng)方程，看下 Greensock 緩動(dòng)觀察器:http://greensock.com/ease-visualizer 選擇 Elastic 并調(diào)整配置參數(shù)，你就可以實(shí)時(shí)地看運(yùn)動(dòng)效果。
彈性盒子
這款游戲的第一個(gè)創(chuàng)新性就是使用了“彈性盒子”，如果要是不了解彈性盒子的話，你可以閱讀下這篇優(yōu)秀的文章： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 或者看下 Laracasts上的相關(guān)系列。一旦你開始使用了彈性盒子，你就再也離不開它。下面我們看下我的的主菜單界面和游戲界面吧。
開始游戲的容器CSS樣式如下：
“flex-direction: column”表示在容器內(nèi)部彈性元素的排列方向。 設(shè)置為Column，則元素從上到下依次排列。而默認(rèn)的（row）則將元素從左到右排列。彈性盒子可以這只空白區(qū)域，我們可以設(shè)定我們是在元素的前面、后面或者周圍放置這些空白區(qū)域。動(dòng)手試下，感受下彈性盒子是多么好玩吧！因?yàn)槲覀冊O(shè)置成了“space-between”，所以 Top 被放在了頂部， How to Play被放在了底部，而Logo Holder則放在了中間，空白區(qū)域被填充在了這些元素之間。 Align-items: center, 定于交叉軸（這個(gè)游戲中代表水平軸）上元素的對(duì)齊方式，center表示居中對(duì)齊。其中 How to Play也是一個(gè)彈性盒子，它的代碼如下:
它也是一個(gè)flex元素，我們?nèi)绻ピO(shè)定他的flex-direction, 它將使用默認(rèn)值（row），將其中的三個(gè)彈性元素水平的排列。第一個(gè)和第三個(gè)元素的“flex”參數(shù)為1，因此他們將占據(jù)所有的空白空間，flex是一個(gè)相當(dāng)高端的特性。同樣的，你也可以通過在How to Play上設(shè)置 justify-content: space-around來達(dá)到同樣的目的.我使用flex: 1 的原因是，我想讓中間的一列排在屏幕的最中央。
下面我們看下游戲界面。這個(gè)界面也是一個(gè)彈性布局。界面有一個(gè)柱子容器和一個(gè)球的容器。我不想讓球是絕對(duì)定位的，因?yàn)槲彝ㄟ^css讓球剛好坐在柱子上，這樣即使我改變柱子的高度，我也不需要改動(dòng)其他代碼就可以讓球恰好落到柱子上。因此我將容器的flex-direction設(shè)置為 column,正如我所愿，球容器剛好緊挨著柱子的頂部。justify-content: space-between讓球的容器永遠(yuǎn)靠著屏幕的頂部，而柱子容器永遠(yuǎn)靠著屏幕的底部。 現(xiàn)在我們給球的容器如下的樣式:
球的容器也是彈性布局，我們將flex方向設(shè)為column（這樣Y軸成為了主軸，元素從上到下排列）。之后我們通過 justify-content: flex-end將球推到了容器的底部，因此，我們便得到了兩個(gè)緊密排列的容器，并且第一個(gè)容器的內(nèi)部元素被推到了該容器的最下面，這樣我們便做到了讓球坐在了柱子上的效果。
試想下，如果我們不使用彈性布局會(huì)怎么做？我們也許會(huì)使用到floats, width: 33.33333% ，position: absolute 和 bottom: 0，我的天啊！ Flexbox讓整個(gè)界面變得如此整潔有條理，寫碼簡直爽翻了.
讓游戲界面可縮放
做這個(gè)游戲，最重要的事情是讓畫面變得可縮放。看下這款游戲在不同尺寸的屏幕上達(dá)到了完美的效果！如同我說的，我僅僅是使用了 CSS transform， 這樣做具有它獨(dú)特的挑戰(zhàn)性。假如游戲的默認(rèn)大小是 1200x800px.嗎，如果你的屏幕大小和這個(gè)不一樣的話，你需要通過調(diào)節(jié)系數(shù)讓游戲的容器變得大一些或者小一些，也就是做個(gè)計(jì)算"screenHeight/800\".當(dāng)然，如果設(shè)備的高度大于寬度的時(shí)候（當(dāng)我們的平板或者手機(jī)處于垂直模式的時(shí)候）我們也需要相應(yīng)地縮放我們的屏幕，下面是計(jì)算縮放比例的代碼 :
顯然僅僅是這樣做不能讓視覺體驗(yàn)變得完美，所以我們需要在縮小我們的游戲界面的同時(shí)讓它垂直水平居中。
因此，我們需要讓整個(gè)游戲的容器以相同的尺寸放大，這樣當(dāng)縮放界面的時(shí)候，容器可以100%的占據(jù)屏幕的尺寸。如果我們將界面縮小到原始尺寸的一半的時(shí)候，我們需要讓它的容器放大到原來的兩倍大小，這樣容器便可以充滿整個(gè)屏幕。相反如果屏幕很大的時(shí)候，我們需要將界面變?yōu)樵瓉淼?.2倍，那么容器將相應(yīng)的從原始尺寸縮小到 screenSize/1.2
后記
我希望你能喜歡這個(gè)游戲和我寫的這篇文章，我也希望通過這篇文章，你可以收獲一些新的東西并作出十分精彩的作品
我將持續(xù)不斷地完善我的游戲，并相應(yīng)地更新文章，增加新的玩法或者嘗試些新的技術(shù)哦！
本文由眾成翻譯（zcfy.cc）的譯者翻譯完成，搶先閱讀更多優(yōu)質(zhì)英文技術(shù)文章，歡迎訪問眾成翻譯。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
