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
HTML/CSS/Javascript
Re: HTML/CSS/Javascript
Bonjour
Il faudrait publier le code complet pour qu'on puisse regarder.
Il faudrait publier le code complet pour qu'on puisse regarder.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php
https://www.toutjavascript.com/livre/index.php
Re: HTML/CSS/Javascript
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();
Re: HTML/CSS/Javascript
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é...
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é...
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php
https://www.toutjavascript.com/livre/index.php
Re: HTML/CSS/Javascript
J'ai modifié la fonction loop :
Mais je n'arrive toujours pas à avoir la collision entre le rond et le carré...
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();
Re: HTML/CSS/Javascript
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
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
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php
https://www.toutjavascript.com/livre/index.php
Re: HTML/CSS/Javascript
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
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();