# 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)**

# PlayGifTest 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)**

# LoadJsScriptTest 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)**

# GifPlayer 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)**

# PixiGif Add [GIF](https://en.wikipedia.org/wiki/GIF) 89a (animated GIF) support for pixi.js. ## Getting Started Add GIF image alias to resourceManager as regular resources, and create a GifSprite by CG.PixiGif.createGifSprite(); ```typescript let resourceAlias = 'PixiGif.anim'; CG.Base.resourceManager.addAppResource(alias); CG.Base.resourceManager.load(() => { CG.Base.pixi.initialize(300, 300); // create a GifSprite, attach to pixi.root and play the animation let sprite = CG.PixiGif.createGifSprite(resourceAlias); CG.Base.pixi.root.addChild(sprite); sprite.play(); }); ``` You can setup custom sequences by any combination of frames. ```typescript let sprite = CG.PixiGif.createGifSprite(resourceAlias); sprite.addSequence('jump', [1,3,5]); // define a sequence named jump sprite.setSequence('jump', true); // set jump as the current sequence, and play ``` You can listen to events from GifSprite ```typescript let sprite = CG.PixiGif.createGifSprite(resourceAlias); sprite.on('frameChanged', (sp) => console.log('the frame is just changed')); sprite.on('complete', (sp) => console.log('the animation is complete and stopped')); sprite.on('play', (sp) => console.log('just starts playing the animation')); sprite.on('stop', (sp) => console.log('the animation is stopped')); sprite.on('end', (sp) => console.log('the animation plays to the end of the sequence')); ``` #### References - [GIF reader by Dean McNamee](https://github.com/deanm/omggif) - [GIF Format](http://www.onicos.com/staff/iz/formats/gif.html)

# Tut_SpaceShooter A Space shooter game. Avoid astroids, and shoot as many monster as you can. For more info, go [here](https://code.gamelet.com/edit/Tut_SpaceShooter) ## Controls WASD to accelerate Mouse to shoot ## Edit Game <a href="cg://source/CG.Tut_SpaceShooter/game.events" class="mat-raised-button mat-primary">Edit Game Events Sheet</a>

# 3Dby2DTutorial 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)**

# SortingTutorial 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)**

# TestFWalk 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)**

# CordovaTest 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)**

# Cordova This library wrap cordova plugins api for accessing native API when running in native app. ## Requirement This library only works when running as a native App(android, ios or windows). You can export a native app from a built production of your projects. Remember to check the corresponding plugin that your app needs when exporting native apps. Ex. Check to import "Camera" plugin if your app needs to access device camera. ## Getting Started Check if the build is running as a Cordova App before accessing any functions. ```typescript if(CG.Base.system.isCordovaApp()) { CG.Cordova.camera.getPicture(imgData => { // do something with the image data. }, error => { // handle error }); } ```

# ReactRouter This project wraps [React Router](https://reacttraining.com/react-router/) and provides util classes for easy intergration. Here is the description from official ReactRouter > React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering--so take your pick! ## Getting Started ```typescript CG.React.renderComponent(CG.ReactRouter.BrowserRouter, { routes: [ { component: SomeCompOfYours, path: '/', exact: true, }, { component: SomeCompOfYours1, path: '/path1' }, { component: SomeCompOfYours2, path: '/path2' }, { component: SomeCompOfYours, path: '/*' } ] }) ``` ## References * [Official Site](https://reacttraining.com/react-router/) * [React-Router on github](https://github.com/ReactTraining/react-router)

# A* algorithm In computer science, A* (pronounced as "A star") is a computer algorithm that is widely used in pathfinding and graph traversal, which is the process of finding a path between multiple points, called "nodes". It enjoys widespread use due to its performance and accuracy.<br/><div style='text-align:right'>from <a href='https://en.wikipedia.org/wiki/A*_search_algorithm'>wiki</a></div> ## In this project... 開始遊戲時。程式會自動生成50*50的隨機地圖。<br/> 而算法的開始點為(0,0)。終點則是地圖上隨機一個空白的格子。<br/> 算法完成後，你可以看到有綠色格子，代表算法曾經走過格子。<br/> 你也會看到一個藍色路線，那是A* algorithm 得出的路徑。 ## Reference **[A* tutorial(hightly recommend!)](https://www.gamedev.net/articles/programming/artificial-intelligence/a-pathfinding-for-beginners-r2003/)** ## Authors **[gamtable](/profile/gamtable)**

# ReactRouterTest 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)**

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

# jquery_tutorial_1 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)**

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

# CgEditorPhysics A Box2d Editor. Help user easily arrange Box2d objects. ## Authors **[Haskasu](/profile/Haskasu)**

# TestGame3 One Paragraph of project description goes here ## Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. ```typescript Give examples ``` ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Acknowledgments * Hat tip to anyone who's code was used * Inspiration * etc ## Authors **[Haskasu](/profile/Haskasu)**

# TestFilePond A Test project for filepond. # FilePond (v1.8.8) A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. ### Basic Usage Make sure to load the css before creating FilePond Apps. ```typescript CG.Base.linkCSSFile(CG.Base.getAppResourceFileUrl('[YourProjectCode.Alias]', 'react-filepond-0/filepond.min.css')) ``` Create FilePond App. ```typescript let app: FilePond.AppAPI = FilePond.create(); document.body.appendChild(app.element); ``` Create FilePond with existing element. ```typescript let app: FilePond.AppAPI = FilePond.create(document.getElementById('theIdOfTheInput')); ``` With React Component ```typescript export class FilePondComp extends React.Component { render() { return ( <div> <FilePond.FilePond allowMultiple={true} maxFiles={3}> </FilePond.FilePond> </div> ); } } ``` ### Demo Project - [TestPondFile](https://code.gamelet.com/edit/TestFilePond) ## References [Official Site](https://pqina.nl/filepond) This lib includes the following github repositories - [filepond](https://github.com/pqina/filepond) - [react-filepond](https://github.com/pqina/react-filepond) - [filepond-plugin-file-encode](https://github.com/pqina/filepond-plugin-file-encode) - [filepond-plugin-file-metadata](https://github.com/pqina/filepond-plugin-file-encode) - [filepond-plugin-file-poster](https://github.com/pqina/filepond-plugin-file-poster) - [filepond-plugin-file-rename](https://github.com/pqina/filepond-plugin-file-rename) - [filepond-plugin-file-validate-size](https://github.com/pqina/filepond-plugin-file-validate-size) - [filepond-plugin-file-validate-type](https://github.com/pqina/filepond-plugin-file-validate-type) - [filepond-plugin-image-crop](https://github.com/pqina/filepond-plugin-image-crop) - [filepond-plugin-image-exif-orientation](https://github.com/pqina/filepond-plugin-image-exif-orientation) - [filepond-plugin-image-preview](https://github.com/pqina/filepond-plugin-image-preview) - [filepond-plugin-image-resize](https://github.com/pqina/filepond-plugin-image-resize) - [filepond-plugin-image-transform](https://github.com/pqina/filepond-plugin-image-transform) - [filepond-plugin-image-validate-size](https://github.com/pqina/filepond-plugin-image-validate-size)