JSFiddle - React, Tailwind, and code Playground

by NSI_for_ever

HTML

<html>
   <head>
      <meta charset="utf-8">
      <title>  Canvas </title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <br>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div id='titre' class='jaune card'>TUTO CANVAS</div>
			
			<p>
			 <button id='bouton1' class='button'>
			 jeu
			 </button>
			</p>

      <p>
       <canvas id='canvas' class='card'></canvas>
      </p>
      
      <!--lien vers le fichier js-->
      <script src="fichier-javascript.js" type="application/javascript"></script>
   </body>
</html>

CSS

canvas {
    border: 1px dotted black;
		width:60%;
}

body{
     padding: 0px;
     margin: 0px;
}

p {
  padding:12px;
	text-align:center;
}


 #titre {
     top:0;
     text-align: center;
     font-size:55px;
     padding: 16px;
	 font-weight: bold;
     padding: 23px;
}



/*boutton*/
 .button{
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.12);
    border-radius:6px;
    background:#F5E68C;
    font-size:20px;
    padding:10px 10px;
    text-align:center;
    position:-webkit-sticky;
     position:sticky;
     top:0;
     width:auto;
     text-align:center;
     display: inline;
     margin-left: auto;
     margin-right: auto;
     opacity: 0.8;
    position:sticky;
}
 .button:hover{
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
    color:#060606;
    opacity: 1;
}


 .jaune{
    color:#000000;
    background-color:#FFCC00;
}

 .vert{
    color:#FFFFFF;
    background-color:#4CAF50;
}

 .fond-noir{
    color:white;
	text-align:center;
    background-color:black;
}

/*ombre*/
 .card{
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}

JavaScript

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

H = 300;
W = 300;

canvas.height = H;
canvas.width = W;

function drawBall(x, y,r) {
  ctx.beginPath();
  ctx.arc(x, y,r, 0, Math.PI * 2);
  ctx.fillStyle = '#FF0000';
  ctx.fill();
}

function drawRect(x, y,L,l) {
ctx.fillStyle = "orange";
ctx.fillRect(x,y,L,l);}

// la boucle de l´animation
function animate() {
  ctx.clearRect(0, 0, W, H);
  // animation
  x += dx;
	y+=dy;
  if (x > W -r || x <r) {
    dx *= -1
  }
	if (y> H - r|| y < r) {
    dy *= -1
  }
	drawRect(50,50,100,10);
  drawBall(x, y,r);
  loop = window.requestAnimationFrame(animate);
}

// un écouteur...
bouton1.addEventListener('click', function() {
  // à exécuter sur un clic sur bouton1
  animate();
});



// On renvoie un nombre entier aléatoire entre une valeur min (incluse)
// et une valeur max (exclue)
function randint(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}
// des couleurs aléatoires
function color() {
  return "rgb(" + Math.floor(Math.random() * (256)) + "," + Math.floor(Math.random() * (256)) + "," + Math.floor(Math.random() * (256)) + ")";
}