HTML 5游戲制作之五彩連珠（畫(huà)圖）
好吧，新的一天來(lái)了，我才開(kāi)始動(dòng)筆，真夠懶得：）昨天說(shuō)了今天我們要畫(huà)一個(gè)球，在canvas上。好吧，這是游戲的入門(mén)的第一步，只是昨天沒(méi)寫(xiě)完，所以。。。
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- </head>
- <body>
- <canvas id="canvas" height="400" width="600" style="background: #fff;"></canvas>
- <script type="text/javascript">
- var canvas = document.getElementById("canvas");
- var ctx = canvas.getContext("2d");
- ctx.beginPath();
- ctx.arc(110, 110, 40, 0, Math.PI * 2);
- ctx.strokeStyle = "red";
- ctx.fillStyle = "yellow";
- ctx.fill();
- ctx.stroke();
- </script>
- </body>
- </html>
上面的代碼是在VS11 beta上寫(xiě)的，實(shí)在是太舒服了，vs是非常強(qiáng)大的編輯器。上面的代碼中我們繪制了一個(gè)大大的圓，并且著色了，紅邊和黃心。
看下 arc (弧度)方法，昨天的文章里有他的鏈接地址，我在這里粘貼下。
The arc(x, y, radius, startAngle, endAngle, anticlockwise) method draws an arc.
arc(x,y,弧度,開(kāi)始角度點(diǎn)，結(jié)束角度點(diǎn)， 順時(shí)針)，角度點(diǎn)你可能不是很清楚如何表示，這里是用Math.PI 圓周率來(lái)表示 6.28是周長(zhǎng)。 想畫(huà)圓的一部分也就是一段弧線(xiàn)，可以取開(kāi)始的角度點(diǎn)和結(jié)束的角度點(diǎn)。
那么下一步就是要把圓能夠畫(huà)到我們棋盤(pán)上。其實(shí)，這個(gè)很簡(jiǎn)單，只要我們把x,y和radius的值調(diào)整下就會(huì)繪制出來(lái)。我把昨天代碼寫(xiě)的更“專(zhuān)業(yè)”了一點(diǎn)。所以，今天的代碼會(huì)在新的代碼基礎(chǔ)上增加了。先看下改動(dòng)過(guò)的代碼。
- var canvas = document.getElementById("canvas");
- var ctx = canvas.getContext("2d");
- var g = {
- cellCount: 9,
- lineCount: 5,
- };
- var map = {
- startX: 20.5,
- startY: 60.5,
- cellWidth: 30,
- getEndX: function () {
- return g.cellCount * this.cellWidth + this.startX;
- },
- getEndY: function () {
- return g.cellCount * this.cellWidth + this.startY;
- },
- draw: function () {
- ctx.beginPath();
- ctx.moveTo(this.startX, this.startY);
- for (var i = 0; i <= g.cellCount; i++) {
- var p1 = i * this.cellWidth + this.startX;
- ctx.moveTo(p1, this.startY);
- ctx.lineTo(p1, this.getEndY());
- var p2 = i * this.cellWidth + this.startY;
- ctx.moveTo(this.startX, p2);
- ctx.lineTo(this.getEndX(), p2);
- }
- ctx.strokeStyle = "#456";
- ctx.stroke();
- },
- };
- map.draw();
是吧，更專(zhuān)業(yè)了吧，這樣就不會(huì)定義一坨的function，到時(shí)候沒(méi)出找，而是定義在一個(gè)對(duì)象里，這種封裝也能避免命名沖突。而且，棋盤(pán)起始的位置我也做了調(diào)整，只要修改起始的x y值，棋盤(pán)就會(huì)在這個(gè)點(diǎn)開(kāi)始畫(huà)。那，現(xiàn)在我們要在第五行，第六列畫(huà)一個(gè)黃色的球，該怎么畫(huà)呢？只需要給map增加一個(gè)方法，再調(diào)用這個(gè)方法就行啦
- drawBubble: function (x, y) {
- var px = this.startX + this.cellWidth * x - this.cellWidth / 2;
- var py = this.startY + this.cellWidth * y - this.cellWidth / 2;
- ctx.beginPath();
- ctx.arc(px, py, 12, 0, Math.PI * 2);
- ctx.strokeStyle = "white";
- ctx.fillStyle = "yellow";
- ctx.fill();
- ctx.stroke();
- },
畫(huà)出來(lái)刷新下，居然是第六行，第五列，我們搞錯(cuò)了嗎？代碼沒(méi)有，只是我們誤認(rèn)為x是行y是列 按順序叫順口了，其實(shí)是反過(guò)來(lái)的：）
泡泡既然能畫(huà)出來(lái)，也要能清除才是，不然沒(méi)法玩，所以再增加一個(gè)清除泡泡的方法。
- clearBubble: function (x, y) {
- var px = this.startX + this.cellWidth * x - this.cellWidth + 0.5;
- var py = this.startY + this.cellWidth * y - this.cellWidth + 0.5;
- ctx.beginPath();
- ctx.clearRect(px, py, this.cellWidth - 1, this.cellWidth - 1);
- ctx.stroke();
- }
ok，是不是很霸氣？ o(∩_∩)o 哈哈，不過(guò)在獲取泡泡的位置時(shí)是不是很糾結(jié)，為什么畫(huà)泡泡是 width/2 而擦除要加0.5？
畫(huà)圓是從中心點(diǎn)開(kāi)始畫(huà)，所以要去掉半徑，而擦數(shù)不能擦掉我們的棋盤(pán)線(xiàn)，所以要偏移0.5 。
原文鏈接：http://www.cnblogs.com/mad/archive/2012/03/11/2390281.html
【編輯推薦】
