Skip to content
Snippets Groups Projects
Commit 80bd199b authored by Bye's avatar Bye
Browse files

Update things

parent b67e6b73
No related branches found
No related tags found
No related merge requests found
.idea/
node_modules/
build/
{
"minifyCSS": true,
"minifyJS": true,
"removeCommens": true,
"removeAttributeQuotes": true,
"removeRedundantAttributes": true,
"collapseWhitespace": true
}
\ No newline at end of file
var fs = require("fs");
var stats = fs.statSync("build/game.zip");
var fileSizeInBytes = stats.size;
var fileSizeInKilobytes = fileSizeInBytes / 1024;
console.log(`Current game size: ${Math.round(fileSizeInKilobytes*10)/10}/13.0 KB (${Math.round((fileSizeInKilobytes/13)*100)}%)`);
Subproject commit 25d7dc7a244b46a42dc19d5791bfb9ae877bfdb9
Subproject commit c57ff8bcebbcd4164f2b48292c06709ff8232520
<style>
canvas {width: 100vw; height: 100vh}
body {margin: 0}
</style>
<canvas id="canvas">
This browser requires the <code>&lt;canvas&gt;</code> element to work
</canvas>
<script src="./src/main.js" type="module"></script>
\ No newline at end of file
This diff is collapsed.
{
"scripts": {
"clear": "rm -rf build && mkdir build",
"serve": "npm-run-all -s clear -p dev:*",
"dev:js": "esbuild src/js/main.js --bundle --watch --sourcemap --format=iife --loader:.webp=dataurl --outfile=build/main.js",
"dev:html": "browser-sync build src --watch --https",
"build": "run-s clear build:*",
"build:js": "esbuild src/js/main.js --bundle --minify --format=iife --loader:.webp=dataurl | roadroller --type js - -O 2 -o build/main.js",
"build:html": "html-inline src/index.html -b build | html-minifier -c configs/html-minifier.json -o build/index.html",
"build:zip": "zip -FS -qjX9 build/game.zip build/index.html && advzip -z -4 build/game.zip",
"build:zipSize": "node configs/size.js"
},
"devDependencies": {
"advzip-bin": "^2.0.0",
"browser-sync": "^3.0.2",
"esbuild": "0.23.0",
"html-inline": "1.2.0",
"html-minifier": "^4.0.0",
"npm-run-all": "^4.1.5",
"roadroller": "^2.1.0",
"terser": "^5.31.6"
},
"dependencies": {
"jsfxr": "^1.2.2"
}
}
src/img/2024-07-30 09.58.25.jpg

50.7 KiB

<style>
body{
margin:0;
background: #1a1a1a;
}
canvas {
width: 100vw;
height: 100vh;
object-fit: contain;
image-rendering: pixelated;
}
</style>
<canvas id="canvas"></canvas>
<script src="./main.js"></script>
\ No newline at end of file
import Canvas from "../../hampsterengine/src/canvas.js";
import Engine from "../../hampsterengine/src/engine.js";
import {Room} from "../../hampsterengine/src/things";
import {Logo, MainMenuButton} from "./objects";
const canvas = new Canvas('canvas');
const engine = new Engine(canvas);
const assets = engine.assetStore;
canvas.width = 640;
canvas.height = 480;
canvas.ctx.setTransform(canvas.pixelRatio, 0, 0, canvas.pixelRatio, 0, 0);
canvas.ctx.imageSmoothingEnabled = false;
const rm_MainMenu = new Room();
rm_MainMenu.bgColor = 'black';
const logo = new Logo();
logo.x = 30;
logo.y = 45;
logo.align = 2
rm_MainMenu.things.push(logo);
const newGameButton = new MainMenuButton('New Game');
newGameButton.x = 30;
newGameButton.y = 70;
rm_MainMenu.things.push(newGameButton);
rm_MainMenu.drawGui = _ => {
canvas.drawText("(c) bye 2024", 30, canvas.height-45,{
font: '8px serif'
});
}
engine.registerRoom(rm_MainMenu, 'mainMenu');
function main() {
requestAnimationFrame(main);
canvas.fill(engine.room.bgColor ?? 'white');
engine.step();
engine.draw();
engine.drawGui();
engine.drawCursor();
}
engine.room = engine.getRoomIndex('mainMenu');
main();
import {Thing} from "../../hampsterengine/src/things";
export class MainMenuButton extends Thing {
constructor(label, action=function(){}) {
super();
this.label = label;
this.action = action;
this.fontSize = 10;
this.font = 'serif';
this.bgColor = '#5f5f5f';
this.color = '#ffffff';
}
draw() {
const font = `${this.fontSize}px ${this.font}`;
canvas.ctx.font = font;
let text = canvas.ctx.measureText(this.label);
const padding = this.fontSize/2;
canvas.setFillColor(this.bgColor);
const rectHeight = this.fontSize + padding;
this.height = rectHeight;
this.width = text.width + padding;
canvas.fillRect(this.x, this.y, this.width, rectHeight);
canvas.setFillColor(this.color);
canvas.drawText(
this.label, this.x + (text.width + padding)/2, this.y + rectHeight/2, {
font: font, textBaseline: "middle", textAlign: "center"
}
);
canvas.drawText("", 10, canvas.height-10, {
textBaseline: "alphabetic"
})
}
click() {
this.action();
}
}
export class Logo extends Thing {
constructor(props) {
super(props);
this.spriteImage = null;
this.align = 1; // 1=Center
// 2=Left
}
draw() {
canvas.setFillColor('#efefef');
let font = 'Times New Roman';
let align = (function () {
switch (this.align) {
default: return 'center';
case 2: return 'left';
case 3: return 'right';
}
})
canvas.drawText('Committee of', this.x, this.y, {
textAlign: align,
textBaseline: 'bottom',
font: `12px ${font}`
})
canvas.drawText('THIRTEEN', this.x, this.y, {
textAlign: align,
textBaseline: 'top',
font: `24px ${font}`
});
}
}
import Canvas from "../hampsterengine/src/canvas.js";
import Engine from "../hampsterengine/src/engine.js";
const canvas = new Canvas('canvas');
const engine = new Engine(canvas);
function main() {
requestAnimationFrame(main);
canvas.updateCanvasSize();
}
function load() {
if (engine.loading) {
engine.loadLoop();
setTimeout(load, 1000/60);
} else {
main();
}
}
load();
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment