利用canvas 物件知識做彈跳小球

2021-10-02 22:05:46 字數 1846 閱讀 8428

loop函式中的相關說明

1、requestanimationframe(loop);讓函式每隔一段時間執行一次

2、如何讓小球避免長蛇軌跡,並稍微有一點之前的運動軌跡?

可以在下一次小球出現的時候重繪畫布,讓他變為黑色,再給一點透明度,就可以顯示之前的一點運動軌跡了

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

彈跳小球<

/title>

<

/head>

1、利用canvas畫布畫畫布 --

>

<

/canvas>

const canvas = document.

queryselector

('canvas');

const ctx = canvas.

getcontext

('2d');

const width = canvas.width = window.innerwidth;

const height = canvas.height = window.innerheight;

//讓小球動起來

const balls =

;//存放小球

//畫小球 小球顏色

//生成隨機數

function

random

(min, max)

//隨機顏色

function

randomcolor()

//小球屬性設定 建構函式

function

bbb(x, y, r, color, vx, vy)

bbb.prototype.

draw

=function()

;//小球運動軌跡 x,y,vx,vy

bbb.prototype.

run=

function()

if((this

.x -

this

.r)<=0)

if((this

.y +

this

.r)>= height)if(

(this

.y -

this

.r)<=0)

this

.x +=

this

.vx;

this

.y +=

this

.vy;};

//小球碰撞

bbb.prototype.

click

=function()

}}};

//迴圈動畫

function

loop()

;for

(let i =

0; i < balls.length; i++

)// console.log(balls)

requestanimationframe

(loop);}

loop()

;<

/script>

<

/body>

<

/html>

js建立物件(js小知識)

工廠模式function person name,age return o var p newperson viven 28 console.log p.constructor person false工廠模式最大的問題就是不能識別物件,可以用建構函式解決。建構函式建構函式的建立會經歷一下幾個步驟 ...

物件導向知識點小總結

what when where why whom,how 類與物件的關係 類是物件的抽象,物件是類的實現 類是由方法和屬性構成,它的每乙個物件都有對應的屬性和方法 方法 方法的過載 目的 針對同乙個行為的多種表現,對應相同方法名的多個方法 方法名相同,引數列表不同 類方法 static方法 類名.方...

物件導向的程式設計C 小知識點

1 類是將不同型別的資料和對這些資料的操作封裝在一起的集合體。2 類的型別,也僅僅 是一種資料型別。3 類是物件的抽象,物件是類的例項。4 類中的資料成員的型別可以是任意的。包括整型 浮點型 字元型 陣列 指標和引用。5 在類體中不允許對所定義的資料成員進行初始化。因為類的定義只是在建立乙個型別,而...