318 lines
6.9 KiB
JavaScript
318 lines
6.9 KiB
JavaScript
console.log("BALLLLLLLLS");
|
|
|
|
let canvas = document.getElementById('scene');
|
|
let ctx = canvas.getContext("2d");
|
|
|
|
|
|
let resizeCanvas = () => {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resizeCanvas()
|
|
|
|
|
|
let onResize = (event) => {
|
|
resizeCanvas()
|
|
}
|
|
|
|
window.addEventListener('resize', onResize);
|
|
|
|
let touché = 100000000;
|
|
//let hitSound = new Audio("/user/themes/quark/images/son/hit.mp3");
|
|
|
|
|
|
let tps = 0;
|
|
let timer = setInterval(() => {
|
|
tps++;
|
|
console.log(tps);
|
|
if (tps <= 0) {
|
|
clearInterval(timer);
|
|
console.log("NOOOO TIME");
|
|
}
|
|
}, 1000);
|
|
|
|
// let tps = 60;
|
|
// let timer = null;
|
|
|
|
// let tpsTableau = [10, 30, 60, 120];
|
|
// const ui = document.getElementById("ui");
|
|
|
|
// tpsTableau.forEach(valeur => {
|
|
// const bouton = document.createElement("button");
|
|
// bouton.textContent = `${valeur} sec`;
|
|
// bouton.dataset.time = valeur;
|
|
|
|
// bouton.addEventListener("click", () => {
|
|
// console.log("CA CLIQUE OUUUUU");
|
|
// lancerTimer(valeur);
|
|
// });
|
|
|
|
// ui.appendChild(bouton);
|
|
// });
|
|
|
|
// function lancerTimer(valeur) {
|
|
// clearInterval(timer); // stop ancien timer
|
|
// tps = valeur;
|
|
|
|
// timer = setInterval(() => {
|
|
// tps--;
|
|
|
|
// if (tps <= 0) {
|
|
// clearInterval(timer);
|
|
// tps = 0;
|
|
// console.log("NOOOO TIME");
|
|
// }
|
|
// }, 1000);
|
|
// }
|
|
|
|
|
|
|
|
|
|
class P1 {
|
|
constructor(x, y, s) {
|
|
this.pos = {
|
|
x: x,
|
|
y: y
|
|
}
|
|
this.size = s
|
|
this.vx = 20
|
|
this.vy = 20
|
|
// this.img = new Image();
|
|
// this.img.onload = () => {
|
|
// this.draw();
|
|
// };
|
|
// this.img.src = "/user/themes/quark/images/perso.png";
|
|
// console.log("img", this.img.src);
|
|
this.imgNormal = new Image();
|
|
this.imgNormal.src = "/user/themes/quark/images/perso.png";
|
|
|
|
this.imgsad = new Image();
|
|
this.imgsad.src = "/user/themes/quark/images/persosad.png";
|
|
|
|
this.img = this.imgNormal;
|
|
|
|
this.isTouched = false;
|
|
|
|
}
|
|
|
|
draw() {
|
|
ctx.drawImage(this.img, this.pos.x, this.pos.y, this.size, this.size);
|
|
}
|
|
|
|
bong(){
|
|
// if(this.pos.x >= canvas.width || this.pos.x <= 0){
|
|
// this.pos.x = 0;
|
|
// this.vx = Math.abs(this.vx);
|
|
// // this.vx = -this.vx;
|
|
// console.log("ça touche :(");
|
|
// }
|
|
// if(this.pos.y >= canvas.height || this.pos.y <= 0){
|
|
// this.vy = -this.vy;
|
|
// console.log("ça touche :(");
|
|
// }
|
|
if (this.pos.x <= 0) {
|
|
this.pos.x = 0;
|
|
// this.vx = Math.abs(this.vx);
|
|
}
|
|
|
|
if (this.pos.x >= canvas.width-50) {
|
|
this.pos.x = canvas.width-50;
|
|
// this.vx = -Math.abs(this.vx);
|
|
}
|
|
if (this.pos.y <= 0) {
|
|
this.pos.y = 0;
|
|
// this.vy = Math.abs(this.vy);
|
|
}
|
|
if (this.pos.y >= canvas.height-50) {
|
|
this.pos.y = canvas.height-50;
|
|
// this.vy = -Math.abs(this.vy);
|
|
}
|
|
|
|
this.draw();
|
|
}
|
|
|
|
hit() {
|
|
if (this.isTouched) return;
|
|
|
|
this.isTouched = true;
|
|
this.img = this.imgsad;
|
|
|
|
setTimeout(() => {
|
|
this.img = this.imgNormal;
|
|
this.isTouched = false;
|
|
}, 400);
|
|
}
|
|
|
|
}
|
|
|
|
let p1 = [];
|
|
let monP1;
|
|
function createP1() {
|
|
monP1 = new P1(
|
|
canvas.width/2,
|
|
canvas.height/2,
|
|
50
|
|
);
|
|
monP1.draw() ;
|
|
p1.push(monP1);
|
|
}
|
|
|
|
createP1();
|
|
let hitSound;
|
|
|
|
window.addEventListener("keydown", (event) => {
|
|
if (!hitSound) {
|
|
hitSound = new Audio("/user/themes/quark/images/son/hit.mp3");
|
|
}
|
|
|
|
if (event.key === "ArrowLeft") {
|
|
monP1.pos.x -= monP1.vx
|
|
//console.log("gauche");
|
|
}
|
|
|
|
if (event.key === "ArrowRight") {
|
|
monP1.pos.x += monP1.vx
|
|
//console.log("droite");
|
|
}
|
|
|
|
if (event.key === "ArrowUp") {
|
|
monP1.pos.y -= monP1.vy
|
|
//console.log("haut");
|
|
}
|
|
if (event.key === "ArrowDown") {
|
|
monP1.pos.y += monP1.vy
|
|
//console.log("bas");
|
|
}
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
monP1.draw();
|
|
monP1.bong();
|
|
});
|
|
|
|
class Boule {
|
|
constructor(x, y, s) {
|
|
// this.x = x;
|
|
// this.y = y;
|
|
this.pos = {
|
|
x: x,
|
|
y: y
|
|
}
|
|
this.size = s
|
|
this.vx = -10+Math.random()*10;
|
|
this.vy = -10+Math.random()*10;
|
|
// this.color = 'hsl(360, 50%, 50%)'
|
|
this.color = {
|
|
h:0,
|
|
s:0,
|
|
l:100
|
|
}
|
|
}
|
|
|
|
draw(){
|
|
ctx.globalCompositeOperation = this.blend;
|
|
ctx.beginPath();
|
|
ctx.fillStyle = `hsl(${this.color.h},${this.color.s}%,${this.color.l}%)`;
|
|
ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
}
|
|
|
|
move(){
|
|
this.pos.x += this.vx;
|
|
this.pos.y += this.vy;
|
|
|
|
if(this.pos.x >= canvas.width || this.pos.x <= 0){
|
|
this.vx *= -1;
|
|
}
|
|
if(/* this.pos.y >= canvas.height || */ this.pos.y <= 0){
|
|
this.vy *= -1;
|
|
}
|
|
|
|
this.draw();
|
|
}
|
|
}
|
|
|
|
let boules = [];
|
|
|
|
|
|
let maboule;
|
|
function createBoule(){
|
|
maboule = new Boule(
|
|
canvas.width, // Math.random()*canvas.width,
|
|
canvas.height, // Math.random()*canvas.height,
|
|
2+Math.random()*10
|
|
);
|
|
maboule.draw();
|
|
boules.push(maboule);
|
|
}
|
|
|
|
setInterval(()=>{
|
|
createBoule();
|
|
}, 500)
|
|
|
|
|
|
function collisionP1Boule(p1, boule) {
|
|
let dx = (p1.pos.x + p1.size / 2) - boule.pos.x;
|
|
let dy = (p1.pos.y + p1.size / 2) - boule.pos.y;
|
|
|
|
let distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
return distance < (p1.size / 2 + boule.size);
|
|
}
|
|
|
|
let anime = () => {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
for (let i = 0; i < boules.length; i++) {
|
|
for (let j = i + 1; j < boules.length; j++) {
|
|
let a = boules[i];
|
|
let b = boules[j];
|
|
|
|
let dist = Math.hypot(b.pos.x - a.pos.x, b.pos.y - a.pos.y);
|
|
|
|
if (dist < a.size + b.size) {
|
|
let nx = (b.pos.x - a.pos.x) / dist;
|
|
let ny = (b.pos.y - a.pos.y) / dist;
|
|
|
|
let vA = a.vx * nx + a.vy * ny;
|
|
let vB = b.vx * nx + b.vy * ny;
|
|
|
|
a.vx += (vB - vA) * nx;
|
|
a.vy += (vB - vA) * ny;
|
|
b.vx += (vA - vB) * nx;
|
|
b.vy += (vA - vB) * ny;
|
|
}
|
|
}
|
|
}
|
|
|
|
for (let i = boules.length - 1; i >= 0; i--) {
|
|
let boule = boules[i];
|
|
|
|
boule.move();
|
|
|
|
if (collisionP1Boule(monP1, boule)) {
|
|
touché--;
|
|
monP1.hit();
|
|
console.log("touhché bouuuuuh");
|
|
|
|
if (hitSound) {
|
|
hitSound.currentTime = 0;
|
|
hitSound.play();
|
|
}
|
|
|
|
boules.splice(i, 1);
|
|
}
|
|
}
|
|
|
|
monP1.draw();
|
|
|
|
ctx.fillStyle = "white";
|
|
ctx.font = "20px Arial";
|
|
ctx.fillText("Boules touchées avant de perdre : " + touché + " (oui c'est beaucoup)", 20, 30);
|
|
ctx.fillText("Timer : " + tps + " secondes (oupsi ça augmente)", 20, 60);
|
|
ctx.fillText("Esquive les boules de neige :D", canvas.width - 320, 30);
|
|
|
|
requestAnimationFrame(anime);
|
|
};
|
|
|
|
|
|
window.requestAnimationFrame(anime);
|
|
|