99 lines
No EOL
2.2 KiB
JavaScript
99 lines
No EOL
2.2 KiB
JavaScript
const cs = 1024;
|
|
const assets = [
|
|
'assets/player.svg',
|
|
'assets/head.svg',
|
|
];
|
|
|
|
function Game() {
|
|
let assetsIn = {};
|
|
|
|
for (let asset in assets) {
|
|
assetsIn[asset] = new Image();
|
|
assetsIn[asset].src = assets[asset];
|
|
}
|
|
|
|
let canvas = document.querySelector("#canvas");
|
|
let player = new Player();
|
|
let entities = [player];
|
|
|
|
for (let i = 0; i < 50; i++) {
|
|
entities.push(new Player())
|
|
}
|
|
|
|
canvas.width = canvas.height = cs;
|
|
|
|
this.canvas = canvas;
|
|
this.ctx = canvas.getContext("2d");
|
|
this.assetsIn = assetsIn;
|
|
this.player = player;
|
|
this.entities = entities;
|
|
}
|
|
|
|
Game.prototype.main = function () {
|
|
let { entities, player } = this;
|
|
|
|
for (let ent of entities) {
|
|
ent.pos.x += ent.vel.x;
|
|
ent.pos.y += ent.vel.y;
|
|
|
|
ent.vel.x *= 0.8;
|
|
ent.vel.y *= 0.8;
|
|
|
|
ent.rot += 0.03 * ent.dir;
|
|
ent.rot = ent.rot % (Math.PI * 10);
|
|
|
|
ent.camera.x = -ent.pos.x * 0.1 + ent.camera.x * 0.9;
|
|
ent.camera.y = -ent.pos.y * 0.1 + ent.camera.y * 0.9;
|
|
|
|
ent.ticks++;
|
|
|
|
let dp = (Math.sin(ent.rot) * (ent.pos.x - player.pos.x))
|
|
- (Math.cos(ent.rot) * (ent.pos.y - player.pos.y));
|
|
|
|
dp /= ((ent.pos.x - player.pos.x) ** 2) + ((ent.pos.y - player.pos.y) ** 2);
|
|
|
|
dp *= 30;
|
|
|
|
if (Math.random() < -dp && Math.random() > 5 / (ent.ticks+2)) {
|
|
ent.bump();
|
|
}
|
|
}
|
|
}
|
|
|
|
// todo: move into its own file
|
|
Game.prototype.render = function () {
|
|
let { ctx, assetsIn, entities, player } = this;
|
|
|
|
ctx.clearRect(0, 0, cs, cs);
|
|
|
|
ctx.save();
|
|
|
|
ctx.translate(player.camera.x + cs / 2, player.camera.y + cs / 2);
|
|
|
|
for (let ent of entities) {
|
|
ctx.save();
|
|
|
|
ctx.translate(ent.pos.x, ent.pos.y);
|
|
ctx.rotate(ent.rot);
|
|
ctx.drawImage(assetsIn[1], -64 / 2, -128, 64, 128);
|
|
|
|
ctx.restore();
|
|
|
|
ctx.drawImage(assetsIn[0], ent.pos.x - 64 / 2, ent.pos.y - 64 / 2, 64, 64);
|
|
}
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
Game.prototype.click = function () {
|
|
let { player } = this;
|
|
|
|
player.bump(game);
|
|
}
|
|
|
|
var game = new Game();
|
|
|
|
setInterval(function () { game.main() }, 1000 / 60);
|
|
setInterval(function () { game.render() }, 1000 / 60);
|
|
|
|
game.canvas.onclick = () => game.click(); |