canvas寫個簡單的小遊戲

之前在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);

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

canvas寫個簡單的小遊戲

用GDX寫個安卓小遊戲

寫個買賣小遊戲，第3天

寫個買賣小遊戲，第2天

canvas寫個簡單的小遊戲

用GDX寫個安卓小遊戲

寫個買賣小遊戲，第3天

寫個買賣小遊戲，第2天

相關推薦