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

Update things

parent b67e6b73
Branches
No related tags found
No related merge requests found
.idea/ .idea/
node_modules/ 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