bassguitarbill/top-down-action-adventure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle events or whatever

Browse Source
This commit is contained in:
Bill Rossi 2025-06-04 21:29:23 -04:00
parent b2624eb989
commit b7e86ce8ac
4 changed files with 95 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
rooms/sample.tmj
View File

@ -33,13 +33,41 @@
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":3,
"name":"Object Layer 1",
"objects":[
{
"height":64,
"id":1,
"name":"",
"properties":[
{
"name":"event",
"type":"string",
"value":"logSomething"
}],
"rotation":0,
"type":"",
"visible":true,
"width":64,
"x":128,
"y":256
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 182, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 203, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 223, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
182, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
182, 0, 0, 0, 0, 188, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 189, 229, 0, 0, 0, 190, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
@ -64,8 +92,8 @@
"x":0,
"y":0
}],
"nextlayerid":3,
"nextobjectid":1,
"nextlayerid":4,
"nextobjectid":4,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.11.2",

5
src/game.js
View File

@ -6,8 +6,8 @@ export default class Game {
this.canvas = canvas
this.ctx = canvas.getContext("2d")
this.timestamp = 0
this.actors = []
this.actors.push(new Player(this, 200, 200))
this.player = new Player(this, 200, 200)
this.actors = [this.player]
this.input = new Input().initialize()
@ -30,6 +30,7 @@ export default class Game {
tick(dt) {
this.actors.forEach(actor => actor.tick(dt))
this.currentRoom.tick(this, dt)
}
draw() {

66
src/room.js
View File

@ -1,3 +1,4 @@
import { doRectanglesOverlap } from "./util.js"
export default class Room {
constructor(json, name) {
this.json = json
@ -5,6 +6,19 @@ export default class Room {
console.log(json)
}
tick(game, dt) {
this.json.layers.forEach(layer => {
if (layer.type == "objectgroup") this.tickObjectGroup(game, layer)
})
}
tickObjectGroup(game, layer) {
const { player } = game
layer.objects.forEach(object => {
if (doRectanglesOverlap(player, object)) console.log(object)
})
}
get tilesetsToLoad() {
const ts = {}
this.json.tilesets.forEach((tileset, index) => {
@ -23,26 +37,40 @@ export default class Room {
}
draw(ctx) {
this.json.layers.forEach(layer => {
for (let y = 0; y < layer.height; y++) {
for (let x = 0; x < layer.width; x++) {
const index = x + (y * layer.width)
const tileIndex = layer.data[index] - 1
const tileset = this.tilesets[0]
const [sx, sy] = tileset.tileOffset(tileIndex)
ctx.drawImage(
tileset.image,
sx,
sy,
tileset.tileWidth,
tileset.tileHeight,
x * this.json.tilewidth,
y * this.json.tileheight,
this.json.tilewidth,
this.json.tileheight
)
}
this.json.layers.forEach(this.drawLayer.bind(this, ctx))
}
drawLayer(ctx, layer) {
if (layer.type == "tilelayer") this.drawTileLayer(ctx, layer)
else if (layer.type == "objectgroup") this.drawObjectGroup(ctx, layer)
}
drawTileLayer(ctx, layer) {
for (let y = 0; y < layer.height; y++) {
for (let x = 0; x < layer.width; x++) {
const index = x + (y * layer.width)
const tileIndex = layer.data[index] - 1
const tileset = this.tilesets[0]
const [sx, sy] = tileset.tileOffset(tileIndex)
ctx.drawImage(
tileset.image,
sx,
sy,
tileset.tileWidth,
tileset.tileHeight,
x * this.json.tilewidth,
y * this.json.tileheight,
this.json.tilewidth,
this.json.tileheight
)
}
}
}
drawObjectGroup(ctx, layer) {
layer.objects.forEach(object => {
ctx.fillStyle = "#FF000066"
ctx.fillRect(object.x, object.y, object.width, object.height)
})
}
}

15
src/util.js
View File

@ -2,7 +2,20 @@ const SQRT_OF_TWO = Math.sqrt(2)
const isZeroVector = vector => !vector.x && !vector.y
const doRectanglesOverlap = (rect1, rect2) => {
return (
doLengthsOverlap({ x: rect1.x, width: rect1.width }, { x: rect2.x, width: rect2.width })
&&
doLengthsOverlap({ x: rect1.y, width: rect1.height }, { x: rect2.y, width: rect2.height })
)
}
const doLengthsOverlap = (l1, l2) => {
return !((l1.x + l1.width < l2.x) || (l2.x + l2.width) < l1.x)
}
export {
SQRT_OF_TWO,
isZeroVector
isZeroVector,
doRectanglesOverlap
}