AI game creator

Click here for free DL of the app version that can save data.

No:15579

←

Prev Next

→

Jeux de ping pong
Developer Nanuiture｜Date and time 23/9/10 2:09:02
Build time 55.916 sec｜Game capacity 4.946KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Jeu de Ping Pong</title>
<style>
canvas {
  border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="pingPongCanvas" width="400" height="300"></canvas>

// Variables du jeu
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 10;
var ballSpeedY = 4;

var paddle1Y = 250;
var paddle2Y = 250;
const PADDLE_HEIGHT = 100;
const PADDLE_WIDTH = 10;

var player1Score = 0;
var player2Score = 0;
const WINNING_SCORE = 3;
var showingWinScreen = false;

// Fonction pour calculer la position de la souris
function calculateMousePos(evt) {
  var rect = canvas.getBoundingClientRect();
  var root = document.documentElement;
  var mouseX = evt.clientX - rect.left - root.scrollLeft;
  var mouseY = evt.clientY - rect.top - root.scrollTop;
  return {
    x: mouseX,
    y: mouseY
  };
}

// Fonction pour réinitialiser la partie en cas de victoire
function handleMouseClick(evt) {
  if (showingWinScreen) {
    player1Score = 0;
    player2Score = 0;
    showingWinScreen = false;
  }
}

// Fonction principale pour dessiner sur le canvas
function draw() {
  // Dessine le terrain de jeu
  colorRect(0, 0, canvas.width, canvas.height, "black");

if (showingWinScreen) {
    canvasContext.fillStyle = "white";
    if (player1Score >= WINNING_SCORE) {
      canvasContext.fillText("Joueur 1 gagne!", 350, 200);
    } else if (player2Score >= WINNING_SCORE) {
      canvasContext.fillText("Joueur 2 gagne!", 350, 200);
    }

canvasContext.fillText(
      "Cliquez pour rejouer",
      350,
      500
    );
    return;
  }

// Dessine le filet de séparation
  drawNet();

// Dessine la raquette du joueur 1
  colorRect(0, paddle1Y, PADDLE_WIDTH, PADDLE_HEIGHT, "white");

// Dessine la raquette du joueur 2
  colorRect(
    canvas.width - PADDLE_WIDTH,
    paddle2Y,
    PADDLE_WIDTH,
    PADDLE_HEIGHT,
    "white"
  );

// Dessine la balle
  colorCircle(ballX, ballY, 10, "white");

// Met à jour la position de la balle
  ballX += ballSpeedX;
  ballY += ballSpeedY;

// Gère la collision avec les bords verticaux
  if (ballY < 0 && ballSpeedY < 0.0) {
    ballSpeedY = -ballSpeedY;
  }
  if (ballY > canvas.height && ballSpeedY > 0.0) {
    ballSpeedY = -ballSpeedY;
  }

// Gère la collision avec la raquette du joueur 1
  if (ballX < 0) {
    if (ballY > paddle1Y && ballY < paddle1Y + PADDLE_HEIGHT) {
      ballSpeedX = -ballSpeedX;
      var deltaY = ballY - (paddle1Y + PADDLE_HEIGHT / 2);
      ballSpeedY = deltaY * 0.35;
    } else {
      player2Score++; // Joueur 2 gagne
      ballReset();
    }
  }

// Gère la collision avec la raquette du joueur 2
  if (ballX > canvas.width) {
    if (ballY > paddle2Y && ballY < paddle2Y + PADDLE_HEIGHT) {
      ballSpeedX = -ballSpeedX;
      var deltaY = ballY - (paddle2Y + PADDLE_HEIGHT / 2);
      ballSpeedY = deltaY * 0.35;
    } else {
      player1Score++; // Joueur 1 gagne
      ballReset();
    }
  }

// Déplace la raquette du joueur 2 automatiquement
  if (paddle2Y + PADDLE_HEIGHT / 2 < ballY - 35) {
    paddle2Y += 6;
  } else if (paddle2Y + PADDLE_HEIGHT / 2 > ballY + 35) {
    paddle2Y -= 6;
  }

// Affiche les scores
  canvasContext.fillText(player1Score, 100, 100);
  canvasContext.fillText(player2Score, canvas.width - 100, 100);
}

// Fonction pour dessiner un cercle
function colorCircle(centerX, centerY, radius, color) {
  canvasContext.fillStyle = color;
  canvasContext.beginPath();
  canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
  canvasContext.fill();
}

// Fonction pour dessiner un rectangle
function colorRect(leftX, topY, width, height, color) {
  canvasContext.fillStyle = color;
  canvasContext.fillRect(leftX, topY, width, height);
}

// Fonction pour dessiner le filet de séparation
function drawNet() {
  for (var i = 0; i < canvas.height; i += 40) {
    colorRect(canvas.width / 2 - 1, i, 2, 20, "white");
  }
}

// Fonction pour réinitialiser la position de la balle
function ballReset() {
  if (player1Score >= WINNING_SCORE || player2Score >= WINNING_SCORE) {
    showingWinScreen = true;
  }

ballSpeedX = -ballSpeedX;
  ballX = canvas.width / 2;
  ballY = canvas.height / 2;
}

// Fonction principale pour démarrer le jeu
function game() {
  // Crée l'élément canvas
  canvas = document.getElementById("pingPongCanvas");
  canvasContext = canvas.getContext("2d");

// Définit la fréquence de rafraîchissement du jeu
  var framesPerSecond = 30;
  setInterval(function() {
    draw();
  }, 1000 / framesPerSecond);

// Gère les mouvements de la raquette du joueur 1
  canvas.addEventListener("mousemove", function(evt) {
    var mousePos = calculateMousePos(evt);
    paddle1Y = mousePos.y - PADDLE_HEIGHT / 2;
  });

// Gère le clic de souris pour réinitialiser le jeu
  canvas.addEventListener("mousedown", handleMouseClick);
}

// Lancement du jeu
game();

</script>
</body>
</html>