fmt
This commit is contained in:
parent
c95d13264d
commit
e86aca5de0
@ -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
|
||||||
@ -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;
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
@ -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");
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
@ -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,
|
||||||
|
@ -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("-");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user