html-example/file.html at main · https-deeplearning-ai/html-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Pong Game</title>
    <style>
        canvas {
            background: black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="pong" width="800" height="400"></canvas>
    <script>
        var canvas = document.getElementById("pong");
        var context = canvas.getContext("2d");

        var paddleWidth = 10;
        var paddleHeight = 100;

        var user = { x: 0, y: canvas.height / 2 - paddleHeight / 2, score: 0 };
        var computer = { x: canvas.width - paddleWidth, y: canvas.height / 2 - paddleHeight / 2, score: 0 };

        var ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 10, speed: 4, velocityX: 4, velocityY: 4 };

        function drawRect(x, y, w, h, color) {
            context.fillStyle = color;
            context.fillRect(x, y, w, h);
        }

        function drawCircle(x, y, r, color) {
            context.fillStyle = color;
            context.beginPath();
            context.arc(x, y, r, 0, Math.PI * 2, false);
            context.closePath();
            context.fill();
        }

        function draw() {
            drawRect(0, 0, canvas.width, canvas.height, "black");
            drawRect(user.x, user.y, paddleWidth, paddleHeight, "white");
            drawRect(computer.x, computer.y, paddleWidth, paddleHeight, "white");
            drawCircle(ball.x, ball.y, ball.radius, "white");
        }

        canvas.addEventListener("mousemove", movePaddle);

        function movePaddle(event) {
            var rect = canvas.getBoundingClientRect();
            user.y = event.clientY - rect.top - paddleHeight / 2;
        }

        function update() {
            ball.x += ball.velocityX;
            ball.y += ball.velocityY;

            if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
                ball.velocityY = -ball.velocityY;
            }

            let player = (ball.x < canvas.width / 2) ? user : computer;

            if (collision(ball, player)) {
                ball.velocityX = -ball.velocityX;
            }

            if (ball.x - ball.radius < 0) {
                computer.score++;
                resetBall();
            } else if (ball.x + ball.radius > canvas.width) {
                user.score++;
                resetBall();
            }

            computer.y += ((ball.y - (computer.y + paddleHeight / 2))) * 0.1;
        }

        function collision(ball, player) {
            player.top = player.y;
            player.bottom = player.y + paddleHeight;
            player.left = player.x;
            player.right = player.x + paddleWidth;

            ball.top = ball.y - ball.radius;
            ball.bottom = ball.y + ball.radius;
            ball.left = ball.x - ball.radius;
            ball.right = ball.x + ball.radius;

            return ball.right > player.left && ball.bottom > player.top && ball.left < player.right && ball.top < player.bottom;
        }

        function resetBall() {
            ball.x = canvas.width / 2;
            ball.y = canvas.height / 2;
            ball.velocityX = -ball.velocityX;
            ball.speed = 4;
        }

        function game() {
            update();
            draw();
        }

        var framePerSecond = 50;
        setInterval(game, 1000 / framePerSecond);
    </script>
</body>
</html>