原创程序：HTML5弹球游戏_H5之家 - 中国HTML5教程资源分享第一站

　　完全根据PHP100的2012版视频教程第24讲和今天刚刚发布的第25讲利用HTML5制作的弹球游戏。

　　希望有兴趣的同学先试试自己做一做，然后在看我的程序，都是讲过的知识，没有额外知识。

　　左右移动鼠标操作，游戏截图：

　　http://vip.php100.com/apps-htm-q-diary-a-detail-did-6158.html

复制代码

<!DOCTYPE html>
<head>
    <meta charset=utf-8>
    <title>HTML5弹球游戏 - 勇者向前衝 - http://vip.php100.com</title>
</head>
<body>
    <canvas id="php100" width="500" height="500" onmousemove = "mousexy(event);"></canvas>
    <div id="ds"></div>
    <script type="text/javascript">
        var canvas = document.getElementById('php100');
        var p100=canvas.getContext("2d");
        var ballX=250;    //设置小球位置
        var ballY=250;    //设置小球位置
        var ballAngle=Math.PI*2*300/360;    //设置小球移动角度
        var ballSpeed = 2;     //小球速度
        var x = 0;    //鼠标x轴位置

        function mousexy(n) {
            var p100=canvas.getContext("2d");
            x = n.clientX;
            p100.clearRect(0,490,500,10);
            p100.fillStyle="#0000FF"; //定义颜色
            x = x<50 ? 50 :  x;
            x = x>450 ? 450 : x;
            p100.fillRect(x-50,490,100,10); //定义矩形的大小
        }
        function draw(){
            p100.clearRect(0,0,500,490)    // 擦除画布一个区域xy、xy
            p100.fillStyle="yellow";                //定义颜色
            p100.beginPath();                    //从新开始画，防止冲突重叠
            p100.arc(ballX,ballY,20,0,Math.PI*2,1); //x坐标，y坐标，半径，Math.PI是圆周率
            p100.closePath();                    //结束画布，防止冲突重叠
            p100.fill();                        //结束渲染

            //更新小球位置
            ballX=ballX+ballSpeed*Math.cos(ballAngle);
            ballY=ballY+ballSpeed*Math.sin(ballAngle);

            if (ballY <= 20) {
                ballAngle = Math.PI*2 - ballAngle;
            }
            if (ballX >= 480 || ballX <= 20) {
                ballAngle = Math.PI - ballAngle;
            }
            if (ballY >= 470) {
                if (x<ballX-50 || x>ballX+50) {
                    self.clearInterval(interval);
                    alert("Game Over");
                    return;
                } else {
                    ballAngle = Math.PI*2 - ballAngle;
                }
            }
        }
        //setInterval(code,millisec) 按照指定的周期来调用函数,返回值为定时器的ID值
        //clearInterval(idofsetInterval)取消由setInterval()方法设置的定时器。
    </script>
    <input onclick="interval=setInterval(draw,3);" value="开始" type="button" />
    <input onclick="clearInterval(interval);" value="停止" type="button" />
</body>
</html>