h5弹球对战游戏 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        #canvas {
            display: block;
            margin: 0 auto;
        }

    </style>

</head>
<body>

<canvas id="canvas">
    您的浏览器不支持Canvas标签，请在现代浏览器下查看效果
</canvas>
</body>
<script>
    var canvas = document.getElementById("canvas"),
        c = canvas.getContext("2d"),
        W = canvas.width = 1200,
        H = canvas.height = 800;
    var ballX = W / 2, ballY = H / 2, ballR = 10, ballVx = 5, ballVy = 1,
        panelW = 10, panelH = 100, panel1Y = (H - panelH) / 2, panel2Y = (H - panelH) / 2,
        player1Score = 0, player2Score = 0, winnerScore = 3,
        isEnd = 0;
    animate();
    canvas.addEventListener("click", function () {
        if (isEnd) {
            player1Score = 0;
            player2Score = 0;
            isEnd = 0;
            animate();
        }
    });
    canvas.addEventListener("mousemove", function (e) {
        panel1Y = e.clientY - canvas.getBoundingClientRect().top - panelH / 2;
    });
    function animate() {
        fillRect(0, 0, W, H, "black");
        if (isEnd) {
            if (player1Score >= winnerScore) {
                fillText("恭喜，你赢了!", W / 2, H / 2);
            } else {
                fillText("抱歉，你输了!", W / 2, H / 2);
            }
            fillText("再来一次?", W / 2, H / 3 * 2, "32px DejaVu Sans Mono");
            return;
        }
        drawNet();
        if (panel2Y + panelH / 2 < ballY - 40) {
            panel2Y = panel2Y + 5;
        } else if (panel2Y + panelH / 2 > ballY + 40) {
            panel2Y = panel2Y - 5;
        }
        ballX += ballVx;
        ballY += ballVy;
        if (ballX - ballR - panelW < 0) {
            if (ballY > panel1Y && ballY < panel1Y + panelH) {
                ballVx = -ballVx;
                ballVy = (ballY - (panel1Y + panelH / 2)) * .3;
            } else {
                player2Score++;
                ballReset();
            }
        }
        if (ballX + ballR + panelW > W) {
            if (ballY > panel2Y && ballY < panel2Y + panelH) {
                ballVx = -ballVx;
                ballVy = (ballY - (panel2Y + panelH / 2)) * .3;
            } else {
                player1Score++;
                ballReset();
            }
        }

        if (ballY + ballR < 0 || ballY - ballR > H) {
            ballVy = -ballVy;
        }

        fillRect(1, panel1Y, panelW, panelH, "white");
        fillRect(W - panelW - 1, panel2Y, panelW, panelH, "white");
        fillCircle(ballX, ballY, ballR, "white");
        fillText(player1Score, 100, 100);
        fillText(player2Score, W - 100, 100);
        requestAnimationFrame(animate);
    }
    function drawNet() {
        for (var i = 0; i < H; i += 40) {
            fillRect(W / 2 - 1, i + 10, 2, 20, "white");
        }
    }
    function ballReset() {
        if (player1Score >= winnerScore || player2Score >= winnerScore) {
            isEnd = 1;
        }
        ballVx = -ballVx;
        ballX = W / 2;
        ballY = H / 2;
    }
    function fillRect(x, y, w, h, style) {
        c.fillStyle = style;
        c.fillRect(x, y, w, h);
    }
    function fillCircle(x, y, r, style) {
        c.fillStyle = style;
        c.beginPath();
        c.arc(x, y, r, 0, Math.PI * 2);
        c.fill();
    }
    function fillText(txt, x, y, font, style) {
        c.fillStyle = style || "white";
        c.font = font || "40px DejaVu Sans Mono";
        c.textAlign = "center";
        c.textBaseline = "middle";
        c.fillText(txt, x, y);
    }
</script>
</html>

 

posted @ 2017-08-07 10:15  青春无语  阅读(603)  评论(0)    收藏  举报