弹球游戏

对象

![image.png](https://upload-images.jianshu.io/upload_images/16749538-9388f94a74aedb96.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    
        
    
    
        
    

查看对象信息

对象的方法及边缘检测

            var canv = document.getElementById("canvas");
            if (canv.getContext)
            {
            var ctx = canv.getContext("2d");
            }
            var ball = {
              x : 100,
              y : 100,
              xSpeed : -2,
              ySpeed : -2
            };
            //this表示当前这个对象，this.x指的是ball的x键。
            ball.draw = function()
            {
              ctx.beginPath();
              ctx.arc(this.x,this.y,10,0,Math.PI*2,false);
              ctx.fill();
            };
            ball.move = function()
            {
              this.x = this.x + this.xSpeed;
              this.y = this.y + this.ySpeed;
            };
            //检测边缘
            ball.checkCanvas = function()
            {
              if(this.x <0 || this.x >400)
              this.xSpeed = -this.xSpeed;
              if(this.y <0 || this.y >400)
              this.ySpeed = -this.ySpeed;
            };
            ball.say = function(){console.log("hello");};
            //大括号中，首先清除画布的内容，然后是绘制小球，改变小球的位置（小球运动）
            //最后绘制画布边框。
            //第二个参数是定时的时间，30表示每三十秒会执行一次大括号中的代码。
            setInterval(function()
            {
                ctx.clearRect(0,0,400,400);
                ball.draw();
                ball.move();
                ball.checkCanvas();
                ctx.strokeRect(0,0,400,400);
                ball.say();
            },30);

边界判断

键盘交互

        a drawing of something