# TiledMapGame One Paragraph of project description goes here ## Getting Started (For a game project) Write some tips or instructions how to control in your game. (For building a module) Write a piece of codes to demostrate how to use this module. ```typescript function examples() { } ``` ## Authors **[gamtable](/profile/gamtable)**

# 入門C班 第七課 [課程筆記](https://docs.google.com/presentation/d/1aewgBro8YxsZ6Q4CkEf_wuNImwZRKWpa6tZGaNNRgTg/edit?usp=sharing) ## 作業題目 製作猜數字遊戲。 ## 作業指引 1. 新增一個新的檔案，副檔名為ts 2. 從app.ts呼叫class，並傳送參數 3. 過程中請記得多測試，以免在某處發生BUG ## 建議 1. 盡量不要看解答寫，善用課程筆記回顧所學內容 2. 倘若看了解答後仍有疑問，歡迎至FB群組發問 <br/> <a href="cg://source/app.ts" class="mat-raised-button mat-primary">開始寫作業</a> ## 附註 * 出題：[火魂](/profile/Frank)

# TiledMapEngine 方塊地圖遊戲引擎 如果大家有玩過光暈戰記／Minecraft，那一定方塊地圖十分了解：<br/> #### <I>方塊地圖是指地圖由一格一格組成。</I><br/> 這個引擎可以讓大家輕鬆做出方塊地圖，並在地圖上設計遊戲。<br/> 不過使用這個引擎之前，你必須在<a href="">我們提供的地圖編輯器</a>設計你的地圖。<br/> 有關地圖編輯器的說明，可以在該專案查看。<br/><br/> ## 我不懂那些函式怎用，怎麼辨？ 你可以點入本專案程式碼查看說明，一切程式碼都是開源的。<br/> 你也可以在本專案建立討論串，說明你的問題。<br/> ## How to use 本專案大多使用asynchronous function，<br/> 換而言之，在使用本專案之前，你可能需要學習一些語法，比如： ```typescript this.gameMap.renderMap() .then(() => { //write your code in here }); ``` 這個程式是要this.gameMap去加載地圖，由於加載地圖需要時間，<br/> 不使用asynchronous function的話，你的程式會卡著一段時間。<br/> 現在，在使用asynchronous function的設計後，你只要把加載地圖之後的程式寫在then中，就可以避免卡著的情況。<br/><br/> 在完成地圖設計之後，你會得一個JSON檔案，這個檔案儲存了一切有關那個的資料。<br/> 然後，你須在你的專案加入本模組，並把JSON檔案上載至你的專案（你也可以修改左方CG.TiledMapEngine中的tiled_map.json）。<br/> 接下來，請參考加載地圖示範： ```typescript CG.Base.pixi.initialize(500, 600); //格式化PIXI CG.Base.resourceManager.addAppResource('TiledMapEngine.mapResource') //加載你的地圖圖片 CG.Base.resourceManager.load(() => { //step 1: 加載JSON $.getJSON(CG.Base.getAppSourceUrl('CG.TiledMapEngine/tiled_map.json'), (data) => { //請把那個url改成你json檔案位置，如果你是直接修改tiled_map.json，這邊可以不用改 //step 2:建立地圖，並把地圖資料，即JSON傳入 this.gameMap = new CG.TiledMapEngine.Map(data , true); //建立一張新地圖，在建立時，會把json資料傳入, true代表有視野限制 //step 3:把地圖素材包加到地圖中 this.gameMap.importUsedMapTexture() //把地圖格子資料加到地圖 .then(() => { //step 4:生成地圖 this.gameMap.renderMap() //生成地圖 .then(() => { CG.Base.pixi.root.addChild(this.gameMap); //把地圖加到PIXI中 }); }); }) }); ``` 這樣，你就會得一個this.gameMap，而這就是你的地圖。<br/> 在CG中，實作無限地圖十分簡單，<br/> 在光暈，我們只有一個地圖，即是只有一個this.gameMap，<br/> 但在CG，你可以使用上面的方法，建立多個地圖。 ## API ### CG.TiledMapEngine.camera ### <div style="color:red">Method</div> set(map: Map, x: number, y: number): void<br/> 根據輸入的地圖和位置，移動視角。 | Parameter | Type | Description | Optional | |:---------:|:------:|:------------------:|:--------:| | map | Map | 要移動視角的地圖。 | No | | x | number | 位置的x軸座標。 | No | | y | number | 位置的y軸座標。 | No | ## Author **[gamtable](/profile/gamtable)**

# numberGuess One Paragraph of project description goes here ## Getting Started (For a game project) Write some tips or instructions how to control in your game. (For building a module) Write a piece of codes to demostrate how to use this module. ```typescript function examples() { } ``` ## Authors **[Frank](/profile/Frank)**

# TwelvedA Homework 6 [Class Notes](https://docs.google.com/presentation/d/1c37HNRwSuSKdFmi2EvyLbL57E2719f49gKMzRkfH4Ys/edit?usp=sharing) ## Subject Write a function that accepts two numbers as parameters, and return the distance between them. ## Directions 1. Write the codes in app.ts 1. Don't forget to call the function and see if the result is as expected. <a href="cg://source/app.ts" class="mat-raised-button mat-primary">Start Coding</a>

# Ray Casting Algorithm Ray Casting Algorithm is an algotithm that can check a line can be passed through or not. <br/><br/> this project involves vector's calculation, so I customed Vector and PIXI object for convenience.<br/><br/> To understand what I am doing, watch the above video.<br/><br/> <iframe width="560" height="315" src="https://www.youtube.com/embed/c065KoXooSw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ## Authors **[gamtable](/profile/gamtable)**

# LittleBirdHunting Demo for CG classwork. ## Design <a href="cg://source/CG.LittleBirdHunting/game.events" class="mat-raised-button mat-primary">Edit Events</a> ## Author **[Haskasu](/profile/113321052805704333314@google)**

# FiveBouncingBalls One Paragraph of the game description goes here ## Getting Started <a href="cg://source/CG.FiveBouncingBalls/game.events" class="mat-raised-button mat-primary">Edit Game Events Sheet</a> ## Authors **[Haskasu](/profile/113321052805704333314@google)**

# BouncingBallGo One Paragraph of the game description goes here ## Getting Started <a href="cg://source/CG.BouncingBallGo/game.events" class="mat-raised-button mat-primary">Edit Game Events Sheet</a> ## Authors **[Haskasu](/profile/113321052805704333314@google)**

# BouncingBall 在這兒寫下一段簡短的文字介紹你的遊戲吧。 ## 開始設計 <a href="cg://source/CG.BouncingBall/game.events" class="mat-raised-button mat-primary">編輯遊戲事件表</a> ## 作者 **[Haskasu](/profile/113321052805704333314@google)**

# Test0 One Paragraph of the game description goes here ## Getting Started <a href="cg://source/CG.Test0/game.events" class="mat-raised-button mat-primary">Edit Game Events Sheet</a> ## Authors **[Man.Ocean](/profile/111379707613261057975@google)**

# PixiWidget Everything is widget! Including animation! 在PixiWidget這個library，你將會運用全新的方法去設計UI，PixiWidget提供了一切的基本UI元件，包括scroll bar，drawer等等，讓你可以快速建立可用的介面。 <br/><br/> 在這個基礎上，你可以客製化你的UI，使UI更有個人特色。 <br/><br/> 在設計這個library時，設計者會盡量彈性設計，這個可以使用 extends 來擴展原有的功能。 # API reference ## Getting Started (For a game project) Write some tips or instructions how to control in your game. (For building a module) Write a piece of codes to demostrate how to use this module. ```typescript function examples() { } ``` ## Authors **[gamtable](/profile/gamtable)**

# webdesign_basic 在這兒寫下一段簡短的文字介紹你的遊戲吧。 ## 開始設計 <a href="cg://source/CG.webdesign_basic/game.events" class="mat-raised-button mat-primary">編輯遊戲事件表</a> ## 作者 **[Haskasu](/profile/113321052805704333314@google)**

# HaskaTestServer 在這兒寫下一段簡短的文字介紹你的遊戲吧。 ## 開始設計 <a href="cg://source/CG.HaskaTestServer/game.events" class="mat-raised-button mat-primary">編輯遊戲事件表</a> ## 作者 **[Haskasu](/profile/113321052805704333314@google)**

# CG Server This library gives apps the tools to access the powerful game server that provided by code.gamelet.com. The server provides the abilities listed below: 1. Player managements including login, profile, password etc. 1. A database that can do score leaderboard, individual player status, and more. 1. Multiplayer online connections (powered by socket.io). ## GLT Server A Database server. <a href="cg://source/CG.Server/GLT_README.md" class="mat-raised-button mat-primary">GLT Server Readme</a> ## MSG Server A realtime socket server. <a href="cg://source/CG.Server/MSG_README.md" class="mat-raised-button mat-primary">MSG Server Readme</a> ## Authors **[Haskasu](/profile/Haskasu)**

# SpaceShooter_zh 在這兒寫下一段簡短的文字介紹你的遊戲吧。 ## 開始設計 <a href="cg://source/CG.SpaceShooter_zh/game.events" class="mat-raised-button mat-primary">編輯遊戲事件表</a> ## 作者 **[gamelet.tutor](/profile/112731664099129893666@google)**

# SpaceShooter_en One Paragraph of the game description goes here ## Getting Started <a href="cg://source/CG.SpaceShooter_en/game.events" class="mat-raised-button mat-primary">Edit Game Events Sheet</a> ## Authors **[gamelet.tutor](/profile/112731664099129893666@google)**

# TW_Starter 在這兒寫下一段簡短的文字介紹你的遊戲吧。 ## 開始設計 <a href="cg://source/CG.TW_Starter/game.events" class="mat-raised-button mat-primary">編輯遊戲事件表</a> ## 作者 **[Haskasu](/profile/113321052805704333314@google)**

# Tut_Trigono One Paragraph of project description goes here ## Getting Started (For a game project) Write some tips or instructions how to control in your game. (For building a module) Write a piece of codes to demostrate how to use this module. ```typescript function examples() { } ``` ## Authors **[Haskasu](/profile/Haskasu)**

# TutSpaceShooterBasic 在這兒寫下一段簡短的文字介紹你的遊戲吧。 ## 開始設計 <a href="cg://source/CG.TutSpaceShooterBasic/game.events" class="mat-raised-button mat-primary">編輯遊戲事件表</a> ## 完整的遊戲專案在此 https://code.gamelet.com/edit/Tut_SpaceShooter ## 作者 **[Haskasu](/profile/113321052805704333314@google)**