Back to shtanton's homepage
summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/all.c21
-rw-r--r--src/index.html.in105
-rw-r--r--src/tick.c2
-rw-r--r--src/types.c4
4 files changed, 114 insertions, 18 deletions
diff --git a/src/all.c b/src/all.c
index b118a16..cf52eca 100644
--- a/src/all.c
+++ b/src/all.c
@@ -390,8 +390,10 @@ static void restart_level(Game* game) {
xmemcpy(&game->state.placeableCells, &levels[level].placeableCells, sizeof(game->state.placeableCells));
}
-static void update(Game *game, uint64_t now, Arena a) {
+static int update(Game *game, uint64_t now, Arena a) {
const int offset_width = game->ui.width - GRID_OFFSET_X;
+
+ int tutorial = 0;
switch (game->input) {
int x, y;
@@ -451,6 +453,7 @@ static void update(Game *game, uint64_t now, Arena a) {
restart_level(game);
break;
case BUTTON_BACK:
+ tutorial = 1;
break;
case BUTTON_PLAY:
game->state.playing = !game->state.playing;
@@ -495,6 +498,8 @@ static void update(Game *game, uint64_t now, Arena a) {
tick(game, a);
}
+
+ return tutorial;
}
#if SDL
@@ -677,10 +682,12 @@ void game_init(void) {
perm.end = heap + MEM_SIZE;
game = new(&perm, 1, Game);
- xmemcpy(&game->state.grid, &levels[0].grid, sizeof(game->state.grid));
- game->state.goalx = levels[0].goalx;
- game->state.goaly = levels[0].goaly;
- game->state.playing = 0;
+ game->state.currentLevel = 0;
+ restart_level(game);
+
+ for (int i = 0; i < N_BUTTONS; i++) {
+ game->state.buttonStates[i] = BUTTON_STATE_IDLE;
+ }
}
__attribute((export_name("game_render")))
@@ -694,11 +701,11 @@ DrawList *game_render(int width, int height, int mousex, int mousey) {
}
__attribute((export_name("game_update")))
-void game_update(int input, int mousex, int mousey, int now) {
+int game_update(int input, int mousex, int mousey, int now) {
game->input = input;
game->ui.mousex = mousex;
game->ui.mousey = mousey;
- update(game, now, perm);
+ return update(game, now, perm);
}
#endif
diff --git a/src/index.html.in b/src/index.html.in
index 46d39e4..5414f09 100644
--- a/src/index.html.in
+++ b/src/index.html.in
@@ -11,9 +11,9 @@ html, body {
overflow: hidden;
text-align: center;
width: 100%;
+ color: white;
}
h1 {
- color: white;
margin: 0;
}
button {
@@ -22,9 +22,84 @@ button {
margin: 0.3em;
width: 25%;
}
+
+canvas {
+ margin: auto;
+}
</style>
-<canvas></canvas>
+<div id="tutorial" style="overflow-y: scroll; height: 90vh">
+ <h1>Depths of the Mind</h1>
+
+ <p>
+ The mind is an intricate thing, with many tiny components working together
+ in perfect harmony... Until something came in and messed everything up!
+ </p>
+
+ <p>
+ If you want to set all the pieces of the mind right, you'll need to know how
+ it works!
+ </p>
+
+ <img src=
+#include "../build/tutorial_black_white.png.b64"
+ >
+
+ <p>
+ The structure of the brain consists of black blocks filling a white void.
+ </p>
+
+ <img src=
+#include "../build/tutorial_red_yellow.png.b64"
+ >
+
+ <p>
+ Black blocks will turn red when clicked (if you have red in your inventory on the left).
+ While the brain is running, black blocks next to red blocks will turn red!
+ Red blocks will eventually tire to yellow, and then back to black. They don't stay red very long!
+ This is what allows the brain to send signals along a series of black blocks.
+ Yellow blocks can be placed with a right click on a black block (if you have one in your inventory)
+ </p>
+
+ <img src=
+#include "../build/tutorial_direction_red.png.b64"
+ >
+
+ <p>
+ Sometimes, only one side of a block turns red.
+ When this happens, it will try to move in that direction (and leave a yellow behind it)
+ but if it cannot it will turn clockwise and try again.
+ </p>
+
+ <span>
+ <img src=
+#include "../build/tutorial_blue_1.png.b64"
+ >
+ <img src=
+#include "../build/tutorial_blue_2.png.b64"
+ >
+
+ <p>
+ Blue blocks need to be moved around to keep things running smoothly!
+ When a blue block is touched by a single red block, it will start rolling
+ away from it.
+ Each level has a goal in faint red which needs at least one blue block to be delivered to it.
+ Some levels will also have faint blue areas that create new blue blocks for you!
+ </p>
+
+ <img src=
+#include "../build/tutorial_blue_clone.png.b64"
+ >
+
+ <p>
+ Finally, if a blue block touches a red block <em>while in motion</em> it will be cloned!
+ One will be left behind and the other will continue.
+ </p>
+
+ <button id="play-button">Play!</button>
+</div>
+
+<canvas style="display: none;"></canvas>
<script>
// Mirror these in src/all.c
@@ -73,6 +148,7 @@ async function main() {
let exports = wasm.exports;
let html = document.querySelector("html");
let canvas = document.querySelector("canvas");
+ const tutorial = document.querySelector("#tutorial");
let ctx = canvas.getContext("2d");
let memory = exports.memory;
@@ -140,11 +216,18 @@ async function main() {
window.addEventListener("resize", onresize);
onresize();
+ function doUpdate(input) {
+ if (exports.game_update(input, mousex, mousey, now()) !== 0) {
+ canvas.style.display = "none";
+ tutorial.style.display = "block";
+ }
+ }
+
canvas.addEventListener("mousemove", function(e) {
const rect = e.target.getBoundingClientRect();
mousex = e.clientX - rect.left;
mousey = e.clientY - rect.top;
- exports.game_update(INPUT_MOVE, mousex, mousey, now());
+ doUpdate(INPUT_MOVE);
});
canvas.addEventListener("mousedown", function(e) {
@@ -152,15 +235,21 @@ async function main() {
mousex = e.clientX - rect.left;
mousey = e.clientY - rect.top;
if (e.button == 0) {
- exports.game_update(INPUT_CLICK, mousex, mousey, now());
+ doUpdate(INPUT_CLICK);
} else if (e.button == 2) {
e.preventDefault();
- exports.game_update(INPUT_RCLICK, mousex, mousey, now());
+ doUpdate(INPUT_RCLICK);
}
+ });
+
+ document.getElementById("play-button").addEventListener("click", function (e) {
if (!musicPlaying) {
musicPlaying = true;
audio.play();
}
+
+ canvas.style.display = "block";
+ tutorial.style.display = "none";
});
canvas.addEventListener("contextmenu", function (e) {
@@ -169,16 +258,16 @@ async function main() {
document.addEventListener("keydown", function (e) {
if (e.key === " ") {
- exports.game_update(INPUT_PAUSE_PLAY, mousex, mousey, now());
+ doUpdate(INPUT_PAUSE_PLAY);
} else if (e.key == "r") {
- exports.game_update(INPUT_RESTART, mousex, mousey, now());
+ doUpdate(INPUT_RESTART);
}
});
function animate() {
// TODO: stop requesting frames when state is static
requestAnimationFrame(animate);
- exports.game_update(INPUT_NONE, mousex, mousey, now());
+ doUpdate(INPUT_NONE);
render();
}
requestAnimationFrame(animate);
diff --git a/src/tick.c b/src/tick.c
index 21cf578..338017b 100644
--- a/src/tick.c
+++ b/src/tick.c
@@ -178,7 +178,7 @@ static void tick(Game *game, Arena a) {
(y > 0 && lastState->grid[x + (y - 1) * GRIDWIDTH] == BLUE_DOWN) ||
(y < GRIDHEIGHT - 1 && lastState->grid[x + (y + 1) * GRIDWIDTH] == BLUE_UP)
) {
- game->state.grid[x + y * GRIDWIDTH] = RED;
+ game->state.grid[x + y * GRIDWIDTH] = BLACK; // used to be RED
} else {
game->state.grid[x + y * GRIDWIDTH] = BLACK;
}
diff --git a/src/types.c b/src/types.c
index bf6dcf4..c40d9c3 100644
--- a/src/types.c
+++ b/src/types.c
@@ -70,11 +70,11 @@ enum {
};
static const char colorImages[N_COLORS] = {
- [RED] = IMAGE_NELSON,
+ /*[RED] = IMAGE_NELSON,
[RED_LEFT] = IMAGE_NELSON_LEFT,
[RED_UP] = IMAGE_NELSON_UP,
[RED_RIGHT] = IMAGE_NELSON_RIGHT,
- [RED_DOWN] = IMAGE_NELSON_DOWN,
+ [RED_DOWN] = IMAGE_NELSON_DOWN,*/
};
enum {
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-22 03:20:20 +0000