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>

 

posted @ 2014-04-27 11:24  高捍得  阅读(222)  评论(0编辑  收藏  举报