This commit is contained in:
Theis Pieter Hollebeek 2025-10-13 11:26:58 +02:00
parent c95d13264d
commit e86aca5de0
4 changed files with 36 additions and 23 deletions

View File

@ -6,7 +6,10 @@
A type of string. A type of string.
Represents HTML colors. This includes [named colors](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color) such as `blue`, `red`, `blanchedalmond`, `lavenderblush`, and rgb/hex when used with proper format. You can use `lib.rgb(r, g, b)` to generate a properly formatted rgb color code. Represents HTML colors. This includes
[named colors](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color) such as `blue`, `red`,
`blanchedalmond`, `lavenderblush`, and rgb/hex when used with proper format. You can use
`lib.rgb(r, g, b)` to generate a properly formatted rgb color code.
Example: Example:
@ -19,7 +22,8 @@ lib.drawRect(100, 0, 100, 100, lib.rgb(192, 127, 172));
A type of string. A type of string.
Represents JavaScript's `KeyboardEvent.key` ([link](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)) property. Represents JavaScript's `KeyboardEvent.key`
([link](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)) property.
Example: Example:
@ -30,7 +34,8 @@ Example:
" ": Spacebar was pressed. " ": Spacebar was pressed.
``` ```
/* todo: include a little html tool that listens to key events when focused and outputs what key was pressed */ /* todo: include a little html tool that listens to key events when focused and outputs what key was
pressed */
### `KeyEventFunc` ### `KeyEventFunc`
@ -41,11 +46,10 @@ Works both as a named and anonymous function.
Example: Example:
```ts ```ts
let playerX = 0; let playerX = 0;
// anonymous function // anonymous function
lib.onPress("a", function() { lib.onPress("a", function () {
playerX -= 20; playerX -= 20;
}); });
@ -53,16 +57,21 @@ lib.onPress("a", function() {
function dWasPressed() { function dWasPressed() {
playerX += 20; playerX += 20;
} }
lib.onPress("a", dWasPressed); /* note the lack of () after dWasPressed - we are not calling the function, we are referring to it as a variable */ lib.onPress(
"a",
dWasPressed,
); /* note the lack of () after dWasPressed - we are not calling the function, we are referring to it as a variable */
``` ```
### `LoopFunc` ### `LoopFunc`
A function with a single parameters (`deltaT`) that is called whenever a game tick should run - usually about 1/60 times a second. A function with a single parameters (`deltaT`) that is called whenever a game tick should run -
usually about 1/60 times a second.
The `deltaT` parameter describes the time difference between the last tick and now, in seconds. The `deltaT` parameter describes the time difference between the last tick and now, in seconds.
The name used for `deltaT` can be anything, it functions as any other function parameter. I.e. `loopFunction(timeSinceLastCall)`, `loopFunction(fooBar)`, etc. The name used for `deltaT` can be anything, it functions as any other function parameter. I.e.
`loopFunction(timeSinceLastCall)`, `loopFunction(fooBar)`, etc.
For example: For example:
@ -77,11 +86,10 @@ Works both as a named and anonymous function.
Example: Example:
```ts ```ts
let playerX = 0; let playerX = 0;
// anonymous function // anonymous function
lib.startGameLoop(function(deltaT) { lib.startGameLoop(function (deltaT) {
playerX += 20 * deltaT; playerX += 20 * deltaT;
}); });
@ -89,7 +97,9 @@ lib.startGameLoop(function(deltaT) {
function loopFunction(deltaTime) { function loopFunction(deltaTime) {
playerX += 20 * deltaTime; playerX += 20 * deltaTime;
} }
lib.startGameFunction(loopFunction); /* note the lack of () after loopFunction - we are not calling the function, we are using it as a variable */ lib.startGameFunction(
loopFunction,
); /* note the lack of () after loopFunction - we are not calling the function, we are using it as a variable */
``` ```
## Functions ## Functions
@ -113,7 +123,7 @@ It is a thursday.
### `lib.startGameLoop(loopFunction: LoopFunc) -> void` ### `lib.startGameLoop(loopFunction: LoopFunc) -> void`
Registers a gameloop function, that is called on every tick. Registers a gameloop function, that is called on every tick.
See also: `Models.LoopFunc` See also: `Models.LoopFunc`
@ -127,7 +137,7 @@ Example:
```ts ```ts
let playerX = 0; let playerX = 0;
lib.startGameLoop(function(deltaT) { lib.startGameLoop(function (deltaT) {
if (lib.isPressed("a")) { if (lib.isPressed("a")) {
playerX -= 20 * deltaT; playerX -= 20 * deltaT;
} }
@ -147,11 +157,11 @@ Example:
```ts ```ts
let isJumping = false; let isJumping = false;
lib.onPress(" ", function() { lib.onPress(" ", function () {
isJumping = true; isJumping = true;
}); });
lib.onRelease(" ", function() { lib.onRelease(" ", function () {
isJumping = false; isJumping = false;
}); });
``` ```
@ -171,7 +181,7 @@ Example:
```ts ```ts
lib.drawRect(100, 0, 100, 100, lib.rgb(192, 127, 172)); lib.drawRect(100, 0, 100, 100, lib.rgb(192, 127, 172));
``` ```
### `lib.clear(color: Color) -> void` ### `lib.clear(color: Color) -> void`
Paints the entire screen `color`. Paints the entire screen `color`.
@ -215,7 +225,6 @@ See also: `Models.Color`
Example: Example:
```ts ```ts
function drawCloud(x, y) { function drawCloud(x, y) {
lib.drawRect(x, y, 20, 10, "white"); lib.drawRect(x, y, 20, 10, "white");
} }

View File

@ -61,7 +61,12 @@
<div class="column" style="flex: 3"> <div class="column" style="flex: 3">
<div id="project-header"> <div id="project-header">
<div id="project-header-left"> <div id="project-header-left">
<input id="project-name" type="text" placeholder="Project name" aria-label="Project name"> <input
id="project-name"
type="text"
placeholder="Project name"
aria-label="Project name"
>
<button id="save-button"> <button id="save-button">
💾 Save 💾 Save

View File

@ -19,7 +19,7 @@ const playgroundConsole = new PlaygroundConsole(
document.querySelector("#console-code"), document.querySelector("#console-code"),
); );
window.addEventListener('DOMContentLoaded', () => { window.addEventListener("DOMContentLoaded", () => {
playgroundConsole.log("Karlkode 1.0"); playgroundConsole.log("Karlkode 1.0");
}); });
@ -47,7 +47,6 @@ globalThis.karlkoder = {
}, },
}; };
const editor = ace.edit("editor"); const editor = ace.edit("editor");
editor.setTheme("ace/theme/gruvbox"); editor.setTheme("ace/theme/gruvbox");
editor.session.setMode("ace/mode/javascript"); editor.session.setMode("ace/mode/javascript");
@ -124,12 +123,12 @@ runButton.onclick = () => {
exportButton.onclick = async () => { exportButton.onclick = async () => {
const html = await htmlExporter.export(projectName.value, editor.getValue()); const html = await htmlExporter.export(projectName.value, editor.getValue());
downloadFile(slugify(projectName.value) || 'project', html, ".html", "text/html"); downloadFile(slugify(projectName.value) || "project", html, ".html", "text/html");
}; };
function saveKarlKoder() { function saveKarlKoder() {
downloadFile( downloadFile(
slugify(projectName.value) || 'project', slugify(projectName.value) || "project",
Vermiparous.en( Vermiparous.en(
editor.getValue(), editor.getValue(),
spriteEditor.sprites, spriteEditor.sprites,

View File

@ -23,7 +23,7 @@ export function downloadFile(name, content, extension, mime) {
export function slugify(text) { export function slugify(text) {
return text return text
.split(/\W+/) .split(/\W+/)
.map(word => word.toLowerCase()) .map((word) => word.toLowerCase())
.join("-"); .join("-");
} }