HTML/CSS/Javascript

MB96 · Message par **MB96** » 05 avr. 2020, 21:31

Bonjour,

Je dois réaliser un code en html/css/javascript. Je dois faire apparait 25 ronds orange alignés verticalement sur plusieurs colonnes , 15 carrés bleu alignés verticalement sur 1 ligne (qui ne bougent pas). Au bout de maximum 1min, je dois avoir un rond orange qui se déplace horizontalement (de la gauche vers la droite). Si il entre en collision avec un carré bleu j'ai un rectangle vert qui apparait à la place. Et le rectangle vert doit sortir du canvas vers la droite.

J'ai fait mon code html et css. Pour le code javascript, je fais apparaitre les ronds et les carrés mais ils ne sont pas alignés. Est ce que quelqu'un pourrait m'aider pour que les ronds et les carrés soient alignés correctement. Et pour la collision entre les ronds et les carrés ?

Merci

Message par **webmaster** » 06 avr. 2020, 10:04

Bonjour

Il faudrait publier le code complet pour qu'on puisse regarder.

MB96 · Message par **MB96** » 06 avr. 2020, 10:48

Code : Tout sélectionner

Mon code HTML : 

<!DOCTYPE html>
<html>
  <head>
    <!-- En tête de la page --> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Projet réalisé pour la matière Web Avancé.">
    <title>Modelisation processus biologique</title>
    <style>
      body{
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
        overflow: hidden;
      }

      #c1{
          background-color: white;
      }

  </style>
  <link rel="stylesheet" href="Projet.css">
  </head>
  
  <body>
    <!-- Corps de la page -->
    <h1>Modelisation processus biologique</h1>
    <p>Espace pré-synaptique
      Espace inter-synaptique
      Espace post-synaptique
    </p>
    <div class="container">
      <canvas id="c1" style='background:white'></canvas>
    </div>
    <script src="tests.js"></script> 
  </body>
</html>





Mon code CSS :

html, body {
    margin: 0;
  }
  
  html {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
  }
  
  body {
    overflow: hidden;
    height: inherit;
  }

  h1 {
    text-align: center;
	  color:pink;
	  border-radius: 10px;
	  border: 3px dotted red;
	  padding-top: 3%; 
	  padding-bottom: 3%; 
    background-color: rgb(199, 35, 103); 
  }

  p {
    text-align: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-style: italic;
    color: red;
  }




Mon code Javascript:

var canvas = document.getElementById('c1');
var ctx = c1.getContext('2d');

var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

function random(min,max) {
    const num = Math.floor(Math.random()*(max-min))+min;
    return num;
}

class Ball {
    constructor(x, y, velX, velY, color, size) {
        this.x = 450;
        this.y = y;
        this.velX = velX;
        this.velY = 0;
        this.color = 'orange';
        this.size = 15;
    }
  
    draw() {
        ctx.beginPath();
        ctx.fillStyle = 'orange';
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fill();
    }

    update() {
        if ((this.x + this.size) >= width) {
           this.velX = -(this.velX);
        }

        if ((this.x - this.size) <= 0) {
            this.velX = -(this.velX);
        }

        if ((this.y + this.size) >= height) {
            this.velY = -(this.velY);
         }
         
        if ((this.y - this.size) <= 0) {
            this.velY = -(this.velY);
        }
  
        this.x += this.velX;
        this.y += this.velY;
    }
}

var balls = [];


while (balls.length < 25) {
    const size = random(15,15);
    let ball = new Ball(
       // ball position always drawn at least one ball width
       // away from the edge of the canvas, to avoid drawing errors
       random(0 + size,width - size),
       random(0 + size,height - size),
       random(-7,7),
       random(-7,7),
       'orange',
       size
    );
    balls.push(ball);
}

class Carre {
    constructor(x, y, velX, velY, color, size) {
        this.x = x;
        this.y = y;
        this.velX = 0;
        this.velY = 0;
        this.color = 'blue';
        this.size = 40;
    }
  
    draw() {
        ctx.beginPath();
        ctx.fillStyle = 'blue';
        ctx.fillRect(this.x,this.y,40,40);
        ctx.fill();
    }
}

var carres = [];

while (carres.length < 15) {
    const size = random(10,10);
    let carre = new Carre(
       random(0,width),
       random(0,height),
       random(-10,10),
       random(-10,10),
       'blue',
       size
    );
    carres.push(carre);
}

class Rectangle {
    constructor(x, y, velX, velY, color, size) {
        this.x = x;
        this.y = y;
        this.velX = 0;
        this.velY = 0;
        this.color = 'green';
        this.size = size;
    }
  
    draw() {
        ctx.fillStyle = 'green';
        ctx.fillRect(1100, 85, 60, 40);
    }

    update() {
        if ((this.x + this.size) >= width) {
           this.velX = -(this.velX);
        }

        if ((this.x - this.size) <= 0) {
            this.velX = -(this.velX);
        }

        if ((this.y + this.size) >= height) {
            this.velY = -(this.velY);
         }
   
         if ((this.y - this.size) <= 0) {
            this.velY = -(this.velY);
        }
  
        this.x += this.velX;
        this.y += this.velY;
    }

    collisionDetect(){
        for (let k=0; k<rectangles.length; k++){
            if(!(this===rectangles[k])){
                const dx = this.x - carres[k].x ;
                const dy = this.y - carres[k].y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                if (distance<balls[k].size + carres[k].size){
                    rectangles[k].color = this.color = 'green';
                }
            }
        }
    }
}

var rectangles = [];

while (rectangles.length < 15) {
    const size = random(60,40);
    let rectangle = new Rectangle(
       random(0 + size,width - size),
       random(0 + size,height - size),
       random(-10,10),
       random(-10,10),
       'green',
       size
    );
    rectangles.push(rectangle);
}

function loop() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, width , height);
 
    for (let i = 0; i < balls.length; i++) {
      balls[i].draw();
      balls[i].update();

    for (let k=0; k<balls.length; k++){
        if(!(this===balls[k])){
            const dx = this.x - carres[k].x ;
            const dy = this.y - carres[k].y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            if (distance<balls[k].size + carres[k].size){
                rectangles[k].color = this.color = 'green';
                
            }
        }
    }

    for(let j=0; j< carres.length; j++){
        carres[j].draw();
    }
    requestAnimationFrame(loop);
} 
loop();

Message par **webmaster** » 06 avr. 2020, 11:06

Ok,

j'ai tout remis dans un seul fichier html
https://www.toutjavascript.com/user/mb96.html

Il faut toujours ouvrir la console du navigateur pour voir les erreurs et la ligne concernée
voir le tuto :
https://www.toutjavascript.com/savoir/n ... script.php

Il y avait plusieurs erreurs faciles a corriger :
Il manquait un } à la ligne 247

Il reste une erreur dans loop();
this n'existe pas : c'est l'objet surlequel s'applique la méthode
mais loop n'est pas une méthode

Je suis curieux de voir le resultat finalisé...

MB96 · Message par **MB96** » 06 avr. 2020, 11:26

J'ai modifié la fonction loop :

Code : Tout sélectionner

function loop() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, width , height);

    for(let i=0; i< carres.length; i++){
        carres[i].draw();
    }

    for (let i = 0; i < balls.length; i++) {
        
        if(!(this===balls[i])){
            const dx = this.x - carres.x ;
            const dy = this.y - carres.y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            if (distance<carres.size){
                rectangles[i].color = this.color = 'green';
            }
        }
        balls[i].draw();
        balls[i].update();
    }
    requestAnimationFrame(loop);
} 
loop();

Mais je n'arrive toujours pas à avoir la collision entre le rond et le carré...

Message par **webmaster** » 06 avr. 2020, 11:34

Il faudrait faire un test avec un seul rond/carré pour afficher les coordonnées

Je ne vois pas d'appel à rectangle.collisionDetect dans le code non plus.

Ce code manque de commentaire pour savoir ou chercher.

Mais ca progresse

MB96 · Message par **MB96** » 06 avr. 2020, 14:00

J'ai apporté des modifications.

Mais ma fonction loop ne fonctionne toujours pas. Je n'ai toujours pas la collision entre les ronds et les carrés

Code : Tout sélectionner

//----------------------- Initialisation canvas-----------------------------------//

var canvas = document.getElementById('c1');
var ctx = c1.getContext('2d');

var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

function random(min,max) {
    const num = Math.floor(Math.random()*(max-min))+min;
    return num;
}

// ------------------------------------- LES BALLES ---------------------------------------------------------//

class Ball {
    constructor(x, y, velX, velY, color, size) {
        this.x = 450;
        this.y = y;
        this.velX = velX;
        this.velY = 0;
        this.color = 'orange';
        this.size = 15;
    }
  
    draw() {
        ctx.beginPath();
        ctx.fillStyle = 'orange';
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fill();
    }

//Déplacement des ronds oranges horizontalement
    update() {
        if ((this.x + this.size) >= width) {
           this.velX = -(this.velX);
        }

        if ((this.x - this.size) <= 0) {
            this.velX = -(this.velX);
        }

        if ((this.y + this.size) >= height) {
            this.velY = -(this.velY);
         }
         
        if ((this.y - this.size) <= 0) {
            this.velY = -(this.velY);
        }
  
        this.x += this.velX;
        this.y += this.velY;
    }
}

var balls = [];

//Création de 25 ronds oranges
while (balls.length < 25) {
    const size = random(15,15);
    let ball = new Ball(
       random(0 + size,width - size),
       random(0 + size,height - size),
       random(-7,7),
       random(-7,7),
       'orange',
       size
    );
    balls.push(ball);
}

 
// -------------------------------------- LES CARRES ----------------------------------------------------------//
 
//Création des carrés bleus
class Carre {
    constructor(x, y, velX, velY, color, size) {
        this.x = x;
        this.y = y;
        this.velX = 0;
        this.velY = 0;
        this.color = 'blue';
        this.size = 40;
    }
  
    draw() {
        ctx.beginPath();
        ctx.fillStyle = 'blue';
        ctx.fillRect(this.x,this.y,40,40);
        ctx.fill();
    }
}

var carres = [];

//Création de 15 carrés bleus
while (carres.length < 15) {
    const size = random(10,10);
    let carre = new Carre(
       random(0,width),
       random(0,height),
       random(-10,10),
       random(-10,10),
       'blue',
       size
    );
    carres.push(carre);
}

// -------------------------------------- LES RECTANGLES ----------------------------------------------------------//

class Rectangle {
    constructor(x, y, velX, velY, color, size) {
        this.x = x;
        this.y = y;
        this.velX = 0;
        this.velY = 0;
        this.color = 'green';
        this.size = size;
    }
  
    draw() {
        ctx.fillStyle = 'green';
        ctx.fillRect(1100, 85, 60, 40);
    }

//Déplacement des rectangles verts horizontalement
    update() {
        if ((this.x + this.size) >= width) {
           this.velX = -(this.velX);
        }

        if ((this.x - this.size) <= 0) {
            this.velX = -(this.velX);
        }

        if ((this.y + this.size) >= height) {
            this.velY = -(this.velY);
         }
   
         if ((this.y - this.size) <= 0) {
            this.velY = -(this.velY);
        }
  
        this.x += this.velX;
        this.y += this.velY;
    }

}

var rectangles = [];

//Création de 15 rectangles verts
while (rectangles.length < 15) {
    const size = random(60,40);
    let rectangle = new Rectangle(
       random(0 + size,width - size),
       random(0 + size,height - size),
       random(-10,10),
       random(-10,10),
       'green',
       size
    );
    rectangles.push(rectangle);
}

// ------------------------------------- L'ANIMATION ---------------------------------------------------------//

function loop() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, width , height);

    for(let i=0; i< carres.length; i++){
        carres[i].draw();
    }

    for (let j = 0; j < balls.length; j++) {
        balls[j].draw();
        balls[j].update();

        if(!(this===balls[j])){
            const dx = this.x - carres[j].x ;
            const dy = this.y - carres[j].y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            if (distance<carres[j].size){
                rectangles[j].color = this.color = 'green';
                
            }
        }

    }
    requestAnimationFrame(loop);
} 
loop();

Forums Tout JavaScript

HTML/CSS/Javascript

HTML/CSS/Javascript

Re: HTML/CSS/Javascript

Re: HTML/CSS/Javascript

Re: HTML/CSS/Javascript

Re: HTML/CSS/Javascript

Re: HTML/CSS/Javascript

Re: HTML/CSS/Javascript