HTML/CSS/Javascript

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
MB96
Messages : 5
Enregistré le : 05 avr. 2020, 21:24

HTML/CSS/Javascript

Message par MB96 » 06 avr. 2020, 17:29

Bonjour,

J'ai fait mon code html/css/javascript. Sauf que j'ai une erreur dans le code car ce qui doit apparaitre doit être mis verticalement (rond, carré, lignes...) sauf que j'ai tout horizontalement. Est ce que quelqu'un trouverait l'erreur que j'ai fait ?

Merci

Code : Tout sélectionner


<!DOCTYPE html>
<html lang="fr">

  <head>
    <meta charset="utf-8">
    <meta name="description" content="Modélisation d'un processus biologique simplifié sur une page web" /> 
    <meta name="author" content="M" />
    <title>Modélisation d'un processus biologique - Sujet 9</title>
    <link rel="stylesheet" href="Projet.css">
  </head>

  <body>
    <h1>Modélisation d'un processus biologique : Sujet 9</h1>
    
    <p>
      <input type="button" id="debut" value="Commencer la simulation" onclick="animation(), timer()"/>
      <input type="button" id="fin" value="Arrêter la simulation" onclick="resultats()"/>
      <input type="button" id="reset" value="Reset" onclick="reset()"/>
    </p>

    <div>
      <canvas id="c1"></canvas>
    </div> 

    <script src="tests.js"></script>
  
    <footer>
      <p>Université </p>
    </footer>

  </body>

</html>

Code : Tout sélectionner

html, body {
  margin: 0;
}

html {
  font-family: Helvetica;
  height: 100%;
}

body {
  overflow: hidden;
  height: inherit;
  text-align: center;
}

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

footer {
  line-height: 0%;
  margin-bottom: 2%;
  font-size: 14pt;
  font-style: italic;
  color:red;
}

Code : Tout sélectionner

////////////////////////////////////// Fonctions //////////////////////////////////////////

//-------------Création des classes pour les neurotransmetteurs, les récepteurs---------//

// Création classe Neurotransmetteur
class NeuroT {
    constructor(x, y, velY, color, size, list) {
        this.x = x;
        if (list.includes(y)) {
            y -= 40
            if (list.includes(y)) {
                y -= 40
            }
        }
        list.push(y)
        this.y = y;
        this.velY = velY;
        this.color = color;
        this.size = size;
    }

    // Dessiner sur le canevas
    draw() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fill();
    }

    // Affichage sur le Canevas en adaptant la position de l'objet à la vitesse
    afficher() {
        this.y += this.velY;
    }
}

// Création classe récepteur
class Recepteur {
    constructor(x, y, velY, color, size) {
        this.x = x;
        this.y = y;
        this.velY = velY;
        this.color = color;
        this.size_l = size;
        this.size_L = size;
    }
    
    // Dessiner sur le canevas
    draw() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.size_l, this.size_L);
        ctx.fill();
    }

    // Affichage sur le Canevas en adaptant la position de l'objet à la vitesse
    afficher() {
        this.y += this.velY;
    }

    // Détection de l'arrivée d'un neurotransmetteur sur un recepteur fermé 
    /// et transformation en récepteur ouvert mobile
    detecter() {
        for (let i = 0; i < neuro_transmetteurs.length; i++) {
            let distance = neuro_transmetteurs[i].y + neuro_transmetteurs[i].size;
            if (this.y <= distance - 30 && neuro_transmetteurs[i].x > this.x - 30 && neuro_transmetteurs[i].x < this.x + 30) {
                this.color = 'rgb(' + 60 + ',' + 179 + ',' + 113 + ')';
                this.size_l = 60;
                this.velY = 1;
            }
        }
    }
}

//-----------------------------Fonctions pour la page --------------------------------//

// Rafraichir la page
function reset() {
    window.location.reload();
}

// Résultat de la simulation et rafraichissement de la page
function resultats() {
    let nb_ouverts = 0;
    for (el of recepteurs) {
        if (el.size_l === 60) {
            nb_ouverts += 1;
        }
    }
    alert("Simulation terminée !" + "\n" + "Avec " + neuro_transmetteurs.length + " neurotransmetteurs au départ. " + "Il y a " + nb_ouverts + " récepteurs ouverts sur " + recepteurs.length + " récepteurs.");
    reset();
}

// Timer de 2 minutes maximum pour la simulation
function timer() {
    setTimeout(resultats, 120000);
}

// Génération de nombre aléatoire
function random(min, max) {
    const num = Math.floor(Math.random() * (max - min)) + min;
    return num;
}

// Les 18 positions possibles pour les récepteurs
function positionner() {
    let pos = 40;
    positions.push(pos);
    for (let i = 1; i <= 17; i++) {
        pos += 70;
        positions.push(pos);
    }
}

// Mélange des positions pour placer les récepteurs aléatoirement
function random_x(positions_possibles) {
    let x = positions_possibles;
    for (let i = x.length - 1; i >= 1; i--) {
        let hasard = Math.floor(Math.random() * (i + 1));
        let autres_lignes = x[i];
        x[i] = x[hasard];
        x[hasard] = autres_lignes;
    }
    console.log(x);
    return x;
}

// Rangement des neurotransmetteurs en fonction de leurs positions dans chaque colonne 
function ordonner(neuro_transmetteurs) {
    let index = 0;
    for (let i = 1; i < neuro_transmetteurs.length; i++) {
        for (let k = i + 1; k < neuro_transmetteurs.length; k++) {
            index = i;
            let neuro = neuro_transmetteurs[k];
            if (neuro_transmetteurs[index].x === neuro.x) {
                if (neuro.y >= neuro_transmetteurs[index].y) {
                    index = k;
                }
            }
            autres_lignes = neuro_transmetteurs[index];
            neuro_transmetteurs[index] = neuro_transmetteurs[i];
            neuro_transmetteurs[i] = autres_lignes;
        }
    }
}

//-----------------------------Fonctions pour l'affiche des objets --------------------------// 

function initialiser() {

    // Dessine le canevas
    ctx.fillStyle = 'rgba(255, 245, 245, 0.25)';
    ctx.fillRect(0, 0, width, height);

    // Dessine la limite pré synaptique
    ctx.beginPath();
    ctx.lineWidth = '3';
    ctx.moveTo(30, height * 0.40);
    ctx.lineTo(width - 30, height * 0.40);
    ctx.stroke();

    // Dessine la limite post synaptique
    ctx.lineWidth = '3';
    ctx.moveTo(30, height * 0.83);
    ctx.lineTo(width - 30, height * 0.83);
    ctx.stroke();

    // Dessine les neurotransmetteurs
    for (let i = 0; i < neuro_transmetteurs.length; i++) {
        neuro_transmetteurs[i].draw();
    }

    // Dessine les récepteurs
    for (let i = 0; i < recepteurs.length; i++) {
        recepteurs[i].draw();
    }
}

//--------------------------------Fonctions pour l'animation -----------------------------//

function animation() {
    initialiser()
    let interval = 5000;

    // Actualise les neurotransmetteurs et les fait partir à intervalle régulier
    for (let i = 0; i < neuro_transmetteurs.length; i++) {
        setInterval(function () { neuro_transmetteurs[i].velY = 1; }, interval);
        neuro_transmetteurs[i].draw();
        neuro_transmetteurs[i].afficher();
        interval += 5000;
    }

    // Actualise les récepteurs
    for (let i = 0; i < recepteurs.length; i++) {
        recepteurs[i].draw();
        recepteurs[i].afficher();
        recepteurs[i].detecter();
    }
    requestAnimationFrame(animation);
}

//////////////////////////////////////// PROGRAMME ///////////////////////////////////////

// Mise en place du Canevas
const canvas = document.querySelector('c1');
const ctx = c1.getContext('2d');

const width = c1.width = window.innerWidth * 0.70;
const height = c1.height = window.innerHeight * 0.70;

// Création des récepteurs
// Ils sont positionnés aléatoirement

let recepteurs = [];
let nombre_Rec = random(12, 19);
let positions = [];

positionner();

let x_recepteur = random_x(positions);
let x_copie = []

for (let i = 0; i < nombre_Rec; i++) {
    const size = 40;
    let carre = new Recepteur(
        x_recepteur[i],
        height * 0.80,
        0,
        'rgb(' + 30 + ',' + 144 + ',' + 255 + ')',
        size
    );
    x_copie.push(x_recepteur[i])
    recepteurs.push(carre);
}

// Création des neurotransmetteurs

let neuro_transmetteurs = [];
let nombre_NT = random(20, 31);
let premiere_ligne = x_copie;
let autres_lignes = x_copie.concat(x_copie);
let nb = nombre_Rec;
let coord = {};
let n;

const size = 15;
while (neuro_transmetteurs.length < nombre_NT) {
    let x_NT;
    if (premiere_ligne.length != 0) {
        n = Math.floor(Math.random() * premiere_ligne.length);
        x_NT = premiere_ligne[n] + 20;
        premiere_ligne.splice(n, 1);
    }
    else {
        n = Math.floor(Math.random() * autres_lignes.length);
        x_NT = autres_lignes[n] + 20;
        autres_lignes.splice(n, 1);
    }
    nb -= 1;
    if (coord[x_NT] == undefined) {
        coord[x_NT] = [];
    }
    let cercle = new NeuroT(
        x_NT,
        height * 0.35,
        0,
        'rgb(' + 255 + ',' + 165 + ',' + 0 + ')',
        size,
        coord[x_NT]
    );
    neuro_transmetteurs.push(cercle);
}
ordonner(neuro_transmetteurs);

// Appels de fonctions
initialiser();



Répondre