From 681ba1b632d4f6260dcd538fd4b6f99137a55247 Mon Sep 17 00:00:00 2001 From: Sheldan <5037282+Sheldan@users.noreply.github.com> Date: Mon, 8 Sep 2025 22:42:47 +0200 Subject: [PATCH] survivors: renaming drawDot to fillDot adding area for touch movement instead of buttons simulating the keyboard --- absurd-survivors/src/Enemies.ts | 8 +-- absurd-survivors/src/Player.ts | 4 +- absurd-survivors/src/drop.ts | 8 +-- absurd-survivors/src/main.ts | 34 +++++++++---- absurd-survivors/src/projectile.ts | 8 +-- absurd-survivors/src/ui.ts | 82 ++++++++++++++++++++---------- absurd-survivors/src/utils.ts | 9 +++- absurd-survivors/src/weapons.ts | 8 +-- 8 files changed, 106 insertions(+), 55 deletions(-) diff --git a/absurd-survivors/src/Enemies.ts b/absurd-survivors/src/Enemies.ts index dc74946..1e6a0b4 100644 --- a/absurd-survivors/src/Enemies.ts +++ b/absurd-survivors/src/Enemies.ts @@ -1,5 +1,5 @@ import type {Acting, ChanceEntry, Drawable, Healthy, Placeable, Shooting} from "./interfaces.ts"; -import {drawDot, moveInDirectionOf} from "./utils.ts"; +import {fillDot, moveInDirectionOf} from "./utils.ts"; import {Vector} from "./base.ts"; import {World} from "./World.ts"; import type {Projectile} from "./projectile.ts"; @@ -77,7 +77,7 @@ export class BasicEnemy extends Enemy { protected impactInterval: number = 60; draw(ctx: CanvasRenderingContext2D) { - drawDot(this._position, this.getSize(), this.color, ctx) + fillDot(this._position, this.getSize(), this.color, ctx) } @@ -192,7 +192,7 @@ export class HealthEnemy extends Enemy { protected color: string; draw(ctx: CanvasRenderingContext2D) { - drawDot(this._position, this.size, this.color, ctx) + fillDot(this._position, this.size, this.color, ctx) } @@ -245,7 +245,7 @@ export class ContainerEnemy extends Enemy { protected color: string; draw(ctx: CanvasRenderingContext2D) { - drawDot(this._position, this.size, this.color, ctx) + fillDot(this._position, this.size, this.color, ctx) } move() { diff --git a/absurd-survivors/src/Player.ts b/absurd-survivors/src/Player.ts index 6ee8a52..8cb0071 100644 --- a/absurd-survivors/src/Player.ts +++ b/absurd-survivors/src/Player.ts @@ -1,6 +1,6 @@ import type {Acting, Drawable, Healthy, Item, Leveling, Weapon} from "./interfaces.ts"; import {Vector} from "./base.ts"; -import {drawDot, getCoordinatesSplit} from "./utils.ts"; +import {fillDot, getCoordinatesSplit} from "./utils.ts"; export class Player implements Drawable, Acting, Healthy { private _position: Vector; @@ -20,7 +20,7 @@ export class Player implements Drawable, Acting, Healthy { } draw(ctx: CanvasRenderingContext2D) { - drawDot(this.position, this._stats.size, this._color, ctx) + fillDot(this.position, this._stats.size, this._color, ctx) this._weapons.forEach(weapon => weapon.draw(ctx)) } diff --git a/absurd-survivors/src/drop.ts b/absurd-survivors/src/drop.ts index 8f5fd3b..d874136 100644 --- a/absurd-survivors/src/drop.ts +++ b/absurd-survivors/src/drop.ts @@ -1,6 +1,6 @@ import type {Drop, Item} from "./interfaces.ts"; import {World} from "./World.ts"; -import {drawDot, moveInDirectionOf} from "./utils.ts"; +import {fillDot, moveInDirectionOf} from "./utils.ts"; import {Vector} from "./base.ts"; import {rarityColor} from "./items.ts"; @@ -49,7 +49,7 @@ export class MoneyDrop extends BasicDrop { private worth: number; draw(ctx: CanvasRenderingContext2D) { - drawDot(this._position, this.size, this._color, ctx) + fillDot(this._position, this.size, this._color, ctx) } pickup() { @@ -76,7 +76,7 @@ export class HealthPack extends BasicDrop { private healAmount: number; draw(ctx: CanvasRenderingContext2D) { - drawDot(this._position, this.size, this._color, ctx) + fillDot(this._position, this.size, this._color, ctx) } pickup() { @@ -101,7 +101,7 @@ export class HealthPack extends BasicDrop { export class LevelDrop extends BasicDrop { draw(ctx: CanvasRenderingContext2D) { - drawDot(this._position, this.size, this._color, ctx) + fillDot(this._position, this.size, this._color, ctx) } pickup() { diff --git a/absurd-survivors/src/main.ts b/absurd-survivors/src/main.ts index 82f1f01..cfac878 100644 --- a/absurd-survivors/src/main.ts +++ b/absurd-survivors/src/main.ts @@ -44,7 +44,7 @@ function updateCanvas() { world.draw() for(let key in keys) { if(keys[key].state) { - keys[key].fun() + keys[key].fun(keys[key].intensity) } } } else { @@ -65,29 +65,31 @@ function makeKey(char, fun) { } let keys = {}; -makeKey('w', function () { - world.movePlayer(new Vector(0, -world.player.stats.speed)) +makeKey('w', function (intensity: number) { + world.movePlayer(new Vector(0, -world.player.stats.speed * intensity)) }) -makeKey('s', function () { - world.movePlayer(new Vector(0, world.player.stats.speed)) +makeKey('s', function (intensity: number) { + world.movePlayer(new Vector(0, world.player.stats.speed * intensity)) }) -makeKey('a', function () { - world.movePlayer(new Vector(-world.player.stats.speed, 0)) +makeKey('a', function (intensity: number) { + world.movePlayer(new Vector(-world.player.stats.speed * intensity, 0)) }) -makeKey('d', function () { - world.movePlayer(new Vector(world.player.stats.speed, 0)) +makeKey('d', function (intensity: number) { + world.movePlayer(new Vector(world.player.stats.speed * intensity, 0)) }) function keyUp(event) { if(event.key in keys) { keys[event.key].state = false; + keys[event.key].intensity = 0; } } function keyDown(event) { if(event.key in keys) { keys[event.key].state = true; + keys[event.key].intensity = 1; } } @@ -138,6 +140,12 @@ docReady(function () { hud.mouseUp(pos) } + canvas.onmousemove = (event) => { + event.preventDefault() + let pos = new Vector(event.x, event.y) + hud.mouseMove(pos) + } + canvas.addEventListener("touchstart", (event) => { event.preventDefault() let touch = event.touches[0] @@ -147,11 +155,17 @@ docReady(function () { canvas.addEventListener("touchend", (event) => { event.preventDefault() - let touch = event.touches[0] let pos = new Vector(event.clientX, event.clientY) hud.mouseUp(pos) }); + canvas.addEventListener("touchmove", (event) => { + event.preventDefault() + let touch = event.touches[0] + let pos = new Vector(touch.clientX, touch.clientY) + hud.mouseMove(pos) + }); + ItemManagement.initializeItems() requestAnimationFrame(updateCanvas); diff --git a/absurd-survivors/src/projectile.ts b/absurd-survivors/src/projectile.ts index 2d97ac1..18eabe0 100644 --- a/absurd-survivors/src/projectile.ts +++ b/absurd-survivors/src/projectile.ts @@ -4,7 +4,7 @@ import {World} from "./World.ts"; import {Cooldown, DeadPoint, Point, Vector} from "./base.ts"; import { circleLineCollision, - drawDot, + fillDot, getCoordinatesSplit, moveInDirectionOf, pointOnLineWithinLine, @@ -90,7 +90,7 @@ export abstract class Projectile implements Acting, Placeable { }; draw(ctx: CanvasRenderingContext2D) { - drawDot(this.position, this.stats.size, this.color, ctx) + fillDot(this.position, this.stats.size, this.color, ctx) } move() { @@ -142,7 +142,7 @@ export class ChainBallProjectile extends Projectile { } draw(ctx: CanvasRenderingContext2D) { - drawDot(this.position, this.stats.size, 'pink', ctx) // todo render the weapon instead + fillDot(this.position, this.stats.size, 'pink', ctx) // todo render the weapon instead } act() { @@ -201,7 +201,7 @@ export class StraightMeleeWeaponProjectile extends Projectile { draw(ctx: CanvasRenderingContext2D) { let position = this.getRealPosition(); - drawDot(position, this.stats.size, 'brown', ctx) // todo render the weapon instead + fillDot(position, this.stats.size, 'brown', ctx) // todo render the weapon instead } getRealPosition(): Vector { diff --git a/absurd-survivors/src/ui.ts b/absurd-survivors/src/ui.ts index ecca10e..8aa7cbf 100644 --- a/absurd-survivors/src/ui.ts +++ b/absurd-survivors/src/ui.ts @@ -1,7 +1,7 @@ import type {Drawable, DrawContainer, MouseInteracting, MouseInterActingContainer} from "./interfaces.ts"; import {World} from "./World.ts"; import {Vector} from "./base.ts"; -import {rectPointIntersection} from "./utils.ts"; +import {drawDot, fillDot, rectPointIntersection} from "./utils.ts"; export class HUD implements DrawContainer { private health: PlayerInfo; @@ -27,46 +27,76 @@ export class HUD implements DrawContainer { this.controls.mouseUp(pos) } + mouseMove(pos: Vector) { + this.controls.mouseMove(pos) + } + } export class Controls implements DrawContainer, MouseInterActingContainer { private world: World; - private buttons: RectButton[] = [] - private lastHitButton: RectButton | undefined; + private centerPosition: Vector | undefined; + private keys: any; + private size: number; constructor(world: World, keys: any) { this.world = world; - let gapSize = 10; - this.buttons = [ - new KeyboardButton(new Vector(this.world.size.x - 150, this.world.size.y - 150 - gapSize), new Vector(50, 50), 'W', keys), - new KeyboardButton(new Vector(this.world.size.x - 150, this.world.size.y - 100), new Vector(50, 50), 'S', keys), - new KeyboardButton(new Vector(this.world.size.x - 100 + gapSize, this.world.size.y - 100), new Vector(50, 50), 'D', keys), - new KeyboardButton(new Vector(this.world.size.x - 200 - gapSize, this.world.size.y - 100), new Vector(50, 50), 'A', keys) - ] + this.keys = keys; + this.size = 50; } draw(ctx: CanvasRenderingContext2D) { - this.buttons.forEach(button => { - button.draw(ctx) - }) - } - - mouseDown(pos: Vector) { - this.lastHitButton = undefined; - for (const button of this.buttons) { - if(button.hit(pos)) { - button.clickAction(pos) - this.lastHitButton = button; - return - } + if(this.isPressed()) { + drawDot(this.centerPosition!, this.size, 'white', ctx) } } + isPressed() { + return this.centerPosition !== undefined; + } + + mouseDown(pos: Vector) { + this.centerPosition = pos + } + mouseUp(pos: Vector) { - if(this.lastHitButton) { - this.lastHitButton.releaseAction(pos) - } + this.centerPosition = undefined; + let keys = ['a', 's', 'd', 'w'] + keys.forEach(key => { + this.keys[key].state = false; + this.keys[key].intensity = 0; + }) + this.keys['a'].state = false + } + + setKeyTo(key: string, state: boolean, value: number) { + this.keys[key].state = state; + this.keys[key].intensity = value; + } + + mouseMove(pos: Vector) { + if(this.isPressed()) { + let diff = Vector.createVector(pos, this.centerPosition!); + if(diff.vecLength() > this.size && !isNaN(diff.x) && !isNaN(diff.y)) { + return; + } + diff = diff.normalize(); + if(diff.x > 0) { + this.setKeyTo('a', false, 0) + this.setKeyTo('d', true, Math.abs(diff.x)) + } else if(diff.x < 0){ + this.setKeyTo('d', false, 0) + this.setKeyTo('a', true, Math.abs(diff.x)) + } + if(diff.y > 0) { + this.setKeyTo('w', false, 0) + this.setKeyTo('s', true, Math.abs(diff.y)) + } else if(diff.y < 0) { + this.setKeyTo('s', false, 0) + this.setKeyTo('w', true, Math.abs(diff.y)) + } + } } } diff --git a/absurd-survivors/src/utils.ts b/absurd-survivors/src/utils.ts index b0109d9..8981277 100644 --- a/absurd-survivors/src/utils.ts +++ b/absurd-survivors/src/utils.ts @@ -1,12 +1,19 @@ import {Vector} from "./base.ts"; -export function drawDot(position: Vector, size: number, color: string, ctx: CanvasRenderingContext2D) { +export function fillDot(position: Vector, size: number, color: string, ctx: CanvasRenderingContext2D) { ctx.beginPath(); ctx.fillStyle = color; ctx.arc(position.x, position.y, size, 0, 2 * Math.PI); ctx.fill(); } +export function drawDot(position: Vector, size: number, color: string, ctx: CanvasRenderingContext2D) { + ctx.beginPath(); + ctx.strokeStyle = color; + ctx.arc(position.x, position.y, size, 0, 2 * Math.PI); + ctx.stroke(); +} + export function moveInDirectionOf(position: Vector, target: Vector, speedFactor: number): Vector { let playerVector = Vector.createVector(target, position); let direction = playerVector.normalize() diff --git a/absurd-survivors/src/weapons.ts b/absurd-survivors/src/weapons.ts index 63792e5..3ed794f 100644 --- a/absurd-survivors/src/weapons.ts +++ b/absurd-survivors/src/weapons.ts @@ -1,5 +1,5 @@ import type {Weapon} from "./interfaces.ts"; -import {drawDot, toRad} from "./utils.ts"; +import {fillDot, toRad} from "./utils.ts"; import {Player} from "./Player.ts"; import { HomingProjectile, @@ -191,7 +191,7 @@ export class ChainBall extends MeleeWeapon { export class HomingPistol extends RangeWeapon { draw(ctx: CanvasRenderingContext2D) { - drawDot(this.getPosition(), 1, this.color, ctx) + fillDot(this.getPosition(), 1, this.color, ctx) } createProjectile(): boolean { @@ -230,7 +230,7 @@ export class HomingPistol extends RangeWeapon { export class Pistol extends RangeWeapon { draw(ctx: CanvasRenderingContext2D) { - drawDot(this.getPosition(), 1, this.color, ctx) + fillDot(this.getPosition(), 1, this.color, ctx) } private createProjectile(): boolean { @@ -268,7 +268,7 @@ export class Pistol extends RangeWeapon { export class SpreadWeapon extends RangeWeapon { draw(ctx: CanvasRenderingContext2D) { - drawDot(this.getPosition(), 1, this.color, ctx) + fillDot(this.getPosition(), 1, this.color, ctx) } private createProjectile(): boolean {