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();