JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<h2>Move with <em>up, down, left, right</em></h2>
<canvas id="c" width="600" height="450"></canvas>

CSS

#c { background-color: #000; }

JavaScript

const canvas = document.getElementById('c');
const context = canvas.getContext('2d');
context.fillStyle = 'white';

// Définition de l'objet joueur
let player = {
	x      : canvas.width / 2,
  y      : canvas.height / 2,
  width  : 20,
  height : 20,
  speedX : 0,
  speedY : 0
};

function update() {
	// Incrémentation des paramètres de vitesse si on appuie sur les bonnes touches
  // ------------------------------------------------------------------------------
	if (keyboard.ArrowRight) {
  	player.speedX += 0.5;
  }
  if (keyboard.ArrowLeft) {
    player.speedX -= 0.5;
  }
  if (keyboard.ArrowDown) {
    player.speedY += 0.5;
  }
  if (keyboard.ArrowUp) {
    player.speedY -= 0.5;
  }
  
  // Incrémentation des coordonnées en fonction de la vitesse
  // ----------------------------------------------------------
  player.x += player.speedX;
  player.y += player.speedY;
  
  // Gestion du freinage constant
  // ------------------------------
  if (Math.abs(player.speedX) <= 0.25)
  	player.speedX = 0;
  else if (player.speedX > 0)
  	player.speedX -= 0.25;
  else
  	player.speedX += 0.25;
    
  if (Math.abs(player.speedY) <= 0.25)
  	player.speedY = 0;
  else if (player.speedY > 0)
  	player.speedY -= 0.25;
  else
  	player.speedY += 0.25;
  
  // Rebond sur les bords
  // ----------------------
  if (player.x < 0) {
  	player.x = 0;
    player.speedX *= -0.8;
  }
  else if (player.x + player.width >= canvas.width) {
  	player.x = canvas.width - player.width;
    player.speedX *= -0.8;
  }
  if (player.y < 0) {
  	player.y = 0;
    player.speedY *= -0.8;
  }
  else if (player.y + player.height >= canvas.height) {
  	player.y = canvas.height - player.height;
    player.speedY *= -0.8;
  }
}

// Fonction d'affichage du joueur carré
// --------------------------------------
function render() {
	context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillRect(player.x, player.y, player.width, player.height);
}

// Game loop
// -----------
function run()...