canvas 乒乓球

<!DOCTYPE html>

<html>

<head>

    <title>Bouncing Ball With inputs</title>

    <style type="text/css">

        form {

            width: 330px;

            margin: 20px;

            background-color: brown;

            padding: 20px;

        }

    </style>

    <script type="text/javascript">

        var boxx = 0;

        var boxy = 0;

        var boxwidth = 350;

        var boxheight = 250;

        var ballrad = 10;

        var boxboundx = boxwidth + boxx - ballrad;

        var boxboundy = boxheight + boxy - ballrad;

        var inboxboundx = boxx + ballrad;

        var inboxboundy = boxy + ballrad;

        var ballx = 50;

        var bally = 60;

        var ctx;

        var ballvx = 4;

        var ballvy = 8;

        var step = 10;

        var isRight = false;

        var pai = {

            width: 2,

            height: 80,

            position: {

                x: 60,

                y: 80

            }

        }

        var inter;

        function init() {

            ctx = document.getElementById("canvas").getContext("2d");

            document.body.onkeydown = function (e) {

                var up = 38;

                var down = 40;

                if (e.keyCode == up) {

                    if (pai.position.y > 0) {

                        pai.position.y -= step;

                    }

                } else if (e.keyCode == down) {

                    if (pai.position.y < boxheight - pai.height) {

                        pai.position.y += step;

                    }

                }

            }

            ctx.lineWidth = ballrad;

            ctx.fillStyle = "rgb(200,0,50)";

            moveball();

            inter = setInterval(moveball, 100);

        }

        function moveball() {

            ctx.clearRect(boxx, boxy, boxwidth, boxheight);

            moveandcheck();

            ctx.beginPath();

            ctx.arc(ballx, bally, ballrad, 0, Math.PI * 2, true);

            if (ballx > (pai.position.x + pai.width)) {

                isRight = true;

            } else if (ballx < (pai.position.x - pai.width)) {

                isRight = false;

            }

            console.log(isRight);

            ctx.rect(pai.position.x, pai.position.y, pai.width, pai.height);

            ctx.fill();

            ctx.strokeRect(boxx, boxy, boxwidth, boxheight);

        }

        function moveandcheck() {

            var nballx = ballx + ballvx;

            var nbally = bally + ballvy;

            if (nballx > boxboundx) {//碰到右边的墙

                ballvx = -ballvx;

                nballx = boxboundx;

            }

            if (nballx < inboxboundx) {//碰到左边的墙

                nballx = inboxboundx;

                ballvx = -ballvx;

            }

            if (nbally > boxboundy) {//碰到下面的墙

                nbally = boxboundy;

                ballvy = -ballvy;

            }

            if (nbally < inboxboundy) {//碰到上面的墙

                nbally = inboxboundy;

                ballvy = -ballvy;

            }

            if ((isRight && (nballx < pai.position.x + ballrad) && (nbally < pai.position.y || nbally > pai.position.y + pai.height))) {

                clearInterval(inter);

                alert('游戏结束l');

            }

            //右边过来

            if (isRight && (nballx < pai.position.x + ballrad) && (nbally > (pai.position.y) && nbally < pai.position.y + pai.height)) {

                ballvx = -ballvx;

            }

            //左边过来

            else if (!isRight && (nballx > pai.position.x - ballrad) && (nbally > pai.position.y && nbally < pai.position.y + pai.height)) {

                ballvx = -ballvx;

                nballx = pai.position.x - ballrad;

            }

            ballx = nballx;

            bally = nbally;

        }

        function change() {

            ballvx = Number(f.hv.value);

            ballvy = Number(f.vv.value);

            return false;

        }

    </script>

</head>

<body onload="init()">

<td>

    <table align=center background="a.jpg">

        <td>

            <canvas id="canvas" width="400" height="300">不支持canvas</canvas>

            <br/>

            <form name="f" id="f" onsubmit="return change();">

                Horizontal velocity <input name="hv" id="hv" value="4" type="number" min="-10" max="10"/><br/>

                Vertical velocity <input name="vv" id="vv" value="8" type="number" min="-10" max="10"/>

                <input type="submit" value="Change"/>

            </form>

</body>

</html>
相关文章
