# TwilightWarsEvents 使用光暈戰記的遊戲引擎 + 同人陣的任務制作 = TwilightWarsEvents ## Getting Started ```typescript // app.ts export class App { constructor() { CG.TwilightWarsLib.initialize() .then(() => { CG.TwilightWarsLib.events.startEvents('CG.projectCode/your_mission.events') }); } } export const APP = new App(); ``` ## Authors **[Haskasu](/profile/Haskasu)**

# CgEventsLib The engine of CgEvents. CgEvents is a great way to build your own games with with a CG.built-in editor. ## Live Demo <a href="cg://source/test/physics.events" class="mat-raised-button mat-primary">Open Demo Events Sheet</a> ## Concept The engine takes a *.events file to run. The .events file is an encoded json which contains a config field and a events field. ```json { config: { stage: { width: "number", height: "number", resolutionPolicy: "showAll" | "exactFit" | "fixedWidth" | "fixedHeight" | "origin", alignHorizontal: "left" | "center" | "right", alignVertical: "top" | "middle" | "bottom" } }, events: [ { id: "string", triggers: [], checks: [], actions: [] }, ... ] } ``` Yon can edit the json with CG.built-in editor to control all your game events. ## How Events Work Each event contains a TRIGGER, some CHECKS, and some ACTION. The event flow works like this: 1. The TRIGGER of the event is triggered by the engine (keyboard pressed, event over, or maybe the hero collides with an enemy) 1. Once the trigger is triggered, the engine then goes check the CHECKS. 1. If all CHECKS pass, the engine executes all the ACTIONS in the event. ## Getting Started ```typescript let manager = new CgEventManager(); manager.importFromSource('CG.YourProject/yourGame.events') .then(() => manager.preload()) .then(() => manager.start()) ; ``` ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Authors * **[Haskasu](/profile/Haskasu)**

# 迷宮生成器 用Python以及深度優先演算法製造一個迷宮，然後讓小老鼠在裏面找出口。 ## 我的計畫 1. 迷宮生成演算法 2. 老鼠找出口

# 畫雪花的工具 ## 我的計畫 1. 先製作畫圖工具 2. 然後將圖鏡射六個角度 3. 最後將單數的鏡射反轉 ## 連結 YT影片: https://youtu.be/az2nrbW5pqc

# CG.Base Provide tool kits that helps you fast build an app on Code.Gamelet. Key features include: 1. initialize [pixi.js](#pixi.init) environment 1. load and access resources that are imported via Code.Gamelet IDE 1. manage update functions that are called every frame 1. provide debug utilities ## Getting Started Follow the steps below to fast start an app with [PixiJS](#pixi.init). We will implement a box2d environment to demo the usage of Base. <a name="pixi.init"></a> ## Start with Pixi.js<a name="pixi.init"></a> ```typescript class App { constructor() { // initialize pixi CG.Base.pixi.initialize(600, 400); CG.Base.pixi.physicsDebugDraw.setActive(true); // make a physics wall var wall = CG.Base.physics.createPhysicsObject('wall', {type: 'static'}); wall.addEdge(new CG.Base.geom.Point(10, 300), new CG.Base.geom.Point(500, 330)); // make a dynamic physics ball var ball = CG.Base.physics.createPhysicsObject('ball', {type: 'dynamic'}); ball.addCircle(0, 0, 10, {friction: 0.1, density: 0.1, restitution: 0.3}); ball.setPosition(100, 10); } } new App(); ``` @see [Demo](/edit/Base_Start_with_PIXI) ## Load and play with Resources To load resources that are imported from IDE: ```typescript // tell resources what resources to load (using the alias names) CG.Base.resourceManager.addAppResource('Game1.button'); CG.Base.resourceManager.addAppResource('Game1.music'); // start loading CG.Base.resourceManager.load(() => { // all loaded callback // create button with the image "Game1.button" alias name var button = new CG.Base.pixis.interactive.Button(CG.Base.resourceManager.createPixiSprite('Game1.button', 20, 20)); // set the position of the button button.displayObject.position.set(100, 100); // add the button to pixi.root, so pixi can render the button CG.Base.pixi.root.addChild(button.displayObject); // add a click event listener button.on(CG.Base.pixis.interactive.Button.EVENT.CLICK, () => { // when the button is clicked, play sound with "Game1.music" alias name CG.Base.resourceManager.playSound('Game1.music') }); }); ``` @see [Demo](/edit/Base_Load_Resources) ## Manage update functions Take advantage of CG.Base.addUpdateFunction to make a function called every frame ```typescript class App { constructor() { CG.Base.pixi.initialize(600, 400); CG.Base.addUpdateFunction(this, this.update); } // this function will be called every frame(called 60 times per second normally) private update(deltaTime:number):void { // do something } } new App(); ``` @see [Demo](/edit/Base_Update_and_Delay_Func) You can call a function in the future by CG.Base.addDelayFunction ```typescript class App { constructor() { CG.Base.pixi.initialize(600, 400); // call this.delayAction in 1000 milliseconds(= one second) CG.Base.addDelayFunction(this, this.delayAction, 1000); } private delayAction():void { // do something } } new App(); ``` @see [Demo](/edit/Base_Update_and_Delay_Func) ## Interact with Keyboard Use CG.Base.keyboard package to interact with keyboard events. ```typescript export class App { constructor() { // make the window focused, so we can receive keyboard events. window.focus(); // initialize pixi CG.Base.pixi.initialize(600, 400); // tell resourceManager to load the resource 'Game1.button' CG.Base.resourceManager.addAppResource('Game1.button'); // load resources, and wait callback when resources are all loaded CG.Base.resourceManager.load(() => { // add keyboard event listener, when a key is pressed CG.Base.keyboardManager.on(CG.Base.keyboard.KeyboardManagerEvent.PRESSED, key => { // if the pressed key is space, we call this.createSprite() if (key == CG.Base.keyboard.Key.SPACE) { this.createSprite(); } }); }); } private createSprite(): void { // create a sprite with the image 'Game1.button' var sprite: PIXI.Sprite = CG.Base.resourceManager.createPixiSprite('Game1.button'); // set the position of the sprite sprite.position.set(CG.Base.utils.IntUtil.randomBetween(100, 500), CG.Base.utils.IntUtil.randomBetween(100, 300)); // add the sprite to pixi.root, so it can be rendered CG.Base.pixi.root.addChild(sprite); } } new App(); ``` @see [Demo](/edit/Base_PIXI_Keyboard) ## Debugging The best debug tool on browser is the [developer tools](https://developer.chrome.com/devtools) in Chrome (F12). To find your source code in developer tools, first open developer tools(F12), click "Sources" tab, and search the Network tree as below: > top => {projectCode} => gameFrame => code.gamelet.com => gassets => file/{projectCode}/src for example, if the projectCode is 'Game1', source code is located at > top => Game1 => gameFrame => code.gamelet.com => gassets => file/Game1/src  ### Add Watch In addition to browser's debugging tools, CG.Base provides other useful tools. CG.Base.addWatch() adds objects or objects' properties to Watch panel in CG IDE. ```typescript export class App { constructor() { // initialize pixi CG.Base.pixi.initialize(600, 400); // tell resourceManager to load the resource 'Game1.button' CG.Base.resourceManager.addAppResource('Game1.button'); CG.Base.resourceManager.load(() => { // add the created sprite into Watch panel, the alias name in Watch panel is 'sprite' CG.Base.addWatch('sprite', this.createSprite()); }); // add this(App)'s 'time' property into Watch panel. The alias name for this property is 'now' CG.Base.addWatch('now', this, 'time'); } private createSprite(): PIXI.Sprite { // create a sprite with the image 'Game1.button' var sprite: PIXI.Sprite = CG.Base.resourceManager.createPixiSprite('Game1.button'); // set the position of the sprite sprite.position.set(CG.Base.utils.IntUtil.randomBetween(100, 500), CG.Base.utils.IntUtil.randomBetween(100, 300)); // add the sprite to pixi.root, so it can be rendered CG.Base.pixi.root.addChild(sprite); return sprite; } // a getter function, that works like a property of App object. get time(): number { return CG.Base.time(); } } new App(); ``` @see [Demo](/edit/Base_Add_Watch) ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Links and Resources This library is running with the libraries below. * [Pixi.js](http://www.pixijs.com/) - 2D rendering engine * [API reference](http://pixijs.download/release/docs/index.html) * [Examples](http://pixijs.io/examples/) * [Pixi keyboard](https://github.com/Nazariglez/pixi-keyboard) - Keyboard utility * [Pixi sound](https://github.com/pixijs/pixi-sound) - Sound utility * [Pixi filters](https://github.com/pixijs/pixi-filters) - Filters Collections * [Pixi GafPlayer](https://github.com/mathieuanthoine/PixiGAFPlayer) - [GafMedia](https://gafmedia.com/) Player * [Liquidfun](http://google.github.io/liquidfun/) - Box2D based physics engine * [MD5](http://www.myersdaily.org/joseph/javascript/md5-text.html) - MD5 implementation by Joseph Myers ## Authors **Haska Su** - *Initial work*

# Playground 專門用來快速在畫板上塗塗抹抹的專案。 ## Getting Started 摳出來成為你自己的新專案後，可用以下幾種工具(在/libs裏的工具)快速畫圖。 ```typescript // 畫一個紅色的圓 draw.circle(0, 0, 100, {fillColor: 0xFF0000}); // 打開一個確認視窗 dialog.confirm('Are you sure?', 'Click confirm if you think it is ok.') .then((confirm) => { if(confirm) { console.log('User confirmed.'); } }); // 收集資料畫長條圖 let dataCollector = new DataCollector(); dataCollector.addData('一月', 1, 2); dataCollector.addData('二月', 2, 10); dataCollector.addData('三月', 3, 5); dataCollector.addData('四月', 4, 6); dataCollector.showChart('第一季', 'bar'); ```

# 無差別五子棋 五子棋是中國古老的棋藝之一，發展至今天有日本的連珠(Renju)、歐洲的五目(Gomoku)、以及Gamelet的無差別五子棋。棋友們不打不相識，歡迎大家進來互相切磋棋藝吧。 這款使用Code.Gamelet.com平台製作的多人連線遊戲除了Online對弈模式可在線上找棋友單挑之外，還有單人模式，讓玩家可以輕鬆讓站長設計的人工智慧培養你的實力。 單人模式可以選擇下「篤姬五子棋」、「德川家定將軍五子棋」、還有可愛的「女僕五子棋」，每個人都有不同的個性，若是新手請選擇女僕五子棋喔！ ## 規則 遊戲中和玩家對弈的部分有六種規則可以選擇： 1. **無差別**：沒有職業棋賽的各種繁複規則，只要玩家能湊出五個子連成一線就算贏。後手贏得比賽所得到的分數是先手贏得到分數的1.5倍喔。 1. **三手交換**：黑白雙方輪流落子，盤上第三手棋後，後手白子有權選擇交換，或不交換直接下第四手。若後手白子於第三手選擇交換，則棋盤上黑白子交換，並由黑子繼續下子。長連不禁也不判勝。 1. **黑子禁手**：先手黑子不能下禁手棋，包括雙活三、雙四和長連。 1. **山口規則**：(Yamaguchi Rule) 2009世界盃開始採用的職業規則。 1. **索索夫規則**: (Soosõrv Rule) 2017世界盃開始採用的職業規則。 1. **六子棋**: 雙方輪流各下兩子，連成六子（或以上）者獲勝。 開局的玩家一定是持白子後手，遊戲結束後，如果兩人選擇再玩一次，那麼先手和後手就會交換順序，讓贏的人變後手！ 自認是高手的朋友們，快進來開局等人來挑戰吧！ ## 作者 **[小哈片刻](/profile/[email protected])**

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

# PyScript Integrate Py-Script into your CG project. Run py-script on web. - [PyScript home](https://pyscript.net/) - [Document](https://docs.pyscript.net/latest/) - [Github](https://github.com/pyscript/pyscript) ## Getting Started Run a py-script ```typescript CG.PyScript.runScriptFromSource('CG.PyScript/test.py'); ``` Open a py-editor ```typescript CG.PyScript.addRepl('User Script Editor'); ``` Customize the looks ```typescript CG.PyScript.setPyscriptStyles({ fontSize: '16px', padding: '10px, fontFamily: 'Courier', }) ``` ## Build-in utils Some CG related utils are embeded and ready to be used. To get the URL of a source file: ```py url = getAppSourceUrl('CG/PyScript/README.md') print(url) ``` To hide or show python console ```py # hide js.hidePythonConsole() # show js.showPythonConsole() ``` To open dialogs: ```py result = await js.dialog.prompt("What's your name?") print("Your name is " + result) result = await js.dialog.confirm("Are you a girl?") print("You are a " + ("Girl" if result else "Boy")) result = await js.dialog.select(["One", "Two"], "Choose one") print("You got a " + (result if result else "What?")) ``` To draw shapes: ```py # draw a line js.draw.line(10, 400, 300, 100, color=0xFF0000, thickness=5) # draw a rectangle js.draw.rect(100, 300, 100, 50, fillColor=0xFFFF00) # draw a circle js.draw.circle(400, 300, 30, fillColor=0x00FF00, lineThickness=5, lineColor=0x00FFFF) # draw a text js.draw.text(500, 400, "Logo", fontSize=16, color=0xFF9900) # draw lines js.draw.lines([{"x":10,"y":10},{"x":200,"y":400},{"x":100,"y":500}], thickness=2) # draw a polygon js.draw.polygon([{"x":10,"y":10},{"x":200,"y":400},{"x":100,"y":500}]) ```

# Circle Packing 作畫 今天來製作一個使用 Circle Packing 將照片重繪的高端軟體。 ## 我的計畫 1. 寫CirclePacking演算法 2. 讀取圖片像素資料 3. 根據圓圈位置決定填色 4. 製作介面 * 可重新選取圖片作畫 * 可下載畫好的作品 ## 連結 * APP: https://circlepacking.gamelet.online * 影片: https://youtu.be/I54C9wDlhVw

# ImageToAscii An app that turns a picture to an ascii painting. # Links Video: Online Coding, https://youtu.be/Wqlp2AeRwAM App: Image to Ascii, https://imagetoascii.gamelet.online

# 簡易計算機 今天示範如何製作一個簡易版的計算機 ## 我的計畫 1. 首先用React + MaterialUI製作計算機的介面 2. 然後分析使用者輸入的數學式，並計算出結果 1. 先只考慮+和- 2. 然後加入x和/ 3. 最後再處理括號() ## 連結 * App: https://calculator.gamelet.online * 影片: https://youtu.be/TsX0hk76yRM

# Playground 今天要來製作一個隨機樹木產生器。 ## 我的計畫 1. 先前主幹開始往上畫 2. 主幹長到最後會生出一段新的支幹，支幹會變細一點 3. 生出支幹時有機率會分裂成兩個分支 4. 最後支幹無法再更細時，會開花 # 成品 * App: https://tree-generator-2d.gamelet.online * 影片: https://youtu.be/bqw0ES_wc38

# Haska Drawing World A drawing app that converts the drawing into a physics world. # My Plan 1. Make drawing tools 2. Convert lines to physics platforms 3. Create a ball that jumps on the platforms 4. Create a car that runs on the platforms 5. Spacebar to make the car jump 6. Gameover when the car falls below the screen # Links Video: Online Coding, https://youtu.be/a6SsuD4MKJA App: Image to Ascii, https://haska-drawing-world.gamelet.online

# PyStoryMaker A story maker written in python and runs on web. ## Project Plan 1. Build a python runtime env on CG. 2. Write a example paragraph 3. Transform the example to a story template 4. Randomly choose parameters to fill in template 5. Read the parameter options from json 6. Build a complex story in Chinese ## ASMR coding video https://youtu.be/0B0h4HlG6tA

# ReactMaterial React components that implement Google's Material Design. Integrated with Code.Gamelet. ## Getting Started ### Usage Open a pre-defined dialog: ```typescript // Alert Dialog CG.ReactMaterial.dialogs.openAlertDialog({ title: 'Alert!!!', message: 'Something is happening.', onClose: () => { console.log('dialog is closed'); }; // Confirm Dialog CG.ReactMaterial.dialogs.openConfirmDialog({ title: 'Delete File', message: 'Are you sure?', onConfirm: () => { console.log('user confirmed'); }; // Input Dialog CG.ReactMaterial.dialogs.openInputDialog({ title: 'What\'s your name?', message: 'Your name will be shown in the highscore board.', onConfirm: (value: string) => { console.log('name = ' + value); }; ``` To write your own React element: ```typescript CG.React.renderElement( <div> <materialUI.TextField id="name" label="Name" margin="normal" /> <materialUI.Button variant="contained" color="primary" size="small" className={classes.button}> Send <materialUI.Icon>send</materialUI.Icon> </materialUI.Button> </div> ); ``` ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Authors **[Haskasu](/profile/Haskasu)**

# React React is a JavaScript library for building interactive interfaces with HTML tags. This project integrate React.js into CG environment, and offer utilities to fast build React apps. ## Getting Started You need to import the latest build of this project before using it. ```typescript Give examples ``` ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Authors * **[Haskasu](/profile/Haskasu)** ## Links and resources * [React Homepage](https://reactjs.org/) * [[email protected]](https://github.com/facebook/react) * [從零開始學 ReactJS](https://www.gitbook.com/book/kdchang/react101/details)

# GrabCutter 利用GrabCut演算法幫助使用者將照片去背，並能載入多張圖片P圖。

# iT邦2022鐵人賽示範專案 30個遊戲程式的錦囊妙計系列 [Trick 13: 網頁遊戲的基礎建設－更新循環系統](https://ithelp.ithome.com.tw/articles/10289158)

# iT邦2022鐵人賽示範專案 30個遊戲程式的錦囊妙計系列 [Trick 29: 電競天梯的積分怎麼算才不會糊掉](https://ithelp.ithome.com.tw/articles/10292675)