AI game creator

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

No:46443

←

Prev Next

→

Ping pong
Developer User20087｜Date and time 24/2/24 22:35:21
Build time 16.086 sec｜Game capacity 3.488KB｜

Script

HTML код:

Этот код создает базовую версию игры пинг-понг на канвасе с использованием JavaScript.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

HTML код:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пинг-понг</title>
<style>
    canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 5;
let ballSpeedY = 5;

let paddle1Y = canvas.height / 2 - 50;
let paddle2Y = canvas.height / 2 - 50;
const paddleWidth = 10;
const paddleHeight = 100;

let score1 = 0;
let score2 = 0;
const winningScore = 5;

const netWidth = 4;

function drawNet() {
    for (let i = 0; i < canvas.height; i += 20) {
        ctx.fillRect(canvas.width/2 - netWidth/2, i, netWidth, 10);
    }
}

function drawRect(x, y, width, height, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, width, height);
}

function drawCircle(x, y, radius, color) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2, true);
    ctx.fill();
}

function drawText(text, x, y, color) {
    ctx.fillStyle = color;
    ctx.font = "30px Arial";
    ctx.fillText(text, x, y);
}

function drawGame() {
    drawRect(0, 0, canvas.width, canvas.height, "black");
    drawRect(0, paddle1Y, paddleWidth, paddleHeight, "white");
    drawRect(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight, "white");
    drawNet();
    drawCircle(ballX, ballY, 10, "white");
    drawText(score1, canvas.width/4, 50, "white");
    drawText(score2, 3*canvas.width/4, 50, "white");
}

canvas.addEventListener("mousemove", (e) => {
    let mousePos = getMousePos(e);
    paddle1Y = mousePos.y - paddleHeight/2;
});

function getMousePos(e) {
    let rect = canvas.getBoundingClientRect();
    let root = document.documentElement;
    let mouseX = e.clientX - rect.left - root.scrollLeft;
    let mouseY = e.clientY - rect.top - root.scrollTop;
    return {
        x: mouseX,
        y: mouseY
    };
}

function resetBall() {
    ballSpeedX = -ballSpeedX;
    ballX = canvas.width / 2;
    ballY = canvas.height / 2;
}

function move() {
    collisionDetect();

ballX += ballSpeedX;
    ballY += ballSpeedY;

if (paddle2Y + paddleHeight/2 < ballY) {
        paddle2Y += 5;
    } else {
        paddle2Y -= 5;
    }
}

function gameLoop() {
    drawGame();
    move();
}

setInterval(gameLoop, 1000/60);

</script>
</body>
</head>
```

Этот код создает базовую версию игры пинг-понг на канвасе с использованием JavaScript.