Let's see if you can help me, I'm creating a jeep that moves through a scene, the thing is that I want the collision with the edges of the vehicle's canvas to be detected and stop.
there is also a problem, the jeep must move through a scene, which is neither more nor less than a photograph, what I want is that when the jeep moves so does the photograph below it, in any case I have not been able to solve it , I have been looking at code and well.
Let's see what you can think of, I'll pass you the js
"use strict";
const clamp = (n, lo, hi) => n < lo ? lo : n > hi ? hi : n;
const tau = Math.PI * 2;
const canvas = document.createElement("canvas");
canvas.style.background = "#eee";
canvas.style.background="url('SUELO.png')";
canvas.style.backgroundRepeat = 'no-repeat';
const ctx = canvas.getContext("2d");
var img = new Image();
img.src = 'JEEP1.png';
var img2 = new Image();
img2.src = 'SUELO.png';
document.body.appendChild(canvas);
canvas.height = 400;
canvas.width = 400;
const map = {
height: 1000,
width: 2000,
images: ctx.drawImage(img2,10,10),
};
const viewport = {};
let kbd;
let ship;
//Let scenario;//variable de fondo
/*const scenario=function=(x,y,size,img2){//variable de prueba
this.x = x;
this.y = y;
this.size = size;
this.radius = size;
this.img2 = img2;
}*/
const Ship = function (x, y, angle, size, color) {
this.x = x;
this.y = y;
this.vx = 0;
this.vy = 0;
this.ax = 0;
this.ay = 0;
this.rv = 0;
this.angle = angle;
this.accelerationAmount = 0.01;
this.decelerationAmount = 0.01;
this.friction = 0.9;
this.rotationSpd = 0.0020;
this.size = size;
this.radius = size;
this.color = color;
};
Ship.prototype = {
//aceleración del vehiculo
accelerate: function (backwards) {
if (backwards) {
this.ax -= this.decelerationAmount;
this.ay -= this.decelerationAmount;
}
else {
this.ax += this.accelerationAmount;
this.ay += this.accelerationAmount;
}
},
//movimiento del vehiculo
move: function () {
this.angle += this.rv;
this.vx += this.ax;
this.vy += this.ay;
this.x += this.vx * Math.cos(this.angle);
this.y += this.vy * Math.sin(this.angle);
this.ax *= this.friction;
this.ay *= this.friction;
this.vx *= this.friction;
this.vy *= this.friction;
this.rv *= this.friction;
},
//rota el vehiculo
rotate: function (dir) {
if (dir === "left") {
this.rv -= this.rotationSpd;
}
else if (dir === "right") {
this.rv += this.rotationSpd;
}
},
draw: function (ctx, viewport) {
ctx.save();
ctx.translate(this.x + viewport.x,
this.y + viewport.y);
ctx.rotate(this.angle);
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(this.size / 1.2, 0);
ctx.stroke();
ctx.fillStyle = this.color;
ctx.drawImage(img,-25,-25,50,50)
// ctx.drawImage(img2,25,-20,2000,2000)
ctx.fillRect(
this.size / -2,
this.size / -2,
// this.drawImage(img, 0, 0, 10, 10),
this.size,
this.size
);
/* ctx.strokeRect(
this.size / -1,
this.size / -1,
this.size,
this.size
);*/
ctx.restore();
}
};
(function init() {
kbd = {
ctrl: false,
u: false,
d: false,
l: false,
r: false
};
ship = new Ship(
canvas.width / 2,
canvas.height / 2,
10, 10, "transparent",
);
})();
//mover jeep hacia abajo
document.addEventListener("keydown", e => {
if (e.keyCode === 37) {
kbd.l = true;
e.preventDefault();
}
else if (e.keyCode === 38) {
kbd.u = true;
e.preventDefault();
}
else if (e.keyCode === 39) {
kbd.r = true;
e.preventDefault();
}
else if (e.keyCode === 40) {
kbd.d = true;
e.preventDefault();
}
else if (e.keyCode === 32) {
kbd.space = true;
e.preventDefault();
}
});
//mover jeep hacia arriba
document.addEventListener("keyup", e => {
if (e.keyCode === 37) {
kbd.l = false;
e.preventDefault();
}
else if (e.keyCode === 38) {
kbd.u = false;
e.preventDefault();
}
else if (e.keyCode === 39) {
kbd.r = false;
e.preventDefault();
}
else if (e.keyCode === 40) {
kbd.d = false;
e.preventDefault();
}
else if (e.keyCode === 32) {
kbd.space = false;
e.preventDefault();
}
});
(function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (kbd.u) { ship.accelerate(); }
if (kbd.d) { ship.accelerate(true); }
if (kbd.l) { ship.rotate("left"); }
if (kbd.r) { ship.rotate("right"); }
ship.move();
viewport.x = clamp(
-ship.x + canvas.width / 2,
canvas.width - map.width, 0
);
viewport.y = clamp(
-ship.y + canvas.height / 2,
canvas.height - map.height, 0
);
for (let i = 0; i < map.height; i += 50) {
for (let j = 0; j < map.width; j += 50) {
if ((i / 50 + j / 50) & 1) {
ctx.drawImage(img2,-25,-25,50,50)
ctx.fillStyle = "hsl(" + (100 - (i + j) / 10) + ")";
//ctx.fillStyle = ctx.drawImage(img,-25,-25,500,500);//EXPERIMENTOS
ctx.fillRect(j + viewport.x, i + viewport.y, 13,13);
}
}
}
ship.draw(ctx, viewport);
requestAnimationFrame(update);
})();
body {
font-family: monospace;
font-size: 11px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
html, body {
height: 98%;
}
body > canvas {
margin: auto;
border: 4px solid #222;
}
body > div {
background: black;
color: red;
padding: 2px;
}
<div>arrow keys to move</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: monospace;
font-size: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
html, body {
height: 98%;
}
body > canvas {
margin: auto;
border: 4px solid #222;
}
body > div {
/*background: #222;*/
/*color: #fff;*/
padding: 2px;
/* background-image: url("JEEP1.png");
background-repeat: no-repeat;*/
}
</style>
</head>
<body>
<script src="jeep.js"></script>
</body>
</html>
I attach the github of the project so you can see it well
you can do it by detecting the position of the jeep in it by
canvas
adding this line to it
ship.draw
to avoid drawing outside the canvas!and for the background to move you just have to redraw the drawImage by adding this line to
ship.move
.I have investigated a bit and I have managed to get a game, here you can see it.
It could have been done with many more objects and reduce a lot of code, but in any case it is a good base to see collisions, how a canvas works and so on.
Here I give you a link.
Greetings to all and thanks for the answers, they have been very useful (I have found many solutions for moving the stage and also for changing the map if desired, but in this case I have taken the path of a static map, but the other I also know how to pull it off)
The game:
https://github.com/MMBBAA/Videogame-Mars-Jeep-V1