archive/unibutton
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

entities test, scaling

Browse source
This commit is contained in:
biglyderv 2024-11-25 14:14:20 -05:00
parent f5952f30eb
commit c210200bbe
3 changed files with 60 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -8,7 +8,7 @@
<body> <body>
<section id='main'> <section id='main'>
<h1>OneKey</h1> <h1>UniButton</h1>
<div> <div>
<canvas id='canvas'></canvas> <canvas id='canvas'></canvas>
<div class='message' style='display: none;'><span>You died in the Void...</span></div> <div class='message' style='display: none;'><span>You died in the Void...</span></div>
@ -17,6 +17,7 @@
placeholder placeholder
</div> </div>
</section> </section>
<script src='js/player.js'></script>
<script src='js/index.js'></script> <script src='js/index.js'></script>
</body> </body>

88
js/index.js
View file

@ -5,82 +5,88 @@ const assets = [
]; ];
function Game() { function Game() {
let assetsIn = {};
for (let asset in assets) {
assetsIn[asset] = new Image();
assetsIn[asset].src = assets[asset];
}
let canvas = document.querySelector("#canvas"); let canvas = document.querySelector("#canvas");
let player = new Player();
let entities = [player];
let ctx = canvas.getContext("2d"); for (let i = 0; i < 15; i++) {
entities.push(new Player())
let camera = { x: 0, y: 0 }; }
let pos = { x: 0, y: 0 };
let vel = { x: 0, y: 0 };
canvas.width = canvas.height = cs; canvas.width = canvas.height = cs;
this.canvas = canvas; this.canvas = canvas;
this.ctx = ctx; this.ctx = canvas.getContext("2d");
this.camera = camera;
this.pos = pos;
this.vel = vel;
this.rot = 0;
this.dir = 1;
this.ticks = 1; this.ticks = 1;
this.assetsIn = { this.assetsIn = assetsIn;
this.player = player;
}; this.entities = entities;
for (let asset in assets) {
this.assetsIn[asset] = new Image();
this.assetsIn[asset].src = assets[asset];
}
} }
Game.prototype.main = function () { Game.prototype.main = function () {
this.pos.x += this.vel.x; let { entities } = this;
this.pos.y += this.vel.y;
this.vel.x *= 0.9;
this.vel.y *= 0.9;
this.rot += 0.08 * this.dir;
this.rot = this.rot % (Math.PI * 10);
this.ticks++; this.ticks++;
this.camera.x = -this.pos.x * 0.1 + this.camera.x * 0.9; for (let player of entities) {
this.camera.y = -this.pos.y * 0.1 + this.camera.y * 0.9; player.pos.x += player.vel.x;
player.pos.y += player.vel.y;
player.vel.x *= 0.8;
player.vel.y *= 0.8;
player.rot += 0.03 * player.dir;
player.rot = player.rot % (Math.PI * 10);
player.camera.x = -player.pos.x * 0.1 + player.camera.x * 0.9;
player.camera.y = -player.pos.y * 0.1 + player.camera.y * 0.9;
}
} }
// todo: move into its own file // todo: move into its own file
Game.prototype.render = function () { Game.prototype.render = function () {
let { ctx, assetsIn, pos, camera } = this; let { ctx, assetsIn, entities, player } = this;
ctx.clearRect(0, 0, cs, cs); ctx.clearRect(0, 0, cs, cs);
ctx.save(); ctx.save();
ctx.translate(camera.x + cs / 2, camera.y + cs / 2); ctx.translate(player.camera.x + cs / 2, player.camera.y + cs / 2);
ctx.save(); for (let ent of entities) {
ctx.save();
ctx.translate(pos.x, pos.y); ctx.translate(ent.pos.x, ent.pos.y);
ctx.rotate(this.rot); ctx.rotate(ent.rot);
ctx.drawImage(assetsIn[1], -64 / 2, -128, 64, 128); ctx.drawImage(assetsIn[1], -64 / 2, -128, 64, 128);
ctx.restore(); ctx.restore();
ctx.drawImage(assetsIn[0], pos.x - 64 / 2, pos.y - 64 / 2, 64, 64); ctx.drawImage(assetsIn[0], ent.pos.x - 64 / 2, ent.pos.y - 64 / 2, 64, 64);
}
ctx.restore(); ctx.restore();
} }
Game.prototype.click = function () { Game.prototype.click = function () {
let { rot } = this; let { player } = this;
if (this.ticks < 10) { if (this.ticks < 10) {
this.dir *= -1; player.dir *= -1;
} }
this.vel.x += Math.sin(rot) * 25; player.vel.x *= 0.6;
this.vel.y -= Math.cos(rot) * 25; player.vel.y *= 0.6;
player.vel.x += Math.sin(player.rot) * 25;
player.vel.y -= Math.cos(player.rot) * 25;
this.ticks = 0; this.ticks = 0;
} }

11
js/player.js Normal file
View file

@ -0,0 +1,11 @@
function Player() {
let pos = { x: Math.random() * 1000 - 50, y: Math.random() * 1000 - 50 };
let camera = { x: -pos.x, y: -pos.y };
let vel = { x: 0, y: 0 };
this.camera = camera;
this.pos = pos;
this.vel = vel;
this.rot = 0;
this.dir = 1;
}