canvas寫個簡單的小遊戲

2022-08-05 15:57:17 字數 2038 閱讀 5756

之前在html5 canvas屬性和方法彙總一文中,介紹過canvas的各種屬性以及方法的說明,並列舉了自己寫的一些canvas demo,接下來開始寫一個簡單的小遊戲吧,有多簡單,這麼說吧,**不到100行,先上效果圖:

初始化首先在html頁面中新增中新增一個canvas元素,並給出一個id用於在js**中獲取該元素並對其進行操作

然後就是對各種引數,註釋中都有給出,我就不多說了,直接看

//獲取canvas元素以及2d繪圖環境c,以及設定canvas寬高為800x600

var canvas = document.getelementbyid("canvas"),

c = canvas.getcontext("2d"),

w = canvas.width = 800,

h = canvas.height = 600;

var ballx = w / 2, bally = h / 2, ballr = 10, ballvx = 10, ballvy = 2, //球的位置、半徑以及在x軸及y軸的速度

panelw = 10, panelh = 100, panel1y = (h - panelh) / 2, panel2y = (h - panelh) / 2, //控制板的寬高以及初始位置

player1score = 0, player2score = 0, winnerscore = 3, //記錄玩家的分數以及得了多少分算贏

isend = 0; //判斷是否比賽結束的變數,0為未結束,1為已結束

封裝工具方法

//繪製長方形(也就是控制板)

function fillrect(x, y, w, h, style)

//繪製圓(也就是遊戲中的球)

function fillcircle(x, y, r, style)

//繪製文字(得分和顯示輸贏)

function filltext(txt, x, y, font, style)

新增事件

我們需要在canvas元素上新增監聽事件,一是當結束的也就是isend為1的時候,當滑鼠點選在canvas上的時候再來一把遊戲,重置玩家分數以及重啟動畫繪製,二是我們需要控制左側控制板的運動,不過只需要在y軸運動即可

canvas.addeventlistener("click", function () 

});//獲取滑鼠在canvas上實際y軸位置減去控制板的高度也就是控制板實際繪製的初始位置

canvas.addeventlistener("mousemove", function (e) );

邊界判斷

//球邊界判斷

if (ballx - ballr - panelw < 0) else

}if (ballx + ballr + panelw > w) else

}if (bally + ballr < 0 || bally - ballr > h)

//用於控制右側控制板的運動

if (panel2y + panelh / 2 < bally - 40) else if (panel2y + panelh / 2 > bally + 40)

執行動畫

我這裡直接在animate方法裡使用requestanimationframe(animate),更相容的方法應該是以下這樣,為了偷個懶就沒寫相容寫法

var raf = (function () 

})();

raf(animate);

到此,該小遊戲的介紹到此結束,簡單吧