// 獲取class名為picture的canvas元素
var can = document.queryselector('.picture');
// 讓它撐滿整個螢幕
can.width = window.innerwidth;
can.height = window.innerheight;
// 獲取2d上下文
ctx = can.getcontext('2d');
// 封裝乙個類
; (function (win)
this.x = ran(win.innerwidth);//圓心x軸座標
this.y = ran(win.innerheight);//圓心y軸座標
this.r = ran(20);//半徑
this.vx = ran(10);//速度
this.vy = ran(10);//速度
this.color = mock.random.color();中的隨機顏色api
}circle.prototype = ,
// 小球的邊界判定函式（回彈）
move: function (ctx)
if (this.x > (canvasheight - this.r) || this.x < this.r)
//偏移量
this.x += this.vx;
this.y += this.vy;
},// 隨機數函式
ran: function (num)
}//暴露介面
win.circle = circle;
}(window));
//呼叫20次（20和小球同時運動）
var arr = ;
for (var i = 0; i < 20; i++)
function draw()
requestanimationframe(draw)//動畫函式 遞迴呼叫draw函式
}draw();//首次呼叫
python實現彈跳小球
前言 學習python的過程中，比較喜歡通過實際的小專案進行鞏固學習，決定寫乙個彈跳小球的程式。這個實戰例程是在 上看到的，他的編寫過程比較完整，步驟清晰，貼的 並不完整，但是我還是決定嘗試一下，在嘗試的過程中由於自己的基礎知識並沒有學到類這裡，所以是在摸索的階段，一邊學習基礎知識，一邊編寫這個例程...
利用canvas 物件知識做彈跳小球
loop函式中的相關說明 1 requestanimationframe loop 讓函式每隔一段時間執行一次 2 如何讓小球避免長蛇軌跡，並稍微有一點之前的運動軌跡？可以在下一次小球出現的時候重繪畫布，讓他變為黑色，再給一點透明度，就可以顯示之前的一點運動軌跡了 doctype html en u...
使用pgzero實現小球彈跳效果
程式 做了如下操作 1 引入pgzero庫 2 定義幕布的長寬 3 定義小球的中心座標 半徑 移動速度 4 定義draw函式 繪製模組 對每幀畫面進行繪製 5 定義update函式 更新模組 在每幀畫面繪製之前更新物件的變數 6 執行遊戲 完整 如下 import pgzrun 引入pgzero庫 ...