iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
Software Development

用Canvas打造自己的遊樂場系列 第 24

[Day24]用Canvas打造自己的遊樂場-分裂球 分裂

  • 分享至 

  • xImage
  •  

今天來寫一下球的分裂,就完成了這一個小程式.
先來建立一個處理分裂的函式

// 球分裂
split = (old_x, old_y) => {
    if(ball_array.length >= BALL_MAX) {
        return
    }

    var new_ball_x = old_x;
    var new_ball_y = old_y;
    var ball_ang = Math.random() * Math.PI * 2.0;
    var ball_speed = 3 + Math.random() * 5.0;
    var ball_color = "#" + ((1 << 24) * Math.random() | 0).toString(16);

    ball_array.push([
        new_ball_x,
        new_ball_y,
        Math.cos(ball_ang) * ball_speed,
        Math.sin(ball_ang) * ball_speed,
        ball_color
    ])
}

最前面的判斷式,是避免畫面中的球無限增生.
然後將這韓式加入,碰撞後的動作.

if (pre_col != col) {
    var mapIndex = brickToIndex(pre_col, pre_row);
    if (map[mapIndex] != 1) {
        ball[2] *= -1;
        test = false;
        split(ball[0], ball[1]);
    }
}

if (pre_row != row) {
    var mapIndex = brickToIndex(pre_col, pre_row);
    if (map[mapIndex] != 1) {
        ball[3] *= -1;
        test = false;
        split(ball[0], ball[1]);
    }
}

if (test) {
    ball[2] *= -1;
    ball[3] *= -1;
    split(ball[0], ball[1]);
}

呵呵呵!看起來真的很舒服,其實寫這小程式只是想接續後面寫走迷宮的小遊戲,也想順便玩一下array.forEach而已.好啦~明天就開始進入走迷宮的遊戲吧.


上一篇
[Day23]用Canvas打造自己的遊樂場-分裂球 球
下一篇
[Day25]用Canvas打造自己的遊樂場-labyrinth 開工
系列文
用Canvas打造自己的遊樂場30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言