Phaser實例教程(一)

2021-02-16 phaser小站

最近在社區看到了Boom Dots的簡化教程,九十多行,於是自己也想寫一個看看,自己需要花幾行代碼才能夠完成

繪製圖像用bitmapData方法並用circle方法顯示出圓形

當滑鼠按下時發射小球,需要滑鼠按下事件

遊戲中的碰撞檢測,需要物理引擎

得分可以進行本地最高分存讀

由於這邊沒涉及重力之類的,執行效果不明顯就不截圖了.

這裡什麼都沒做處理，所以小球就一去不復回了。

當我方小球出界,則重新開始遊戲

碰撞後得分加一,碰撞沒有問題,但是對方不能不動呀,所以給對方的小球加上移動的代碼並且碰撞後需要重新刷新界面

能夠看到重新遊戲之後得分沒有歸零,也沒能顯示最高得分,所以最後我們來完成這一步

雖然看起來很囉嗦,但是其實連上html的標籤一共才72行

把update合在一起不到70行

最後附上完整demo代碼截圖一張:

這個demo涉及到的知識點雖然少,但是只要掌握了,起碼能寫出很多不錯的小遊戲,一切看你的思維如何與Phaserjs結合併產生智慧的火花了!

如果有興趣了解Phaserjs或有不明白,歡迎加群一起探討,群裡有很多大神

該教程由Phaser小站原創,後續教程可訪問官網或者關注公眾號,會有推送！

如果覺得寫的不錯，您的打賞我的動力之源

Phaser樂園

相關焦點

  • 【教程】AE插件Particular最新官方演示及中文教程實例
    ☀ CGTop專注設計資源與教程分享！▶回復「 設計 」，查看往期 電視包裝創意設計；▶回復「 教程 」，查看往期 C4D、AE電視包裝實例教程。CGTop數字藝術【教程學習】 ↓ _ ↓Particular 官方最新演示 + 中文錄製教程。CUBE李莎莎講解，往期AE課堂視頻。
  • CAD教程:CAD狀態欄柵格使用與設置實例
    【PConline 教程】這次CAD教程為大家帶來AutoCAD2013中文版狀態欄柵格使用與設置實例詳解教程。一、AutoCAD2013啟用柵格功能可以通過以下操作實現是否啟用柵格功能的切換。1.按鍵盤【F7】鍵可啟用或關閉柵格。
  • Excel實例教程:利用SUMPRODUCT函數根據條件求和
    Excel實例教程：利用SUMPRODUCT函數根據條件求和（視頻教程點下方文字連結）Excel實例教程：利用SUMPRODUCT函數根據條件求和格式：=SUMPRODUCT(（條件1）*（條件2）……*（要計算的單元格）)案例一：求出下表中「張平」在星期五的總和解答：案例二：根據如下表計算出「張平」的加班費合計要求：首先分別計算出平常天和星期六
  • 三維CAD實例教程:使用中望3D設計葉輪
    三維CAD實例教程:使用中望3D設計葉輪 2016年08月09日 13:44作者：薛麗潔編輯：薛麗潔文章出處：泡泡網原創 在本篇文章中，小編將以圖1中的葉輪為實例，向大家介紹如何使用中望3D進行葉輪設計。 圖1葉輪效果圖下面，我們分步來向大家介紹葉輪建模設計的操作。
  • CAD基礎實例教程 學完之後你會加深對這幾個命令的理解的
    不知不覺又周五了，今天依然帶來一個CAD的實例教程。有小夥伴說，之前的教程畫出來雖然精美，但是對於初學者來說，還是有些難度的，畢竟很多時候線條還算複雜，而且沒有聲音講解的話，無從下手。既然如此，今天帶來一個比較簡單的實例教程，雖然使用到的命令不多，而且圖形簡單，但是我相信學完之後，對於新手來說，能加深對這幾個命令的理解的。今天的教程主要使用到這幾個操作，圓內接多邊形，三點畫圓弧以及修剪。
  • CAD教程:CAD狀態欄對象捕捉使用實例
    【PConline 教程】對象捕捉是使AutoCAD2013自動捕捉到圓心、端點及中點這樣的特殊點。繪圖時,可能需要頻繁地捕捉一些相同類型的特殊點,AutoCAD2013提供了自動對象捕捉功能。自動對象捕捉又稱為隱含對象捕捉。
  • CAD新手實例教程:零基礎怎麼了?只需10步一樣畫完
    然而，CAD的學習給人的感覺可能比較枯燥而難懂，如果沒有相關教程，很多人都會望而卻步，熟悉軟體操作本就不是一件容易的事。今天就帶來一個新手實例教程，就算你是零基礎，只要軟體在手，一樣可以通過本文學會並從中熟悉各種命令，話不多說，開始吧。
  • 星空系列教程(下) 降噪方法比較及堆棧降噪實例
    網絡上星空攝影教程屢見不鮮，我試圖將這些碎片化的知識點結合自己的經驗，整理成系列教程， 全面地講解前期拍攝技術和後期思路，並用實例詳細介紹後期處理的每一步驟。星空攝影的後期處理中降噪尤為重要，本文是系列教程的下篇，主要對比各種降噪方法，並有堆棧降噪實例。為了確保知識的連貫性，建議先學習上篇--《前期策劃是拍攝成功的保證》和中篇--《銀河及地景拍攝技巧》。
  • 2300頁工程測量實操教程:4種測量儀實用指南+7個實例測量方案
    這份測量教程共15套2000多頁，其中包括4種測量儀（GPS、經緯儀、全站儀、水準儀）的使用教程及測量方法，還有7套工程實例的專項測量方案，圖文並茂，易於學習。15個建築工程測量培訓資料合集【文末可拿全套電子版！！】
  • 南方CASS教程附下載
    CAD\南方CASS教程\5、CASS實例教程視頻\10、南方CASS數據傳輸--CASS讀取全站儀數據視頻教程.exeCAD\南方CASS教程\5、CASS實例教程視頻\11、南方CASS作原有地形圖數位化實例教程視頻.exeCAD\南方CASS教程\5、CASS
  • 見到過的最完整的CAD實例教程:如何畫切割刀片
    大家不用猜測，為什麼許久都不更新CAD的實例教程。就是因為沒素材，沒有其他特別原因。而前幾天，終於有同學發來素材來諮詢具體的畫法，今天就給這位小夥伴一個滿意的答覆，也希望大家在畫類似的圖形時有所參考。
  • cad實例教程:使用中望3D設計鈑金零件
    如圖1所示，這是一款小貨車上的鈑金件，該零件包含了較為簡單的直線折彎和衝孔，也包含了曲面折彎工藝和拉伸工藝，看似簡單，但實際上在設計的操作上，卻也具有一定的難度，對設計師來說有一定挑戰性。　　圖1 小貨車上的鈑金零件在本次的實例教程中，我們將一起來學習如何使用中望3D完成這個鈑金件的設計。
  • XRD與Jade學習資料合集,教程/乾貨/視頻免費分享!
    Jade User's  Manual教程+軟體丨XRD怎樣計算晶粒大小簡潔實用丨MDI jade 快速入門與7大技巧超級實用丨120頁PPT，一步步演示Jade各種高級操作Jade實例教程丨數據導入Jade使用教程（3）多重記錄  峰形對比Jade使用教程（4）多峰分離Jade使用教程（5）角度補正曲線的製作Jade使用教程（6）設備固有半峰寬補正曲線的製作Jade
  • 沒見過這麼詳細的CAD實例教程 手把手教學,如何畫立體齒輪
    但「傳統手藝」還是不能丟的，今天就帶來一期CAD實例教程，手把手的教學，如何畫一個立體齒輪。CAD版本：中望CAD 2020專業版1、先畫兩條中心線作基本校準（後來才發現用實線會比較好）。
  • AutoCAD 2007中文版標準教程:5-12.陣列
    由「21互聯遠程教育網」www.21hulian.com推出的重點介紹了AutoCAD 2007中文版的新功能及各種操作方法、操作技巧和應用實例。教程最大的特點是，在進行知識點講解的同時，列舉了大量的實例，使學習者輕鬆的掌握AutoCAD 2007中文版的使用方法及技巧。
  • AutoCAD 2007中文版標準教程:15-17.風玫瑰
    由「21互聯遠程教育網」www.21hulian.com推出的重點介紹了AutoCAD 2007中文版的新功能及各種操作方法、操作技巧和應用實例。教程最大的特點是，在進行知識點講解的同時，列舉了大量的實例，使學習者輕鬆的掌握AutoCAD 2007中文版的使用方法及技巧。
  • CAD動態塊餐桌實例製作教程,最詳細的動態塊教程
    丨餐桌動態塊丨教程詳細操作步驟：（溫馨提示該文章需要花費大量的時間來進行學習，如果有不懂的可以私信我）1，找到我們成塊的餐桌，這裡尺寸為1200*2000，2，雙擊進入塊編輯器，3，點擊左側參數面板，線性參數
  • FPGA開發板快速教程(一)
    因此，我參考朋友給我的意見，寫了這個簡易的教程，以非常詳細的實例來讓初學者了解基於QuartusII和NiosII IDE的FPGA/SOPC開發的基本流程，目的是為了讓初學者儘快上手FPGA/SOPC的開發流程，儘快投入到實踐中。
  • 英文教程太難啃?這裡有一份TensorFlow2.0中文教程
    近兩個月，網上已經出現了大量 TensorFlow 2.0 英文教程。在此文章中，機器之心為大家推薦一個持續更新的中文教程，以便大家學習。簡單的圖像分類任務探一探此文章中，機器之心為大家推薦一個持續更新的中文教程，方便大家更系統的學習、使用 TensorFlow 2.0 ： 知乎專欄地址：https://zhuanlan.zhihu.com/c_1091021863043624960 Github 項目地址：https://github.com/czy36mengfei/tensorflow2_tutorials_chinese
  • ZEMAX雜光分析實例
    最近在研究ZEMAX的雜光分析，有一些心得體會，把它寫成實例教程，分享給各位在為光學事業奮鬥的光學er！