Skip to content
Snippets Groups Projects
Unverified Commit 67b9e98a authored by Bye's avatar Bye
Browse files

remove old editor and shrink font

parent b45386ce
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
assets/tilemap.ase
+ 0
− 0
View file @ 67b9e98a
No preview for this file type
src/img/hampsterfont.webp
+ 0
− 0
View replaced file @ b45386ce View file @ 67b9e98a
src/img/hampsterfont.webp

380 B | W: | H:

src/img/hampsterfont.webp

200 B | W: | H:

src/img/hampsterfont.webp
src/img/hampsterfont.webp
src/img/hampsterfont.webp
src/img/hampsterfont.webp
  • 2-up
  • Swipe
  • Onion skin
src/img/t.webp
+ 0
− 0
View replaced file @ b45386ce View file @ 67b9e98a
src/img/t.webp

264 B | W: | H:

src/img/t.webp

296 B | W: | H:

src/img/t.webp
src/img/t.webp
src/img/t.webp
src/img/t.webp
  • 2-up
  • Swipe
  • Onion skin
src/index.html
+ 3
− 4
View file @ 67b9e98a
......@@ -2,7 +2,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<style>
:root { color-scheme: dark; }
:root { color-scheme: light dark; }
body { display: flex; justify-content: center; align-items: center; height: 100vh;}
canvas, body {
margin: 0;
......@@ -10,8 +10,8 @@
user-select: none;
}
canvas {
width: 768px;
height: 768px;
width: 100%;
max-height: 100vh;
object-fit: contain;
image-rendering: pixelated;
margin: auto;
......@@ -19,6 +19,5 @@
</style>
<body>
<canvas id=c></canvas>
<script src="lzs.js"></script>
<script type="module" src=game.js></script>
</body>
\ No newline at end of file
src/js/canvas.js
+ 0
− 2
View file @ 67b9e98a
// Holds canvas, context and adds endpoints for graphics
import { pi } from "./utils.js"
class Canvas {
constructor(id="c", w=128, h=128) {
this.canvas = document.getElementById(id);
......
src/js/config.js
+ 0
− 3
View file @ 67b9e98a
......@@ -4,6 +4,3 @@ export const GAME_TITLE = "Untitled JS13K23 Game."
export const WIDTH = 256; // pixels
export const HEIGHT = 240; // pixels
export const SCALE = 2<<4;
src/js/game.js
+ 15
− 121
View file @ 67b9e98a
import { WIDTH, HEIGHT, GAME_TITLE, SCALE } from "./config.js";
import { WIDTH, HEIGHT, GAME_TITLE } from "./config.js";
import { Canvas } from "./canvas.js";
import { TextRenderer } from "./text.js";
import { Room, Object } from "./objects.js";
import { whichKeyDown } from "./keyboard.js";
import { convertTileToScreen, getParameter, hash } from "./utils.js";
import { isKeyUp, whichKeyDown } from "./keyboard.js";
import { getParameter } from "./utils.js";
let assets = {
images: {
splash: "../img/splash1.webp",
font: "../img/hampsterfont.webp",
tiles: "../img/t.webp",
selector: "../img/selector.webp",
},
spritesheets: {
player: [
{x: 0}, // looking up
{x: 16}, // looking right
{x: 32}, // looking down
{x: 48} // looking left
]
}
}
const tileTypes = {
1: 1, // floor
2: 2, // wall
}
let running = 1;
......@@ -90,6 +76,7 @@ let searchForRoom = (name) => {
const changeRoom = (index) => {
currentRoom = rooms[index];
roomIndex = index;
currentRoom.init();
}
const loadingRoom = new Room("loading");
......@@ -101,20 +88,21 @@ loadingRoom.updateStatus = (status) => {
}
const debugRoom = new Room("debug");
debugRoom.init = () => {
if (!debug) changeRoom(searchForRoom("menu"));
}
debugRoom.draw = () => {
canvas.fill("black");
}
debugRoom.drawGUI = () => {
debugStatuses.push("Current Frame:"+currentFrame+`(~${Math.round((currentFrame/targetFrames)*100)/100} sec)`);
}
debugRoom.keyDown = (key) => {
if (key == "Escape") changeRoom(searchForRoom("menu"));
}
const menuRoom = new Room("menu");
menuRoom.options = [
{"label": "Start Game", "action": _ => {changeRoom(searchForRoom("game"))}},
];
if (debug) menuRoom.options.push({"label": "Debug Room", "action": _ => {changeRoom(searchForRoom("debug"))}});
menuRoom.index = 0;
menuRoom.draw = () => {
......@@ -143,105 +131,8 @@ menuRoom.keyDown = (key) => {
if (menuRoom.index >= menuRoom.options.length) menuRoom.index = 0;
if (menuRoom.index < 0) menuRoom.index = menuRoom.options.length-1;
}
const getTileType = (x, y, data) => {
for (let i = 0; i < data.tiles.length; i++) {
let tile = data.tiles[i];
if (tile.x == x && tile.y == y) return tileTypes[tile.id];
}
return 0;
}
const renderTiles = (data) => {
for (let i = 0; i < data.tiles.length; i++) {
let tile = data.tiles[i];
let tileLocation = convertTileToScreen(tile.x, tile.y);
let tId = tile.id;
if (tile.id == 2) {
tId = 3;
// connect walls to each other.
// check the tile above, below, left, and right of this one. if it is also id 2, then set the corresponding variable to 1
getTileType(tile.x, tile.y-1, data) == 2 ? tId += 1 : tId += 0;
getTileType(tile.x, tile.y+1, data) == 2 ? tId += 2 : tId += 0;
getTileType(tile.x-1, tile.y, data) == 2 ? tId += 4 : tId += 0;
getTileType(tile.x+1, tile.y, data) == 2 ? tId += 8 : tId += 0;
}
canvas.sliceImage(assets.images.tiles, tileLocation.x, tileLocation.y, SCALE, SCALE, tId*16, 0, 16, 16);
}
}
const gameRoom = new Room("game");
gameRoom.data = { tiles: [ ] };
gameRoom.draw = () => {
canvas.fill("black");
renderTiles(gameRoom.data);
}
const levelEditor = new Room("editor");
levelEditor.currentTile = { x: 0, y: 0, id: 0 };
levelEditor.data = { tiles : [] };
levelEditor.step = _ => {
// place the camera at the center of the current tile if it is outside the screen
let tileLocation = convertTileToScreen(levelEditor.currentTile.x, levelEditor.currentTile.y);
if (tileLocation.x < canvas.cX) canvas.cX = tileLocation.x;
if (tileLocation.x >= canvas.cX+256) canvas.cX = tileLocation.x-canvas.width;
if (tileLocation.y < canvas.cY) canvas.cY = tileLocation.y;
if (tileLocation.y > canvas.cY+224) canvas.cY = tileLocation.y-canvas.height;
debugStatuses.push("Current tile:"+levelEditor.currentTile.x+","+levelEditor.currentTile.y);
debugStatuses.push("Current tile ID:"+levelEditor.currentTile.id);
debugStatuses.push("Camera:"+canvas.cX+","+canvas.cY);
}
levelEditor.keyDown = (key) => {
if (pressedLastFrame.includes(key)) return;
const { currentTile, data } = levelEditor;
const { x, y, id } = currentTile;
const keyActions = {
ArrowUp: () => currentTile.y--,
ArrowDown: () => currentTile.y++,
ArrowLeft: () => currentTile.x--,
ArrowRight: () => currentTile.x++,
PageUp: () => currentTile.id++,
PageDown: () => currentTile.id--,
KeyP: () => console.log(data),
Enter: () => {
data.tiles = data.tiles.filter(tile => tile.x !== x || tile.y !== y);
data.tiles.push({ id, x, y });
},
};
const action = keyActions[key];
if (action) action();
};
levelEditor.draw = () => {
canvas.fill("#010101");
renderTiles(levelEditor.data);
canvas.drawLine(-canvas.width*100, 0, canvas.width*100, 0, "white");
canvas.drawLine(0, -canvas.height*100, 0, canvas.height*100, "white");
text.render("(0,0)", 1-canvas.cX, 1-canvas.cY)
let tileLocation = convertTileToScreen(levelEditor.currentTile.x, levelEditor.currentTile.y);
canvas.ctx.globalAlpha = 0.5;
canvas.sliceImage(assets.images.tiles, tileLocation.x, tileLocation.y, SCALE, SCALE, levelEditor.currentTile.id*16, 0, 16, 16);
canvas.ctx.globalAlpha = 1;
canvas.drawImage(assets.images.selector, tileLocation.x, tileLocation.y, SCALE, SCALE);
}
rooms.push(loadingRoom);
rooms.push(menuRoom);
rooms.push(gameRoom);
rooms.push(levelEditor);
rooms.push(debugRoom);
currentRoom = rooms[roomIndex];
......@@ -264,6 +155,7 @@ let main = () => { // main game loop
let currentKeys = whichKeyDown();
for (let i = 0; i < currentKeys.length; i++) {
if (isKeyUp(currentKeys[i]) && pressedLastFrame.includes(currentKeys[i])) continue;
if (debug) debugStatuses.push(currentKeys[i]);
currentRoom.keyDown(currentKeys[i]);
}
......@@ -272,7 +164,7 @@ let main = () => { // main game loop
if (debug) {
text.render("FPS:" + Math.round(1000 / delta), 0, 0);
text.render(currentRoom.name, canvas.width-8*(currentRoom.name.length), 0);
text.render(currentRoom.name, canvas.width-(text.charWidth*(currentRoom.name.length)), 0);
debugStatuses.push("Debug mode");
if (currentFrame <= 60*5) {
......@@ -282,7 +174,10 @@ let main = () => { // main game loop
}
for (let i = 0; i < debugStatuses.length; i++) {
text.render(debugStatuses[i], 0, canvas.height-7*(debugStatuses.length-i));
// console.debug(debugStatuses[i]);
if (typeof(debugStatuses[i]) == "string") text.render(debugStatuses[i], 0, canvas.height-text.charHeight*(debugStatuses.length-i));
if (typeof(debugStatuses[i]) == "object") {text.render(debugStatuses[i].msg, 0, canvas.height-text.charHeight*(debugStatuses.length-i)); debugStatuses[i].ttl--;}
}
lastFrameTime = now;
......@@ -302,8 +197,7 @@ let init = () => {
console.log("Images loaded.")
currentRoom.updateStatus("Loading complete!");
setTimeout(() => {
let rm = getParameter("room")
(rm ? changeRoom(searchForRoom(rm)) : changeRoom(searchForRoom("menu")));
(getParameter("room") ? changeRoom(searchForRoom(getParameter("room"))) : changeRoom(searchForRoom("menu")));
main();
}, 1000);
}
......
src/js/objects.js
+ 2
− 0
View file @ 67b9e98a
......@@ -11,6 +11,8 @@ class Room extends Object {
this.name = name; // needs to be unique, otherwise the searching code will just use the first one it finds.
}
init(){}
draw() {
for (let i = 0; i < this.objects.length; i++) {
this.objects[i].draw();
......
src/js/text.js
+ 6
− 3
View file @ 67b9e98a
......@@ -3,8 +3,11 @@
class TextRenderer {
constructor(canvas, fontimg) {
this.fontimg = fontimg; // MUST BE AN IMAGE OBJECT
this.fontWidth = 7;
this.fontHeight = 7;
this.fontWidth = 5;
this.fontHeight = 5;
this.spacing = 1;
this.charWidth = this.fontWidth + this.spacing;
this.charHeight = this.fontHeight + this.spacing;
this.fontChars = "abcdefghijklmnopqrstuvwxyz1234567890.,!?:;)(~>";
this.canvas = canvas;
}
......@@ -39,7 +42,7 @@ class TextRenderer {
xOffset = 0;
continue;
}
this.drawLetter(text[i], x + (xOffset * this.fontWidth), y + (heightOffset * this.fontHeight));
this.drawLetter(text[i], (x + (xOffset * (this.fontWidth + this.spacing))), y + (heightOffset * this.fontHeight));
xOffset++;
}
}
......
src/js/utils.js
+ 2
− 30
View file @ 67b9e98a
// random shit
import { SCALE } from "./config";
const params = new URLSearchParams(location.search);
export const pi = Math.PI;
export const convertTileToScreen = (x, y) => ({x: x*SCALE, y: y*SCALE});
export const getParameter = key => key ? params.get(key) : 0;
export const hash = window.location.hash.split("?")[0].slice(1);
// The following code is responsible for building levels.
const lineToCoords=(x0,y0,x1,y1,id=2)=>{const c=[];let dx=Math.abs(x1-x0),dy=Math.abs(y1-y0),sx=(x0<x1)?1:-1,sy=(y0<y1)?1:-1,err=dx-dy;while(true){c.push({x:x0,y:y0,id:id});if(x0===x1&&y0===y1)break;const e2=2*err;if(e2>-dy){err-=dy;x0+=sx}if(e2<dx){err+=dx;y0+=sy}}return c};
const generateBox = (x, y, width, height, fillTileId=1) => {
const box = [];
for (let y = y; y < height; y++) {
for (let x = x; x < width; x++) {
box.push({ x, y, id: fillTileId });
}
}
return box;
}
export const generateRoom = (x,y,width,height,lineId=2,fillId=1) => {
let top = lineToCoords(x, y, x+width, y, lineId);
let bottom = lineToCoords(x, y+height, x+width, y+height, lineId);
let left = lineToCoords(x, y, x, y+height, lineId);
let right = lineToCoords(x+width, y, x+width, y+height, lineId);
let fill = generateBox(x+1, y+1, x+width-1, y+height-1, fillId);
return [...top, ...bottom, ...left, ...right, ...fill];
}
export const hash = _ => window.location.hash;
export const setHash = string => window.location.hash = string;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment