sfja/karlkoder-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update docs

Browse Source
This commit is contained in:
Theis Pieter Hollebeek 2025-10-14 14:42:36 +02:00
parent 3c81e53e72
commit 6cf996b904
3 changed files with 172 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/build.ts
View File

@ -40,8 +40,8 @@ function injectIntoTemplate(
'<meta name="color-scheme" content="dark">', '<meta name="color-scheme" content="dark">',
'<link rel="shortcut icon" href="/favicon.ico">', '<link rel="shortcut icon" href="/favicon.ico">',
'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/gruvbox-dark-hard.css">', '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/gruvbox-dark-hard.css">',
'<link rel="stylesheet" href="/-/style.css">', '<link rel="stylesheet" href="/docs/-/style.css">',
'<script src="/-/headers.js" defer></script>', '<script src="/docs/-/headers.js" defer></script>',
], ],
"</head>", "</head>",
"<body>", "<body>",

162
docs/src/gamelib/index.md
View File

@ -4,6 +4,26 @@
## Models ## Models
### `MouseButton`
A dictionary of mouse buttons, accessible with `lib.MouseButton`.
Members:
- `lib.MouseButton.Left`
- `lib.MouseButton.Right`
- `lib.MouseButton.Middle`
Example:
```ts
function mouseLeftClicked() {
/* do something */
}
lib.onClick(mouseLeftClicked, lib.MouseButton.Left);
```
### `Color` ### `Color`
A type of string. A type of string.
@ -39,6 +59,42 @@ Example:
/* todo: include a little html tool that listens to key events when focused and outputs what key was /* todo: include a little html tool that listens to key events when focused and outputs what key was
pressed */ pressed */
### `MouseMoveEventFunc`
A function with 4 parameters (`mouseX`, `mouseY`, `mouseDeltaX`, `mouseDeltaY`) that is called
whenever the mouse moves.
Works both as a named and anonymous function.
Example:
See [`lib.onMouseMove`](#Lib-onMouseMove)
### `MouseButtonEventFunc`
A function with no parameters that is called whenever the appropriate
[`MouseButton`](#Models-MouseButton) is pressed / released.
Works both as a named and anonymous function.
Example:
```ts
let playerX = 0;
// anonymous function
lib.onClick(function () {
playerX -= 20;
}, lib.MouseButton.Right);
// named function
function leftMouseWasPressed() {
playerX += 20;
}
// note the lack of () after leftMouseWasPressed - we are not calling the function, we are referring to it as a variable
lib.onClick(leftMouseWasPressed, lib.MouseButton.Left);
```
### `KeyEventFunc` ### `KeyEventFunc`
A function with no parameters that is called whenever the appropriate [`Key`](#Models-Key) is A function with no parameters that is called whenever the appropriate [`Key`](#Models-Key) is
@ -254,3 +310,109 @@ lib.startGameLoop(function () {
drawCloud(50, 35); drawCloud(50, 35);
}); });
``` ```
### `onMouseMove`
`lib.onMouseMove(handlerFunction: MouseMoveEventFunc) -> void`
Calls `handlerFunction` whenever mouse is moved.
See also: [`Models.MouseMoveEventFunc`](#Models-MouseMoveEventFunc)
Example:
```ts
const player = {
x: lib.width / 2,
y: lib.height / 2,
direction: { x: 0, y: 0 },
};
function mouseMoved(mouseX, mouseY) {
const diffX = mouseX - player.x;
const diffY = mouseY - player.y;
const length = Math.sqrt(diffX ** 2 + diffY ** 2);
player.direction = {
x: (diffX / length),
y: -(diffY / length),
};
}
lib.onMouseMove(mouseMoved);
```
```ts
const player = {
x: lib.width / 2,
y: lib.height / 2,
};
function mouseMoved(_mouseX, _mouseY, deltaX, deltaY) {
player.x += deltaX;
player.y += deltaY;
}
lib.onMouseMove(mouseMoved);
```
### `isClicking`
`lib.isClicking(button: MouseButton) -> bool`
Returns whether or not `key` is currently pressed.
See also: [`Models.MouseButton`](#Models-MouseButton)
Example:
```ts
let playerX = 0;
lib.startGameLoop(function (deltaT) {
if (lib.isPressed("a")) {
playerX -= 20 * deltaT;
}
if (lib.isPressed("d")) {
playerX -= 20 * deltaT;
}
});
```
### `onClick`
`lib.onClick(handlerFunction: MouseButtonEventFunc, button: MouseButton = lib.MouseButton.Left) -> void`
Calls `handlerFunction` whenever `button` is pressed.
`button` defaults to `lib.MouseButton.Left` if not provided.
See also: [`Models.MouseButton`](#Models-MouseButton),
[`Models.MouseButtonEventFunc`](#Models-MouseButtonEventFunc)
Example:
```ts
let isJumping = false;
lib.onClick(function () {
isJumping = true;
}, lib.MouseButton.Left);
/* here we take advantage of MouseButton.Left
being the default argument, so we don't have
to specify it. */
lib.onClickRelease(function () {
isJumping = false;
});
```
### `onClickRelease`
`lib.onClickRelease(handlerFunction: MouseButtonEventFunc, button: MouseButton = lib.MouseButton.Left) -> void`
The opposite of [`lib.onClick`](#Lib-onClick)
### `MouseButton`
`lib.MouseButton.Left, lib.MouseButton.Right, lib.MouseButton.Middle`
A method of accessing [`Model.MouseButton`](#Model-MouseButton)

14
src/gamelib.js
View File

@ -9,9 +9,11 @@ export class Gamelib {
mouseX = null; mouseX = null;
mouseY = null; mouseY = null;
MouseButtonLeft = 0; MouseButton = {
MouseButtonRight = 1; Left: 0,
MouseButtonMiddle = 2; Right: 1,
Middle: 2,
};
constructor(console, codeStopper, assetProvider, canvasElement) { constructor(console, codeStopper, assetProvider, canvasElement) {
this.console = console; this.console = console;
@ -114,15 +116,15 @@ export class Gamelib {
this.mouseMoveHandler = handlerFunction; this.mouseMoveHandler = handlerFunction;
} }
isClicking(button = this.MouseButtonLeft) { isClicking(button = this.MouseButton.Left) {
return this.mouseButtonsPressed.has(button); return this.mouseButtonsPressed.has(button);
} }
onClick(handlerFunction, button = this.MouseButtonLeft) { onClick(handlerFunction, button = this.MouseButton.Left) {
this.mouseDownHandlers.set(button, handlerFunction); this.mouseDownHandlers.set(button, handlerFunction);
} }
onClickRelease(handlerFunction, button = this.MouseButtonLeft) { onClickRelease(handlerFunction, button = this.MouseButton.Left) {
this.mouseUpHandlers.set(button, handlerFunction); this.mouseUpHandlers.set(button, handlerFunction);
} }