# TestTube TestTubes is a simple library for the CG platform. ## Usage ### Basic Usage First, import the required functions from the library: ```typescript const {test, expect, runTests} = CG.TestTube; ``` ### Writing Tests You can write tests using the `test` function. Each test is defined with a description, a test function, and optional tags for categorization: ```typescript test("adds numbers correctly", () => { expect(1 + 2).toBe(3); }, ["math"]); ``` ### Running Tests To run all registered tests, use the `runTests` function: ```typescript runTests(); ``` You can also run tests with a specific tag: ```typescript runTests("math"); ``` ### Assertions TestTubes provides a simple `expect` function to make assertions, including: - `toBe(expected)`: Asserts that the actual value is strictly equal to the expected value. - `toEqual(expected)`: Asserts that the actual value is deeply equal to the expected value. - `toBeTruthy()`: Asserts that the actual value is truthy. - `toBeFalsy()`: Asserts that the actual value is falsy. - `toThrow(expectedMessage?)`: Asserts that the actual function throws an error, optionally matching the expected message. ### Example Here's a very simple example demonstrating the usage of TestTubes for a simple math library and a DOM manipulation library: ```typescript const {test, expect, runTests} = CG.TestTube; // Math library export const MathLib = { add(a: number, b: number): number { return a + b; }, subtract(a: number, b: number): number { // Typing error return a + b; }, multiply(a: number, b: number): number { return a * b; }, divide(a: number, b: number): number { if (b === 0) throw new Error("Cannot divide by zero"); return a / b; } }; // DOM manipulation library export const DomLib = { createElement(tag: string, content: string): HTMLElement { const element = document.createElement(tag); element.textContent = content; return element; }, appendToBody(element: HTMLElement): void { document.body.appendChild(element); } }; // Math library tests test("adds numbers correctly", () => { expect(MathLib.add(1, 2)).toBe(3); }, ["math"]); test("subtracts numbers correctly", () => { expect(MathLib.subtract(2, 1)).toBe(1); }, ["math"]); test("multiplies numbers correctly", () => { expect(MathLib.multiply(2, 2)).toBe(4); }, ["math"]); test("divides numbers correctly", () => { expect(MathLib.divide(4, 2)).toBe(2); }, ["math", "division"]); test("throws error when dividing by zero", () => { expect(() => MathLib.divide(4, 0)).toThrow("Cannot divide by zero"); }, ["math", "division"]); // DOM manipulation tests test("creates an element with correct tag and content", () => { const element = DomLib.createElement("div", "Hello, World!"); expect(element.tagName.toLowerCase()).toBe("div"); expect(element.textContent).toBe("Hello, World!"); }, ["dom"]); test("appends an element to the body", () => { const element = DomLib.createElement("div", "Appended Element"); DomLib.appendToBody(element); expect(document.body.contains(element)).toBeTruthy(); }, ["dom"]); // Run all tests runTests(); // Optionally run only tests with a specific tag // runTests("math"); ``` The output looks like this: ```text Running 7 tests... ✅ adds numbers correctly ❌ subtracts numbers correctly Expected 3 to be 1 ✅ multiplies numbers correctly ✅ divides numbers correctly ✅ throws error when dividing by zero ✅ creates an element with correct tag and content ✅ appends an element to the body ``` ## API ### `test(description: string, fn: TestFunction, tags: string[] = [])` Registers a new test. - `description`: A description of the test. - `fn`: The test function to execute. - `tags`: Optional tags to categorize the test. ### `runTests(tag?: string)` Runs all registered tests, or only tests with the specified tag. - `tag`: Optional tag to filter tests to run. ### `expect(actual: unknown)` Creates an expectation for a value. Returns an object with assertion methods. ## Authors **[FOBShippingPoint](/profile/FOBShippingPoint)**

# ColorNames A simple CG module providing hex, hex string, and RGB values for [CSS color names](https://www.w3.org/TR/css-color-3/#svg-color). ## Usage #### Hex Number ```typescript const aliceBlueHex = CG.ColorNames.HexNumColor.aliceblue; console.log(aliceBlueHex); // 0xf0f8ff ``` #### Hex String ```typescript const aliceBlueHexStr = CG.ColorNames.HexStrColor.aliceblue; console.log(aliceBlueHexStr); // "#f0f8ff" ``` #### RGB Array ```typescript const aliceBlueRgb = CG.ColorNames.RgbColor.aliceblue; console.log(aliceBlueRgb); // [240, 248, 255] ``` ### Examples #### Using Hex Number with PIXI.js ```typescript sprite.tint = CG.ColorNames.HexNumColor.aliceblue; ``` #### Using Hex String for HTML Element ```typescript document.body.style.backgroundColor = CG.ColorNames.HexStrColor.aliceblue; ``` ## Authors **[FOBShippingPoint](/profile/FOBShippingPoint)**

# MineSweeper 踩地雷 アイラブプログラミング、皆さん一緒にプログラミングませんか？ ## How to play Use your mouse. ## BGM and Sounds BGM: https://www.youtube.com/watch?v=ImPKA_Sy9M4 咕咕一補 咕咕一補 咕咕咕咕咕 關閉音樂的方法：按左上角的框框兩下，待其變為藍色時按兩次Tab鍵，最後再按下空白鍵即可暫停音樂。 Sounds: 踩到地雷的聲音：https://taira-komori.jpn.org/index.html > 無料効果音 > 兵器・爆発 > 小爆発１small_explosion1 插/拔旗子的聲音：CG站內 > drag_piece.mp3 ## Authors **[FOBShippingPoint](/profile/FOBShippingPoint)** 老話一句：科號不要 ## 作者近照 沒有

# Pixi範例集 ## 目的 發掘對pixi的興趣，讓對javascript有一些基礎的朋友看得懂（雖然這邊用的是typescript），當然裡面包含的是「為CG平台而寫的」程式，有所侷限。 ## 使用說明 - 執行後請點左邊選擇範例，範例檔案位於demos資料夾中。 - 一些範例右方有使用者介面可以調整數值 ## Pixijs API Documentation - [https://pixijs.download/dev/docs/index.html](https://pixijs.download/dev/docs/index.html) - 關於pixi的詳細文件，可以了解member、method等的意義與作用 ## 科皓不要 ## Authors **[FOBShippingPoint](/profile/FOBShippingPoint)**

# LearningWonderlandFOBsp # 操作方式 點選左方按鈕觀看範例 - 舞台：舞台範例，滑鼠右下方會顯示xy座標 - 捲軸背景：演示使用ScrollingBg製作出的捲軸背景 - 攝影機：演示GameCamera的基本用法及設定焦點物件 - 補間動畫：Tween範例，各種不同Easing的呈現 - AUTOWRAP：AutoWrapTextBox試驗，為了我方便而寫的Class - 鍵盤；演示各種鍵盤事件的差異 - 物理：演示如何新增物理物件及連結可視物件 - 音效：演示如何播放音效和改變音量，來源：https://audionautix.com/ (ClapAlong) - 科皓不要: 科皓不要啊 # 第一次接觸程式？ [請移駕](cg://source/CG.LearningWonderlandFOBsp/CG_NiceToMeetYou.md) # 科皓不要 # 舞台初始化 製作遊戲首先應該要製作一個遊戲舞台，而在CG(Code Gamelet)中，我們使用以下方法初始化一個長600像素(px)、寬400像素的舞台： ```typescript CG.Base.pixi.initialize(600, 400) ``` 接著按下<b>試玩遊戲</b>，你會得到一片黑，但是舞台的確已經出現了，讓我們改變舞台顏色使其可見： ```typescript // 指定一個Sprite(精靈)給bg(backgorund) let bg = new PIXI.Sprite(PIXI.Texture.WHITE) // 設定bg的長寬為舞台的長寬 bg.width = CG.Base.pixi.stageWidth bg.height = CG.Base.pixi.stageHeight // 將設定好的bg加進我們的舞台(root) CG.Base.pixi.root.addChild(bg) ``` 資源載入 ```typescript // e.g. LearningWonderlandFOBsp.cover CG.Base.resourceManager.addAppResource('專案名稱.資源1') .addAppResource('專案名稱.資源2') .addAppResource('專案名稱.資源3') .addAppResource('專案名稱.資源4') // function會在資源載入完成後呼叫 CG.Base.resourceManager.load(function(){ console.log('資源載入完成') }) ``` 音效播放 ```typescript // 假設「已經」載入ProjectName.sound這個音效 // sound是一種PIXI.sound.Sound let sound = CG.Base.resourceManager.getSound('ProjectName.sound') // 開始播放 sound.play() // 停止播放 sound.stop() // 繼續播放 sound.resume() // 暫停 sound.pause() // 循環播放 sound.play({loop: true}) ``` ## 物理 快速入門： ```typescript // 用CG.Base.physics創造一個「動態」物理物件，並用phyOb接住 let phyOb: CG.Base.physics2d.PhysicsObject = CG.Base.physics.createPhysicsObject('physicsObjectName', { type: 'dynamic' }) // 給phyOb圓形 phyOb.addCircle(0, 0, 25, { restitution: 1 }) // 啟用除錯繪圖，使物理物件可見 CG.Base.pixi.physcisDebugDraw.setActive(true) ``` 類別介紹： - Physics - PhysicsObject - PhysicsDebugDraw ### Physics <!--  <br> ▲把滑鼠移到initialize上會看到的密文 --> ## Authors **[FOBShippingPoint](/profile/FOBShippingPoint)**

# KHBYgui The KHBYgui(Ke Hao Bu Yao Graphical User Interface) library is a gui library use only Pixi. 「科皓不要GUI」是用Pixi製作的，排版、內距、文字標籤、按鈕、輸入欄、列表、捲動軸都有。 ## Getting Started see testbed. 請看 testbed 的範例。 ```typescript // make a simple button. let btn = new KButton('Button') btn.setPadding(Padding.make(10)) btn.setSize(100, 50) btn.setRoundedMask(true) CG.Base.pixi.root.addChild(btn) ``` ## Authors **[FOBShippingPoint](/profile/FOBShippingPoint)** ## Special Thanks 科皓不要啦

# DemoFOBsp ## [01]輸出文字 - console：控制台 - log：日誌 - console.log：在控制台輸出 ```typescript // [01]在控制台上印出文字 // 記得用引號將文字括起來 console.log('Hello World!') console.log('哈囉你好嗎衷心感謝') console.log('測試攝氏') ``` ## [02]變數 - let <變數名稱>：宣告變數 - <變數> = <值>：變數賦予一個值 ```typescript // 註解：不會被執行，電腦看的時候會忽略 // 宣告一個變數叫做name let name = "陳其邁" console.log("你好啊！" + name) name = `韓國瑜` console.log(`過去的高雄市長${name}萬萬歲`) console.log(`過去的高雄市長` + name + `萬萬歲`) ``` ## Authors **[FOBShippingPoint](/profile/FOBShippingPoint)**

# FindDifferenceFOBsp CAP灑 ## Getting Started 點不一樣的地方 ## 音樂音效 小森平 https://taira-komori.jpn.org/game01.html ゲーム・ボタン音＞正解・キャンセル＞crrect_answer3, blip01使用 OtoLogic https://otologic.jp/free/bgm/pop-music-piano01.html BGM＞ポップス・ピアノ＞閉鎖恋愛 ## Authors **[FOBShippingPoint](/profile/FOBShippingPoint)** 欲知後事如何，科號不要

# HockeyFOBsp ネオン ジェネシス　エアホッケーである ## Getting Started Put your hands together if you want to clap As we take you through this monkey rap! Huh! ## 單人遊戲方式 用左手和右手對打，這可是高難度喔 ## 雙人遊戲方式 用各自的手指移動各自的那個（那個到底叫什麼），用那個打球，先得三分者獲勝 ## 作者 **[FOBShippingPoint](/profile/FOBShippingPoint)** 老話一句 科號不要 ## 作者閒話 打字打到手好痛，現在手放到鍵盤手就會自動打出this了==

# MAGISystemFOBsp MAGI SYSTEM COOL YEAH! ## 操作 按提訴就可以讓MAGI幫你決定 ver.1.0我就不要求什麼了 ## 圖片 我畫的呦 ## 音效 小森平 超推https://taira-komori.jpn.org/game01.html 從2009年就開始的網站，依舊活著 ## 作者 **[FOBShippingPoint](/profile/FOBShippingPoint)** for科號 P.S.科號不要