SuperBall开发总结(二)-让小球动起来

有了上篇SuperBall开发总结(一)-游戏框架，我们可以用JavaScript来做一个有趣的小实验。

其实就是在一个封闭的小盒子里，有个小球在不停地弹来弹去。

实验效果

注意JavaScript代码，由于该网站将提交的Javascript代码用window.onload = function(){}封装，所以做了一些微调。

首先新建一个 canvas

<canvas id="count_down_canvas"
        width="1024" height="768"
        style="border:1px grey solid;display: block;
               margin: 20px"></canvas>`

然后设置一个小球对象

var ball = {
         x :  200 , 
         y :  200, 
         r :  10, 
         vx : 80, 
         vy : -80, 
         color : "rgb(0, 122, 122)"};`
var frequency = 25; //每个1/25秒刷新一次`

设置主循环函数

window.onload = function(){
    
    var canvas = document.getElementById("super_ball_canvas");
    canvas.width = 300;
    canvas.height = 300;
    var context = canvas.getContext("2d");


    setInterval(
            function(){
                render(context); //渲染函数
                checkHit(); //碰撞检测函数
                update(); //状态更新函数
            },
            frequency
    );
}

这里的setInterval()函数作用是每个1/frequency时间执行一次function(){}里面的函数

render()函数

function render(context){
    //清空当前画布
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);        

    //画圆
    context.beginPath();        
    //参数：圆心X，圆心Y，半径R，起始角度，终止角度，（顺时针）
    context.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
    context.closePath();
    
    //填充颜色
    context.fillStyle= ball.color;
    context.fill();
}

这里绘制的基本思路是现将上次绘制的小球清空，再绘制新的小球

用到了一些基本的绘图函数，值得一提的是beginPath()和closePath()将当前图形封闭，不会影响也不会受其他图形的影响

checkHit()函数

function checkHit(){

    if(ball.x <= ball.r){
        ball.x = ball.r;
        ball.vx *= -1;
    }

    if(ball.x >= 300 - ball.r){
        ball.x = 300 - ball.r;
        ball.vx *= -1;
    }

    if(ball.y <= ball.r){
        ball.y = ball.r;
        ball.vy *= -1;
    }

    if(ball.y >= 300 - ball.r){
        ball.y = 300 - ball.r;
        ball.vy *= -1;
    }

}

这个函数很简单，主要是判断小球是否碰到或者已经超过边界，若符合条件，则要调整小球的坐标和速度。

这里有个细节，将小球的坐标拉回边界值，目的是防止速度过大导致小球在下一时刻依然“碰撞”而无法“反弹”。

update()函数

function update(){
    ball.x += ball.vx / frequency;
    ball.y += ball.vy / frequency;
}

非常简单的update()函数，其实就是初中物理知识，s = s0 + vt。只是这里把速度的值与更新频率做了一个简单的换算。

总结

从这简单的几行代码中可以看出，让小球按照我们的规则动起来，其实非常简单，只需要设计好简单逻辑框架和一点物理知识。

这只是用于学习游戏开发的一些基本的机制，而对于一个完善的游戏引擎来说，需要考虑的地方就会复杂的多。

下一篇SuperBall开发总结(三)-加入木板将介绍，玩家可以控制的木板如何加入游戏当中。

最后编辑于：2017.11.26 23:42:22