From 904bae47d39a762a517ef8daf08f49822b52094e Mon Sep 17 00:00:00 2001 From: elioat Date: Fri, 29 Dec 2023 17:29:28 -0500 Subject: * --- js/game-frame/game.js | 93 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 54 insertions(+), 39 deletions(-) (limited to 'js') diff --git a/js/game-frame/game.js b/js/game-frame/game.js index b0f3fb6..744991d 100644 --- a/js/game-frame/game.js +++ b/js/game-frame/game.js @@ -106,6 +106,8 @@ let items = [ new Item('banana', 24, 128, 'food', 'yellow'), new Item('bucket', 128, 256, 'object', 'green'), new Item('big key', 216, 216, 'key', 'cyan'), + new Item('small key', 456, 256, 'key', 'cyan'), + new Item('bike', 0, 48, 'bike', 'orange'), ]; // Populate the world with really very weird objects @@ -183,7 +185,6 @@ function displayStats() { // Game loop function gameLoop() { - // Update the camera position to follow the player camera.x = player.x - camera.width / 2; camera.y = player.y - camera.height / 2; @@ -193,19 +194,19 @@ function gameLoop() { camera.y = Math.max(0, Math.min(map.length * TILE_SIZE - camera.height, camera.y)); // Draw the map - for (let y = 0; y < map.length; y++) { - for (let x = 0; x < map[y].length; x++) { - ctx.fillStyle = map[y][x].color; + map.forEach((row, y) => { + row.forEach((tile, x) => { + ctx.fillStyle = tile.color; - // Draw the tile - ctx.fillRect(x * TILE_SIZE - camera.x, y * TILE_SIZE - camera.y, TILE_SIZE, TILE_SIZE); + // Draw the tile + ctx.fillRect(x * TILE_SIZE - camera.x, y * TILE_SIZE - camera.y, TILE_SIZE, TILE_SIZE); - // Draw the grid - ctx.strokeStyle = 'white'; - ctx.lineWidth = 1; - ctx.strokeRect(x * TILE_SIZE - camera.x, y * TILE_SIZE - camera.y, TILE_SIZE, TILE_SIZE); - } - } + // Draw the grid + ctx.strokeStyle = 'white'; + ctx.lineWidth = 1; + ctx.strokeRect(x * TILE_SIZE - camera.x, y * TILE_SIZE - camera.y, TILE_SIZE, TILE_SIZE); + }); + }); // Draw the player ctx.fillStyle = player.color; @@ -213,41 +214,57 @@ function gameLoop() { // Draw items and check for collisions items.forEach(item => { - ctx.fillStyle = item.color; - ctx.fillRect(item.x - camera.x, item.y - camera.y, player.width, player.height); + ctx.fillStyle = item.color; + ctx.fillRect(item.x - camera.x, item.y - camera.y, player.width, player.height); }); - for (let i = 0; i < items.length; i++) { - if (player.x === items[i].x && player.y === items[i].y) { - player.collectItem(items[i]); - items.splice(i, 1); // Remove the item from the map - i--; - } + items = items.filter(item => { + if (player.x === item.x && player.y === item.y) { + player.collectItem(item); + return false; // Remove the item from the map + } + return true; + }); + if (player.inventory.find(item => item.type === 'bike')) { + player.step = 12; + } else { + player.step = 8; } - // Draw signs and check for collisions - signs.forEach(sign => { - let dx = player.x - sign.x; - let dy = player.y - sign.y; - let distance = Math.sqrt(dx * dx + dy * dy); - if (distance < player.width / 2 + sign.width / 2) { + // Draw signs and check for collisions + signs.forEach(sign => { + const dx = player.x - sign.x; + const dy = player.y - sign.y; + const distance = Math.sqrt(dx * dx + dy * dy); + if (distance < player.width / 2 + sign.width / 2) { document.getElementById("dialog").innerHTML = sign.message; ctx.fillStyle = 'black'; ctx.font = '22px Serif'; - // Wrap text within the canvas width - // FIXME: this works, but is too agressive -- it'll wrap text that *was* at the canvas' edge, but that isn't any more - const maxWidth = canvas.width - sign.x - camera.x; - let words = sign.message.split(' '); + // Calculate the starting position of the text + const lineHeight = 24; + + // Calculate the starting position of the text within the sign + const textWidth = ctx.measureText(sign.message).width; + const textHeight = lineHeight; + const startX = sign.x - camera.x + (sign.width - textWidth) / 2; + const startYWithinSign = sign.y - camera.y + (sign.height - textHeight) / 2; + + // Calculate the final position of the text within the canvas area + const padding = 12; // Set the desired padding value + const finalX = Math.max(padding, Math.min(canvas.width - textWidth - padding, startX)); + const finalY = Math.max(padding, Math.min(canvas.height - textHeight - padding, startYWithinSign)); + + // Wrap the text to multiple lines if it exceeds the canvas width + const words = sign.message.split(' '); let line = ''; let lines = []; for (let i = 0; i < words.length; i++) { - let testLine = line + words[i] + ' '; - let metrics = ctx.measureText(testLine); - let testWidth = metrics.width; - if (testWidth > maxWidth && i > 0) { + const testLine = line + words[i] + ' '; + const testWidth = ctx.measureText(testLine).width; + if (testWidth > canvas.width - padding * 2) { lines.push(line); line = words[i] + ' '; } else { @@ -256,11 +273,9 @@ function gameLoop() { } lines.push(line); - // Draw wrapped text - let lineHeight = 24; - let startY = sign.y - camera.y - (lines.length * lineHeight) / 2; + // Draw each line of the text for (let i = 0; i < lines.length; i++) { - ctx.fillText(lines[i], sign.x - camera.x, startY + (i * lineHeight)); + ctx.fillText(lines[i], finalX, finalY + i * lineHeight); } } @@ -268,7 +283,7 @@ function gameLoop() { ctx.beginPath(); ctx.arc(sign.x - camera.x + sign.width / 2, sign.y - camera.y + sign.height / 2, sign.width / 2, 0, Math.PI * 2); ctx.fill(); - }); + }); // Call the game loop again next frame requestAnimationFrame(gameLoop); -- cgit 1.4.1-2-gfad0