diff --git a/index.html b/index.html index 954df1f..626aabf 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,30 @@ right: 0; color: white; } + #help { + position: absolute; + top: 0; + left: 0; + height: calc(100% - 2em); + padding: 1em; + background: transparent; + color: white; + column-count: 2; + column-gap: 40px; + column-rule: 1px dotted gray; + backdrop-filter: blur(5px) sepia(.8) brightness(0.4); + } + header { + column-span: all; + } + h2 { + font-size: 1rem; + font-weight: bold; + } + p { + line-height: 2; + margin: 0; + } diff --git a/src/App.vue b/src/App.vue index ecebb67..0961637 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,7 +9,7 @@ import usePlayer from './util/usePlayer' const { updateTime, timeOfDay, clock } = useTime() const { player, direction, dx, dy } = usePlayer() -const { inputX, inputY, running, digging, paused } = useInput() +const { inputX, inputY, running, digging, paused, help } = useInput() const level = createLevel(STAGE_WIDTH + 2, STAGE_HEIGHT + 2) let animationFrame = 0 @@ -125,5 +125,38 @@ onMounted(() => {
{{ player.vx }}, {{ player.vy }}
+ +
+
+

How to play

+
+ +
+

Walk around: WASD or Arrow Keys

+

A / Left: walk left

+

D / Right: walk right

+

W / Up: jump or climb up

+

S / Down: climb down

+

Hold Shift, to run.

+
+
+

Dig Blocks: Left Mouse Key

+

To dig a block, click on it with your left mouse key. Only adjacent blocks can be digged.

+

(not implemented, yet)

+
+
+

Build / Set Blocks: Right Mouse Key

+

To set a block, right click an empty position close to you.

+

(not implemented, yet)

+
+
+

Inventory: I

+

Press I to open the inventory and use the mouse to select an item. This item can then be put into the world with a right click.

+

(not implemented, yet)

+
+

 

+

 

+

 

+
diff --git a/src/util/useInput.ts b/src/util/useInput.ts index 7545c5a..61ca1d3 100644 --- a/src/util/useInput.ts +++ b/src/util/useInput.ts @@ -6,6 +6,9 @@ export default function useInput() { let running = ref(false) let digging = ref(false) let paused = ref(false) + let help = ref(false) + + let wasPaused = false function handleKeyDown(event: KeyboardEvent) { switch (event.key) { @@ -25,11 +28,17 @@ export default function useInput() { inputX.value = -1 break case 'p': - paused.value = !paused.value + if (!help.value) paused.value = !paused.value + if (wasPaused && !paused.value) wasPaused = false break case ' ': digging.value = true break + case '?': + if (paused.value && !help.value) wasPaused = true + help.value = !help.value + paused.value = help.value || wasPaused + break } } @@ -67,5 +76,6 @@ export default function useInput() { running, digging, paused, + help, } }