Djalim Simaila
904d8daee6
All checks were successful
DEPLOY / deploy (push) Successful in 12s
- Change "Surprise :)" link to "Vibe check" across multiple HTML files for consistency and clarity. - Add a new "about.html" page to provide information about the author. - Introduce a new "quizz.html" page for user interaction and engagement. - Create new project pages for "Lieutenant Champignon" and "Pong" to showcase additional projects. - Remove outdated project pages and links to streamline the project section. - Add new assets including images and PDFs to enhance content presentation. - Update JavaScript functions for form validation and score calculation in the quizz page. - Improve styling in CSS for better visual hierarchy and layout consistency.
256 lines
9.1 KiB
HTML
256 lines
9.1 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<title>Homepage</title>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
<script src="/static/js/utils.js" defer></script>
|
|
<script language="javascript" defer>
|
|
function getSinus(angle) {
|
|
return Math.sin(angle);
|
|
}
|
|
|
|
function getCosinus(angle) {
|
|
return Math.cos(angle);
|
|
}
|
|
|
|
class Player {
|
|
constructor(
|
|
x,
|
|
y,
|
|
width,
|
|
height,
|
|
color,
|
|
speed,
|
|
upKey,
|
|
downKey,
|
|
canvas,
|
|
) {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.width = width;
|
|
this.height = height;
|
|
this.color = color;
|
|
this.speed = speed;
|
|
this.upKey = upKey;
|
|
this.downKey = downKey;
|
|
this.movingUp = false;
|
|
this.movingDown = false;
|
|
this.points = 0;
|
|
this.canvas = canvas;
|
|
}
|
|
|
|
draw(ctx) {
|
|
ctx.fillStyle = this.color;
|
|
ctx.fillRect(this.x, this.y, this.width, this.height);
|
|
}
|
|
|
|
moveUp() {
|
|
this.y -= this.speed;
|
|
}
|
|
moveDown() {
|
|
this.y += this.speed;
|
|
}
|
|
move() {
|
|
if (this.movingUp && this.y > 0) {
|
|
this.moveUp();
|
|
}
|
|
if (
|
|
this.movingDown &&
|
|
this.y < this.canvas.height - this.height
|
|
) {
|
|
this.moveDown();
|
|
}
|
|
}
|
|
updateKeys(event) {
|
|
this.movingUp =
|
|
event.key == this.upKey && event.type == "keydown";
|
|
this.movingDown =
|
|
event.key == this.downKey && event.type == "keydown";
|
|
}
|
|
}
|
|
|
|
class Ball {
|
|
constructor(x, y, radius, color, speed) {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.radius = radius;
|
|
this.color = color;
|
|
this.horizontal_speed = speed;
|
|
this.vertical_speed = speed;
|
|
this.default_speed = speed;
|
|
this.angle = Math.random() * 2 * Math.PI;
|
|
}
|
|
|
|
reset() {
|
|
this.angle = Math.random() * 2 * Math.PI;
|
|
this.x = 450;
|
|
this.y = 250;
|
|
this.horizontal_speed = this.default_speed;
|
|
this.vertical_speed = this.default_speed;
|
|
}
|
|
|
|
draw(ctx) {
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
|
|
ctx.fillStyle = this.color;
|
|
ctx.fill();
|
|
}
|
|
|
|
move() {
|
|
this.x += this.horizontal_speed * getCosinus(this.angle);
|
|
this.y += this.vertical_speed * getSinus(this.angle);
|
|
}
|
|
}
|
|
|
|
class Game {
|
|
constructor(background_color, circle_color) {
|
|
this.background_color = background_color;
|
|
this.circle_color = circle_color;
|
|
this.canvas = document.createElement("canvas");
|
|
this.canvas.width = 900;
|
|
this.canvas.height = 500;
|
|
this.canvas.style.border = "5px solid #44475a";
|
|
this.canvas.style.borderRadius = "10px";
|
|
this.canvas.style.margin = "auto";
|
|
this.canvas.style.display = "block";
|
|
this.canvas.style.width = "70%";
|
|
document.querySelector("main").appendChild(this.canvas);
|
|
this.ctx = this.canvas.getContext("2d");
|
|
this.ball = new Ball(450, 250, 20, this.circle_color, 3);
|
|
this.Player1 = new Player(
|
|
10,
|
|
0,
|
|
20,
|
|
100,
|
|
"white",
|
|
3,
|
|
"z",
|
|
"s",
|
|
this.canvas,
|
|
);
|
|
this.Player2 = new Player(
|
|
870,
|
|
0,
|
|
20,
|
|
100,
|
|
"white",
|
|
3,
|
|
"ArrowUp",
|
|
"ArrowDown",
|
|
this.canvas,
|
|
);
|
|
}
|
|
|
|
colorBackground() {
|
|
this.ctx.fillStyle = this.background_color;
|
|
this.ctx.fillRect(0, 0, 900, 500);
|
|
this.ctx.fillStyle = "white";
|
|
this.ctx.font = "30px Arial";
|
|
this.ctx.fillText(this.Player1.points, 100, 50);
|
|
this.ctx.fillText(this.Player2.points, 800, 50);
|
|
}
|
|
|
|
draw() {
|
|
this.ball.draw(this.ctx);
|
|
this.Player1.draw(this.ctx);
|
|
this.Player2.draw(this.ctx);
|
|
}
|
|
|
|
colision() {
|
|
// Player collisions
|
|
if (
|
|
this.ball.x + this.ball.radius >= this.Player2.x &&
|
|
this.ball.y >= this.Player2.y &&
|
|
this.ball.y <= this.Player2.y + this.Player2.height
|
|
) {
|
|
this.ball.horizontal_speed *= -1.1;
|
|
}
|
|
|
|
if (
|
|
this.ball.x - this.ball.radius <=
|
|
this.Player1.x + this.Player1.width &&
|
|
this.ball.y >= this.Player1.y &&
|
|
this.ball.y <= this.Player1.y + this.Player1.height
|
|
) {
|
|
this.ball.horizontal_speed *= -1.1;
|
|
}
|
|
// Wall collisions
|
|
if (
|
|
this.ball.x + this.ball.radius >= 900 ||
|
|
this.ball.x - this.ball.radius <= 0
|
|
) {
|
|
if (this.ball.x + this.ball.radius >= 900) {
|
|
this.Player1.points += 1;
|
|
} else {
|
|
this.Player2.points += 1;
|
|
}
|
|
this.ball.reset();
|
|
}
|
|
if (
|
|
this.ball.y + this.ball.radius >= 500 ||
|
|
this.ball.y - this.ball.radius <= 0
|
|
) {
|
|
this.ball.vertical_speed *= -1;
|
|
}
|
|
}
|
|
|
|
step() {
|
|
this.colorBackground();
|
|
this.draw();
|
|
this.ball.move();
|
|
this.colision();
|
|
this.Player1.move();
|
|
this.Player2.move();
|
|
//this.Player1.y = this.ball.y - this.Player1.height / 2;
|
|
this.Player2.y = this.ball.y - this.Player2.height / 2;
|
|
}
|
|
}
|
|
|
|
function loadGame() {
|
|
const game = new Game("#282a36", "#6272a4");
|
|
|
|
document.addEventListener("keydown", function (event) {
|
|
game.Player1.updateKeys(event);
|
|
game.Player2.updateKeys(event);
|
|
});
|
|
document.addEventListener("keyup", function (event) {
|
|
game.Player1.updateKeys(event);
|
|
game.Player2.updateKeys(event);
|
|
});
|
|
|
|
setInterval(() => game.step(), 1);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="loadGame()">
|
|
<header>
|
|
<div class="links">
|
|
<a href="/" class="header_button">Home Page</a>
|
|
<a href="/projects.html" class="header_button">Projets</a>
|
|
<a href="/about.html" class="header_button">A propos de moi</a>
|
|
<a href="/quizz" class="header_button">Vibe check</a>
|
|
<a href="https://djalim.fr" class="header_button">Blog Perso</a>
|
|
</div>
|
|
<button
|
|
id="display_header_links"
|
|
onclick="toggle_all_header_links()"
|
|
>
|
|
▼
|
|
</button>
|
|
</header>
|
|
|
|
<main>
|
|
<p>Left player: z to go up and s to go down</p>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>
|
|
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
|
JavaScript ♥️
|
|
</p>
|
|
<p>©2025</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|