const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight + 4;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
var keys = {};
window.addEventListener("keydown", function (event) {
keys[event.keyCode] = true;
});
window.addEventListener("keyup", function (event) {
delete keys[event.keyCode];
});
var player = {
position: {
x: null,
y: null,
init() {
player.position.x = 0;
player.position.y = 0;
player.position.real.x = canvas.width / 2 - player.proportion.head.width / 2
player.position.real.y = canvas.height / 2 - player.proportion.head.height / 2
},
real: {
x: undefined,
y: undefined
}
},
proportion: {
width: 105,
height: 105,
head: {
width: 105,
height: 105
}
},
speed: {
normal: -4.5,
diagonal: -(4.5 / Math.sqrt(2)),
right: true,
left: true,
up: true,
down: true
}
}
function createBlock(x, y, width, height, margin = 10) {
if (keys[37]) {
if (player.position.real.x - margin <= x + width &&
player.position.real.x + player.proportion.head.width + margin >= x + width - player.speed.normal) {
if (
player.position.real.y >= y &&
player.position.real.y <= y + height ||
player.position.real.y + player.proportion.height >= y &&
player.position.real.y + player.proportion.height <= y + height ||
player.position.real.y <= y &&
player.position.real.y + player.proportion.height >= y + height
) player.speed.left = false; else player.speed.left = true;
} else player.speed.left = true;
}
if (keys[38]) {
if (player.position.real.y - margin <= y + height &&
player.position.real.y + player.proportion.head.height + margin >= y + height - player.speed.normal) {
if (
player.position.real.x >= x &&
player.position.real.x <= x + width ||
player.position.real.x + player.proportion.width >= x &&
player.position.real.x + player.proportion.width <= x + width ||
player.position.real.x <= x &&
player.position.real.x + player.proportion.width >= x + width
) player.speed.up = false; else player.speed.up = true;
} else player.speed.up = true;
}
if (keys[39]) {
if (player.position.real.x + player.proportion.head.width + margin >= x &&
player.position.real.x - margin <= x + player.speed.normal) {
if (
player.position.real.y >= y &&
player.position.real.y <= y + height ||
player.position.real.y + player.proportion.height >= y &&
player.position.real.y + player.proportion.height <= y + height ||
player.position.real.y <= y &&
player.position.real.y + player.proportion.height >= y + height
) player.speed.right = false; else player.speed.right = true;
} else player.speed.right = true;
}
if (keys[40]) {
if (player.position.real.y + player.proportion.head.height + margin >= y &&
player.position.real.y - margin <= y + player.speed.normal) {
if (
player.position.real.x >= x &&
player.position.real.x <= x + width ||
player.position.real.x + player.proportion.height >= x &&
player.position.real.x + player.proportion.height <= x + width ||
player.position.real.x <= x &&
player.position.real.x + player.proportion.height >= x + width
) player.speed.down = false; else player.speed.down = true;
} else player.speed.down = true;
}
}
function update() {
if (keys[38] && !keys[37] && !keys[39]) {
if (player.speed.up) player.position.y += player.speed.normal;
}
if (keys[40] && !keys[37] && !keys[39]) {
if (player.speed.down) player.position.y -= player.speed.normal;
}
if (keys[37] && !keys[38] && !keys[40]) {
if (player.speed.left) player.position.x += player.speed.normal;
}
if (keys[39] && !keys[38] && !keys[40]) {
if (player.speed.right) player.position.x -= player.speed.normal;
}
if (keys[38] && keys[37]) {
if (player.speed.up) player.position.y += player.speed.diagonal;
if (player.speed.left) player.position.x += player.speed.diagonal;
}
if (keys[38] && keys[39]) {
if (player.speed.up) player.position.y += player.speed.diagonal;
if (player.speed.right) player.position.x -= player.speed.diagonal;
}
if (keys[40] && keys[37]) {
if (player.speed.down) player.position.y -= player.speed.diagonal;
if (player.speed.left) player.position.x += player.speed.diagonal;
}
if (keys[40] && keys[39]) {
if (player.speed.down) player.position.y -= player.speed.diagonal;
if (player.speed.right) player.position.x -= player.speed.diagonal;
}
}
player.position.init()
class solid {
type;
x;
y;
width;
height;
constructor(type, x, y, width, height) {
this.type = type;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
}
const objects = {
barils: [new solid("baril", 100, 300, 60, 60), new solid("baril", 800, 600, 60, 60)]
}
console.log(objects)
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "green";
context.fillRect(player.position.real.x, player.position.real.y, player.proportion.width, player.proportion.height);
objects.barils.forEach(element => {
context.fillStyle = "red";
context.fillRect(element.x - player.position.x, element.y - player.position.y, element.width, element.height)
createBlock(element.x - player.position.x, element.y - player.position.y, element.width, element.height)
});
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
loop();