feat: spike

Author: aster-void

public/assets/spike.png

@@ -24,6 +24,7 @@ export enum Block {
   switchingBlockOFF = "switching-block-off",
   switchingBlockON = "switching-block-on",
   switchPressed = "switch-pressed",
+  spike = "spike",
   goal = "goal",
 }
 export enum Facing {
@@ -45,5 +46,11 @@ export const BlockDefinitionMap = new Map<string, Block | null>([
   ["s", Block.switch],
   ["S", Block.switchBase],
   ["w", Block.switchingBlockOFF],
+  ["^", Block.spike],
   ["g", Block.goal],
 ]);
+
+export const ReverseBlockMap = new Map<Block | null, string>();
+BlockDefinitionMap.forEach((value, key) => {
+  ReverseBlockMap.set(value, key);
+});

src/constants.ts

@@ -2,12 +2,13 @@ import { type Container, Sprite, type Ticker } from "pixi.js";
 import { type Writable, get } from "svelte/store";
 import { Block, BlockDefinitionMap } from "./constants.ts";
 import * as consts from "./constants.ts";
-import { assert, warnIf } from "./lib.ts";
+import { assert } from "./lib.ts";
 import type { Context, GameConfig, GameState, MovableObject } from "./public-types.ts";
 import {
   fallableTexture,
   goalTexture,
   rockTexture,
+  spikeTexture,
   switchBaseTexture,
   switchPressedTexture,
   switchTexture,
@@ -27,49 +28,20 @@ type VirtualSpriteCell = {
 type VirtualSOM = (VirtualSpriteCell | null)[][];
 export type GridCell =
   | {
-      block: Block.block;
+      // blocks that don't have switchId
+      block: null | Block.block | Block.switchBase | Block.goal | Block.spike;
       objectId?: unknown;
     }
   | {
-      block: Block.movable;
-      objectId: string;
-      switchId: string | undefined;
-    }
-  | {
-      block: Block.fallable;
+      // movable blocks (can be placed on top of switch)
+      block: Block.movable | Block.fallable;
       objectId: string;
       switchId: string | undefined; // switchの上に置かれている場合
     }
   | {
-      block: null; // air
-      objectId?: unknown;
-    }
-  | {
-      block: Block.switch;
-      switchId?: string;
-      objectId?: unknown;
-    }
-  | {
-      block: Block.switchBase;
-      objectId?: unknown;
-    }
-  | {
-      block: Block.switchingBlockOFF;
-      switchId?: string;
-      objectId?: unknown;
-    }
-  | {
-      block: Block.switchingBlockON;
-      switchId?: string;
-      objectId?: unknown;
-    }
-  | {
-      block: Block.switchPressed;
-      switchId?: string;
-      objectId?: unknown;
-    }
-  | {
-      block: Block.goal;
+      // switches / triggerable blocks
+      block: Block.switch | Block.switchingBlockOFF | Block.switchingBlockON | Block.switchPressed;
+      switchId?: string; // optional でいいの?
       objectId?: unknown;
     };
 
@@ -102,19 +74,12 @@ export class Grid {
           case null: // air
             vspriteRow.push(null);
             break;
-          case Block.movable: {
-            const sprite = createSprite(cellSize, dblock, x, y, this.marginY);
-            stage.addChild(sprite);
-            vspriteRow.push({ sprite, block: dblock, dy: 0, vy: 0 });
-            break;
-          }
-          case Block.fallable: {
-            const sprite = createSprite(cellSize, dblock, x, y, this.marginY);
-            stage.addChild(sprite);
-            vspriteRow.push({ sprite, block: dblock, dy: 0, vy: 0 });
-            break;
-          }
-          case Block.block: {
+          case Block.block:
+          case Block.movable:
+          case Block.spike:
+          case Block.fallable:
+          case Block.goal:
+          case Block.switchBase: {
             const sprite = createSprite(cellSize, dblock, x, y, this.marginY);
             stage.addChild(sprite);
             vspriteRow.push({ sprite, block: dblock, dy: 0, vy: 0 });
@@ -139,12 +104,6 @@ export class Grid {
             });
             break;
           }
-          case Block.switchBase: {
-            const sprite = createSprite(cellSize, dblock, x, y, this.marginY);
-            stage.addChild(sprite);
-            vspriteRow.push({ sprite, block: dblock, dy: 0, vy: 0 });
-            break;
-          }
           case Block.switchingBlockOFF: {
             const switchId = (
               get(cx.state).cells[y][x] as {
@@ -167,15 +126,9 @@ export class Grid {
             });
             break;
           }
-          case Block.goal: {
-            const sprite = createSprite(cellSize, dblock, x, y, this.marginY);
-            stage.addChild(sprite);
-            vspriteRow.push({ sprite, block: dblock, dy: 0, vy: 0 });
-            break;
-          }
           case Block.switchingBlockON:
           case Block.switchPressed:
-            throw new Error(`createCellsFromStageDefinition: block is not supported: ${dblock}`);
+            throw new Error(`[Grid.constructor]: block is not supported: ${dblock}`);
           default:
             dblock satisfies never;
         }
@@ -204,6 +157,7 @@ export class Grid {
       }
     }
   }
+
   /**
     it uses object equality internally, therefore
     - object should be equal if they are the same.
@@ -631,6 +585,7 @@ export function createCellsFromStageDefinition(stageDefinition: StageDefinition)
         case Block.block:
         case null:
         case Block.switchBase:
+        case Block.spike:
         case Block.goal: {
           const cell: GridCell = {
             block,
@@ -753,6 +708,11 @@ function createSprite(
       updateSprite(sprite, blockSize, x, y, marginY, 0);
       return sprite;
     }
+    case Block.spike: {
+      const sprite = new Sprite(spikeTexture);
+      updateSprite(sprite, blockSize, x, y, marginY, 0);
+      return sprite;
+    }
     default:
       block satisfies never;
       throw new Error("unreachable");
@@ -765,6 +725,7 @@ function updateSprite(sprite: Sprite, blockSize: number, x: number, y: number, m
   sprite.y = y * blockSize + marginY + dy;
 }
 
+//ToDo: 現在の仕様では、Escメニュー表示状態でも動き続ける。
 export function createTutorialSprite(cx: { _stage_container: Container }, order: number) {
   let sprite = new Sprite(tutorialImg1);
   switch (order) {
@@ -781,43 +742,11 @@ export function createTutorialSprite(cx: { _stage_container: Container }, order:
   sprite.y = 100;
   cx._stage_container.addChild(sprite);
 }
-//ToDo: 現在の仕様では、Escメニュー表示状態でも動き続ける。
 
 export function printCells(cells: GridCell[][], context?: string) {
   console.log(
     `${context ? context : "Grid"}:
-     ${cells
-       .map((row) =>
-         row
-           .map((cell) => {
-             switch (cell.block) {
-               case null:
-                 return ".";
-               case Block.block:
-                 return "b";
-               case Block.movable:
-                 return cell.switchId !== undefined ? "M" : "m";
-               case Block.fallable:
-                 return cell.switchId !== undefined ? "F" : "f";
-               case Block.switch:
-                 return "s";
-               case Block.switchBase:
-                 return "S";
-               case Block.switchingBlockOFF:
-                 return "w";
-               case Block.switchingBlockON:
-                 return "w";
-               case Block.switchPressed:
-                 return "s";
-               case Block.goal:
-                 return "g";
-               default:
-                 cell satisfies never;
-             }
-           })
-           .join(""),
-       )
-       .join("\n")}`,
+     ${cells.map((row) => row.map((cell) => consts.ReverseBlockMap.get(cell.block)).join("")).join("\n")}`,
   );
 }
 

src/grid.ts

@@ -128,6 +128,9 @@ export function handleInput(cx: Context, event: KeyboardEvent, eventIsKeyDown: b
 export function tick(cx: Context, ticker: Ticker) {
   const { blockSize, gridX, gridY, marginY } = get(cx.config);
   const player = cx.dynamic.player;
+  const grid = cx.grid;
+
+  // movement
   const accel = player.onGround ? consts.playerAccelOnGround : consts.playerAccelInAir;
   const decel = player.onGround ? consts.playerDecelOnGround : consts.playerDecelInAir;
   let playerIntent = 0; // 0 -> no intent, 1 -> wants to go right, -1 -> wants to go left
@@ -176,6 +179,7 @@ export function tick(cx: Context, ticker: Ticker) {
     player.jumpingBegin = null;
   }
 
+  // collision
   const isBlock = (x: number, y: number) =>
     cx.grid.getBlock(cx, Math.floor(x), Math.floor(y)) !== null &&
     cx.grid.getBlock(cx, Math.floor(x), Math.floor(y)) !== Block.switch &&
@@ -238,6 +242,7 @@ export function tick(cx: Context, ticker: Ticker) {
     gameover(cx);
   }
 
+  // switch activation
   if (isSwitchBase(nextX, nextBottomY)) {
     const switchBlock = get(cx.state).cells[Math.floor(nextBottomY - 1)][Math.floor(nextX)];
     if (switchBlock.block === Block.switch) {
@@ -296,20 +301,21 @@ export function tick(cx: Context, ticker: Ticker) {
     }
   }
 
+  // goal
   if (isGoal(nextX, nextTopY) && player.onGround) {
     cx.state.update((prev) => {
       prev.goaled = true;
       return prev;
     });
   }
 
-  // if (get(cx.state).gameover) {
-  //   cx.state.update((prev) => {
-  //     prev.gameover = true;
-  //     return prev;
-  //   });
-  // };
+  // gameover
+  const coords = getCoords(cx);
+  if (player.onGround && cx.grid.getBlock(cx, coords.x, coords.y + 1) === Block.spike) {
+    gameover(cx);
+  }
 
+  // movement? again?
   // 当たり判定結果を反映する
   player.x += player.vx * ticker.deltaTime;
   player.y += player.vy * ticker.deltaTime;

src/player.ts

@@ -1,15 +1,20 @@
 import { Assets } from "pixi.js";
-
 // assets
+
+// entities
 export const bunnyTexture = await Assets.load("/assets/bunny.png");
+
+// blocks
 export const rockTexture = await Assets.load("/assets/block.png");
 export const fallableTexture = await Assets.load("/assets/woodenbox.png");
 export const switchTexture = await Assets.load("/assets/switch.png");
 export const switchBaseTexture = await Assets.load("/assets/switch-base.png");
 export const switchPressedTexture = await Assets.load("/assets/switch-pressed.png");
 export const goalTexture = await Assets.load("/assets/goal.png");
-export const highlightTexture = await Assets.load("/assets/highlight.svg");
+export const spikeTexture = await Assets.load("/assets/spike.png");
 
+// UI
+export const highlightTexture = await Assets.load("/assets/highlight.svg");
 export const highlightHoldTexture = await Assets.load("/assets/highlight-hold.webp");
 export const tutorialImg1 = await Assets.load("/assets/tutorial1.png");
 export const tutorialImg2 = await Assets.load("/assets/tutorial2.png");

src/resources.ts

@@ -181,7 +181,7 @@ export const stages = new Map<string, StageDefinition>([
         "bb..............w.....m..",
         "bb..............b....mm..",
         "bb.w....m..s...bb...mmm..",
-        "bbbbbbbbbbbSbbbbbbbbbbbbb",
+        "bbbbbbbbbbbSbbbbb^bbbbbbb",
       ],
       initialPlayerX: 5,
       initialPlayerY: 8,