Sheldan/canvas
1
0
Fork 0
mirror of https://github.com/Sheldan/canvas.git synced 2026-01-01 14:58:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

survivors: renaming drawDot to fillDot

Browse Source 
adding area for touch movement instead of buttons simulating the keyboard
This commit is contained in:
Sheldan
2025-09-08 22:42:47 +02:00
parent 272a86d7fc
commit 681ba1b632
8 changed files with 106 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
absurd-survivors/src/Enemies.ts
View File

@@ -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() {

4
absurd-survivors/src/Player.ts
View File

@@ -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))
}

8
absurd-survivors/src/drop.ts
View File

@@ -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() {

34
absurd-survivors/src/main.ts
View File

@@ -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);

8
absurd-survivors/src/projectile.ts
View File

@@ -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 {

82
absurd-survivors/src/ui.ts
View File

@@ -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))
}
}
}
}

9
absurd-survivors/src/utils.ts
View File

@@ -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()

8
absurd-survivors/src/weapons.ts
View File

@@ -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 {