Kaboom.js - attack RPG-style

code.js

kaboom();

// debug.inspect = true

loadBean();

const player = add([
	sprite('bean'),
	pos(center()),
	area(),
	{
		movespeed: 200,
		hasSword: false,
	}
])

const sword = add([
	pos(center().add(-80)),
	area({
		shape: Rect.fromPoints(vec2(0), vec2(36,80))
	}),
	{
		draw() {
			drawRect({
			    width: 16,
			    height: 80,
			    pos: vec2(10, 0),
			    color: BLUE,
			})
			drawRect({
			    width: 36,
			    height: 8,
			    pos: vec2(0, 50),
			    color: BLUE,
			})
		}
	},
	"sword"
])

player.onCollide('sword', (sword) => {
	destroy(sword);
	player.hasSword = true;
})

const dirs = {UP, DOWN, LEFT, RIGHT}
let lastDir = 'UP'

onKeyPress('space', () => {
	if (!player.hasSword) return;
	let offset = vec2();
	let size = vec2(16,80)

	if (lastDir === 'UP') {
		offset = offset.add(22,-80)
	} else if (lastDir === 'DOWN') {
		offset = offset.add(22, 52)
	} else if (lastDir === 'LEFT') {
		size = size.scale(0).add(80,16)
		offset = offset.add(-80, 20)
	} else if (lastDir === 'RIGHT') {
		size = size.scale(0).add(80,16)
		offset = offset.add(60, 20)
	}
	
	add([
		pos(),
		area(),
		rect(size.x, size.y),
		color(BLUE),
		lifespan(0.1),
		follow(player, offset),
		"sword_hitbox"
	])
})


for (const d in dirs) {
	console.log(d)
	onKeyDown(d.toLowerCase(), () => {
		player.move(dirs[d].scale(player.movespeed))
		lastDir = d
	})
}

const ui = add([
	pos(0,0),
	fixed(),
	text("Pick the sword and press SPACE to attack"),
	color(RED)
])


for(let i = 0; i < 15; i++) {
	add([
		rect(40, 40),
		area(),
		color(GREEN),
		pos(rand(width()),rand(height())),
		"enemy"
	])
}

onCollide("enemy", "sword_hitbox", (enemy) => {
	destroy(enemy)
})

https://kaboomjs.com/play?example=add&code=eJylVN9v0zAQfo7%2FiqMvdbRQ0sKmqWNIsJWBmKDaD%2FEwTchLLmu0LK5sj66g%2Fu%2FcXZJujDEeyIvtz7n7znff3ZW5sPZaxztKvXgBOV7cXA7K2s8xC7ALwd2gUpU1%2BTs0tfyV2doHmFdmiY7%2BMHmuz1Tk564MqPsX9Fs%2FTlQ0t15nWAd0OuazcWg0b36qKLq235EoMB%2FDKE0JjGbGHy%2BsI6AwlUeCVuo87tg8X92R3fc9YOz5dnpHwgR%2BZuY4hiN6xaBw9npqyzp4%2FR2zkU7jBGTzcithO6Lq4sqdWegYeCt7thd%2FEdC3KPMwG8NwK%2BmQGZaXszCG7XQNUWzjxv0wTSCN1xeZrawbw7vD04lgq%2FhJlpePsDxCQhyb%2FyJZ0Qvp1JMs9iStTfkGtt6zVVXmVDi57CegZRPD7htOQ44%2BOLtswR1KfWPYlauVyI5arWuVl84T%2FPN0msD%2Bl6%2BfEzicvD9J4OjjwYeTlaowQGV82C9ZPf3TaV8pW3%2FC5dSh9xTH3GTIcXQhlAXoZw9oY3AYblxNAbE%2FWxQeWa6SkrhFffkDO2wopVaNtzX9bhNAU%2FC1k2YjuhqNEpYW5Q%2BQVAl%2FWPMDn7aHzdET9pya1r4Nl5eBz0yFJFRxQuIabsV%2FYaDwEuqhJygk7%2F%2FFsbWmUBH1WNOD0oQivHVnR46FLM5vk4ZkKbioUrMo5ViVBXU%2FjZN0MBSgIBHahW6KnLTUctNo9tusDBf2tqci0i4rTRXWgW71BmUtopMnMmYrHFT2UucUskhr3y5qnQ%2BCPbQLdHvGI8V7p7BO1DyVNHs6y8%2Fb9Ny7kXnF0yK6k2%2FOs0OtOunflL%2FPqDSR1izKW8wlQwFvg%2B5Ny%2BwKwgzbsWbqHOYsfjievt2bQLBgQjDZVY9NmtwdTfZjaVx%2BuWZ1M1W6Q8trGG7SurEh7%2B%2BqI6V4lSav0gc1avwdHE0mn%2BXMcToKQcvc4Vktp2bm0LEpA9Z4vWzzz%2F3ajY32IoHfC0XJlYuHY6QBqYS%2FADNrz9c%3D