pony-escape

Author: mathieucaroff

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 3
+
+[*.{md,yml,yaml}]
+indent_size = 2

.gitignore

@@ -0,0 +1,19 @@
+# Folders
+/*/
+tmp/
+
+!/src/
+!/asset/
+!/cypress/
+
+# Files
+/.*
+*.log
+*.js
+
+!/.editorconfig
+!/.env
+!/.gitignore
+!/.now.json
+!/.prettier*
+!/.yarnrc

.now.json

@@ -0,0 +1,3 @@
+{
+   "name": "ponyescape",
+}

.prettierrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+   arrowParens: 'always',
+   bracketSpacing: true,
+   endOfLine: 'lf',
+   printWidth: 80,
+   quoteProps: 'consistent',
+   semi: false,
+   singleQuote: true,
+   tabWidth: 3,
+   trailingComma: 'all',
+   useTabs: false,
+   overrides: [
+      {
+         files: '*.md',
+         options: {
+            tabWidth: 2,
+         },
+      },
+   ],
+}

.yarnrc

@@ -0,0 +1 @@
+network-timeout 300000

CHANGELOG.md

@@ -0,0 +1,8 @@
+# Pony Run Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]

LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2020, Mathieu CAROFF
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

README.md

@@ -0,0 +1,15 @@
+# Pony Escape
+
+A simple like HTML5-canvas TypeScript side-scroller game.
+
+It's a clone of the ["T-Rex Chrome Dino Game"](https://chromedino.com/)
+that can be played in Chrome when internet isn't available or at the address
+chrome://dino/.
+
+## Contributing
+
+Use `./tsc.cmd` to run typescript type checking.
+
+Use `./parcel.cmd` to run the development server.
+
+The project is built by now.sh using `npm run build` (on a linux machine).

asset/monster/README.md

@@ -0,0 +1,5 @@
+# Monster
+
+## Sources
+
+- `monster-smooze-A.png` from https://www.deviantart.com/masemj/art/Here-Comes-The-Smooze-534130550 (`id: 900184` on derpibooru)

asset/monster/monster-smooze-A.png

@@ -0,0 +1,5 @@
+# Monster
+
+## Sources
+
+- `rarity-930-1.png` from https://derpibooru.org/images/930, first frame, clipping path improved

asset/player/README.md

@@ -0,0 +1,2 @@
+#!/bin/bash
+yarn run ava --watch

asset/player/rarity-930-1.png

@@ -0,0 +1,31 @@
+{
+   "name": "pony-run",
+   "description": "A simple dino-like HTML5-canvas TS game with ponies",
+   "repository": "[email protected]:ponydevs/ponyrun.git",
+   "license": "ISC",
+   "scripts": {
+      "build": "parcel build src/page.html -d public -o index.html"
+   },
+   "ava": {
+      "extensions": [
+         "ts"
+      ],
+      "require": [
+         "ts-node/register"
+      ],
+      "files": [
+         "src/**/*.test.ts"
+      ]
+   },
+   "devDependencies": {
+      "@types/node": "^13.9.1",
+      "ava": "^3.8.1",
+      "prettier": "^1.19.1",
+      "ts-node": "^8.6.2",
+      "typescript": "^3.8.3"
+   },
+   "dependencies": {
+      "parcel": "^1.12.4",
+      "rxjs": "^7.0.0-beta.0"
+   }
+}

ava.cmd

@@ -0,0 +1,2 @@
+#!/bin/bash
+yarn parcel ./src/page.html

package.json

@@ -0,0 +1,59 @@
+import {
+   PonyDisplay,
+   PonyInput,
+   Square,
+   Player,
+   Pair,
+} from '../type/ponyEscape'
+import { generateLabyrinth } from './labyrinth/generateLabyrinth'
+import { w } from '../util/window'
+
+export interface LoadProp {
+   display: PonyDisplay
+   input: PonyInput
+   size: Pair
+}
+
+export let core = (prop: LoadProp) => {
+   let { display, input, size } = prop
+
+   let grid = generateLabyrinth(size)
+
+   w.grid = grid
+
+   let player: Player = {
+      x: 1,
+      y: Math.floor(size.y / 2) * 2 - 1,
+   }
+
+   let score = 0
+
+   input.left.subscribe(() => {
+      player.x -= 2
+      render()
+   })
+   input.right.subscribe(() => {
+      player.x += 2
+      render()
+   })
+   input.up.subscribe(() => {
+      player.y -= 2
+      render()
+   })
+   input.down.subscribe(() => {
+      player.y += 2
+      render()
+   })
+
+   let render = () => {
+      display.render({
+         grid,
+         monster: undefined,
+         player,
+         score,
+         screen: 'play',
+      })
+   }
+
+   render()
+}

parcel.cmd

@@ -0,0 +1,36 @@
+import { createArray2d } from '../../util/array2d'
+import { Square, Pair, WallSquare } from '../../type/ponyEscape'
+
+export let generateLabyrinth = (size: Pair) => {
+   let twiceSize = { x: size.x * 2, y: size.y * 2 }
+
+   let grid = createArray2d<Square>(twiceSize, ({ y, x }) => {
+      let isBorder = () => (x + y) % 2 === 1
+      let isGround = () => x % 2 === 1 && y % 2 === 1
+
+      if (x >= size.x * 2 - 1 || y >= size.y * 2 - 1) {
+         return {
+            type: 'exterior',
+         }
+      }
+
+      if (isGround()) {
+         return {
+            type: 'ground',
+         }
+      }
+
+      let filled: WallSquare['filled'] = 'filled'
+      if (isBorder() && Math.random() > 0.4) {
+         filled = 'empty'
+      }
+
+      return {
+         type: 'wall',
+         filled,
+         visibility: 'visible',
+      }
+   })
+
+   return grid
+}

src/core/core.ts

@@ -0,0 +1,18 @@
+// @ts-ignore
+import monsterUrl from '../../asset/monster/monster-smooze-A.png'
+// @ts-ignore
+import playerUrl from '../../asset/player/rarity-930-1.png'
+import { promiseObjectAll } from '../util/promise'
+import { loadImage } from './loadImage'
+
+export interface Asset {
+   monster: HTMLImageElement
+   player: HTMLImageElement
+}
+
+export let getAsset = async (): Promise<Asset> => {
+   return promiseObjectAll<Asset>({
+      monster: loadImage(monsterUrl),
+      player: loadImage(playerUrl),
+   })
+}

src/core/labyrinth/generateLabyrinth.ts

@@ -0,0 +1,4 @@
+export let white = [255, 255, 255]
+export let coal = [40, 40, 40]
+export let darkCoal = [20, 20, 20]
+export let black = [0, 0, 0]

src/display/asset.ts

@@ -0,0 +1,118 @@
+import { PonyDisplay, PonyRenderProp, Pair, WHPair } from '../type/ponyEscape'
+import { Asset } from './asset'
+import { getContext2d } from '../util/getContext2d'
+import { white, darkCoal, black, coal } from './color'
+import { scaleToFitIn } from '../util/scaleToFitIn'
+
+export interface PonyDisplayProp {
+   asset: Asset
+   canvas: HTMLCanvasElement
+}
+
+export interface ScorePosition {
+   x: number
+   y: number
+   scale: number
+}
+
+export let createDisplay = (prop: PonyDisplayProp): PonyDisplay => {
+   let { asset, canvas } = prop
+   let ctx = getContext2d(canvas)
+
+   let getGridSize = (grid: PonyRenderProp['grid']): Pair => {
+      if (!(grid.length > 0)) throw new Error()
+
+      return {
+         x: grid[0].length,
+         y: grid.length,
+      }
+   }
+
+   let getSquareSize = (gridSize: Pair): Pair => {
+      return {
+         x: 800 / gridSize.x,
+         y: 600 / gridSize.y,
+      }
+   }
+
+   let renderGrid = async (grid: PonyRenderProp['grid'], gridSize: Pair) => {
+      let image = new ImageData(gridSize.x, gridSize.y)
+      let { data } = image
+
+      grid.forEach((line, ky) => {
+         let kky = 4 * line.length * ky
+         line.forEach((square, kx) => {
+            let kk = kky + 4 * kx
+            let color: number[]
+            if (square.type === 'exterior') {
+               color = black
+            } else if (square.type === 'ground') {
+               color = coal
+            } else if (square.visibility === 'invisible') {
+               color = darkCoal
+            } else if (square.filled === 'filled') {
+               color = white
+            } else {
+               color = coal
+            }
+            ;[data[kk + 0], data[kk + 1], data[kk + 2]] = color
+            data[kk + 3] = 255
+         })
+      })
+
+      let bitmap = await createImageBitmap(image)
+      ctx.imageSmoothingEnabled = false
+      ctx.drawImage(bitmap, 0, 0, 800, 600)
+   }
+
+   let renderCharacter = (
+      character: Pair,
+      squareSize: Pair,
+      which: 'player' | 'monster',
+   ) => {
+      let image = asset[which]
+
+      let fit = scaleToFitIn(image, squareSize)
+
+      let dx = character.x * squareSize.x
+      let dy = character.y * squareSize.y
+      ctx.strokeStyle = 'red'
+      ctx.strokeRect(dx, dy, squareSize.x, squareSize.y)
+      ctx.drawImage(image, dx + fit.x, dy + fit.y, fit.w, fit.h)
+   }
+
+   let renderScore = (score: number, scorePos: ScorePosition) => {
+      let { x, y, scale } = scorePos
+
+      ctx.font = `${32 * scale}px Impact`
+      ctx.fillStyle = 'white'
+      ctx.strokeStyle = 'black'
+
+      let text = `${score}`
+      ctx.fillText(text, x, y)
+      ctx.strokeText(text, x, y)
+   }
+
+   let render = async (prop: PonyRenderProp): Promise<undefined> => {
+      if (prop.screen === 'score') {
+         renderScore(prop.score, { x: 350, y: 250, scale: 2 })
+         return
+      }
+
+      let gridSize = getGridSize(prop.grid)
+      let squareSize = getSquareSize(gridSize)
+
+      await renderGrid(prop.grid, gridSize)
+      renderCharacter(prop.player, squareSize, 'player')
+      if (prop.monster !== undefined) {
+         renderCharacter(prop.monster, squareSize, 'monster')
+      }
+      renderScore(prop.score, { x: 50, y: 540, scale: 1 })
+   }
+
+   let me: PonyDisplay = {
+      render,
+   }
+
+   return me
+}