第一個h5小遊戲怎麼做?

01-14

本人是剛出來做前端的實習生，然後突然有一天老闆給了一些psd的圖，讓我做h5的打地鼠的遊戲，要兼容不同解析度的手機屏幕，不知道從何開始入手？？本人html.css,js基礎還是有的，想套模板感覺有很多不同，自己寫也不知道怎麼寫感覺有很多東西。。。最重要的是，不知道從何入手？求指導

正巧我也做過打地鼠，算是遊戲中比較簡單的一類。

地鼠定時冒頭（定時器），移動的過程用到動畫，用戶點擊時判斷是否擊中（碰撞檢測），擊中效果用到幀動畫，大概就這麼簡單。

如果你用 DOM，基本上第三方庫都不需要，如果用 canvas，找個開源的 render engine 就差不多了。

兩種方案:

1,使用css,好處是製作快捷,方便做頁面適應,缺點是不能深入做效果.

首先得想辦法實現地鼠出洞效果,可以用一個div方塊做容器,overflow:hidden,地鼠圖片在裡面上下移動即可,然後需要一張洞在地鼠背後的圖片,一張洞在地鼠前面的圖片,跟地鼠圖片用z-index前後定位做遮擋即可完成,然後複製幾份,使用定時器和隨機函數播放出洞入洞的動作.給div容器綁定點擊事件,點中後播放相應動畫和加分,基礎架構完成.

2,使用canvas方案,好處是靈活度和深度,缺點是顯示什麼的效果都得自己做,自適應不是很好弄,費心.

如果不是專門在這方面折騰的,就不要考慮這個方式吧,如果需要,我可以把以前實現的原理寫出來.

總的來說,先找出最基本的要求去實現,然後再建立遊戲的邏輯.做好主幹,細節慢慢完善.

推薦一個完全免費不受人數限制的小遊戲製作

（之前用過好多個平台，凡科、贏銷+之類的，發現，玩家數超過某個值是要付費的，或者是註冊完了之後，那邊的營銷經理就反覆打電話過來談合作之類的，嚇得我直接拉黑。所以當我遇到下面這個平台的時候，簡直感動到哭）

平台：易企玩（我不是廣告，所以不插鏈接了，百度或者私我吧）

它主要功能有：

海量模板
完全免費
沒有限制
全部自定義

……

嗯，他最大的優勢就是不限制玩家數。話不多說，跟我一起做一個小遊戲，你就知道它有多好用了。

下面是製作方法：

&>&>1.素材自定義

遊戲中所有圖像文字，都可以根據需求自定義替換。而且還可以插入微信公眾號鏈接，引流到公眾號哦。（你看我的公眾號叫「雨山並瓦」，圖中，我就把LOGO改成我自己的啦）

轉發的文字、摘要一定要簡潔，並體現出利益點，或能勾起玩家的挑戰慾望。當然，不能忘了植入自己。

&>&>2.獎品上傳

在「卡券中心」選擇新增卡券，記得卡券的使用時間一定要大於遊戲結束時間哦。

&>&>3.活動獎品設置

中獎分為概率抽獎、排行榜發獎、分數段發獎。其中排行榜發獎，只能活動結束後聯繫中獎者。設置完成之後，記得點擊發布活動哦。

&>&>4.獎品核銷

後台"卡券中心"設置好核銷賬號。用戶中獎後，點擊獎品，會出現左圖的二維碼。

運營者用手機掃描二維碼，就可以帳號密碼登錄核銷後台，再次掃碼，獎品就被核銷了。

雖然後台核銷了，但還是別忘了手動給人發獎品哦。

完成啦。希望對你是有用的哦。

（PS：由於這些內容原本是發在公眾號里的，所以畫質不太清楚；由於知乎不能上傳GIF圖，所以步驟這一塊如果覺得不太明白的話，可以關注我的公眾號，點擊歷史消息找到第一篇去查看哦）

如果有興趣，可以加我為好友，一起溝通，我現在公司也在做微信這一塊，應該有挺多能夠相互幫助的吧（微信號：SXUEP11）、公眾號：雨山並瓦

我的第一個遊戲是手機搖一搖，第二個是打地鼠，第三個是黑白格子，在公司半年下來做了近60款h5的遊戲，目前不上班，在家接單，

作為新手還是下一個模板套一下就好

會html，js，css就可以。再參照現有的h5遊戲源碼，做個簡單的不算難

我就寫過打地鼠，比較簡單……隨機數就好了，加個定時器，用上響應式的html樣式，就變成了符合任何屏幕的小遊戲了…