日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
HTML 5游戲制作之五彩連珠（畫(huà)圖）

好吧，新的一天來(lái)了，我才開(kāi)始動(dòng)筆，真夠懶得：）昨天說(shuō)了今天我們要畫(huà)一個(gè)球，在canvas上。好吧，這是游戲的入門的第一步，只是昨天沒(méi)寫(xiě)完，所以。。。

成都創(chuàng)新互聯(lián)公司是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、做網(wǎng)站、成都做網(wǎng)站、網(wǎng)站備案、服務(wù)器租用、域名注冊(cè)、軟件開(kāi)發(fā)、微信小程序等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營(yíng)推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開(kāi)一個(gè)面向全國(guó)乃至全球的業(yè)務(wù)窗口：建站咨詢電話：13518219792

  
 
 
 
       
  
  
  
  1.    
    2.    
  
  
  
  2.    
    3.    
  
  
  
  3.    
    4.    
  
  
  
  4.        
    5.    
  
  
  
  5.    
    6.    
  
  
  
  6.    
    7.    
  
  
  
  7.        
    8.    
  
  
  
  8.        
    9.    
  
  
  
  9.    
    10.    
  
  
  
  10.  
    11.

上面的代碼是在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à)圓的一部分也就是一段弧線，可以取開(kāi)始的角度點(diǎn)和結(jié)束的角度點(diǎn)。

那么下一步就是要把圓能夠畫(huà)到我們棋盤上。其實(shí)，這個(gè)很簡(jiǎn)單，只要我們把x,y和radius的值調(diào)整下就會(huì)繪制出來(lái)。我把昨天代碼寫(xiě)的更“專業(yè)”了一點(diǎn)。所以，今天的代碼會(huì)在新的代碼基礎(chǔ)上增加了。先看下改動(dòng)過(guò)的代碼。

  
 
 
 
       
  
  
  
  1. var canvas = document.getElementById("canvas");   
    2.    
  
  
  
  2. var ctx = canvas.getContext("2d");   
    3.    
  
  
  
  3. var g = {   
    4.    
  
  
  
  4.     cellCount: 9,   
    5.    
  
  
  
  5.     lineCount: 5,   
    6.    
  
  
  
  6. };   
    7.    
  
  
  
  7.    
    8.    
  
  
  
  8. var map = {   
    9.    
  
  
  
  9.     startX: 20.5,   
    10.    
  
  
  
  10.     startY: 60.5,   
    11.    
  
  
  
  11.     cellWidth: 30,   
    12.    
  
  
  
  12.     getEndX: function () {   
    13.    
  
  
  
  13.         return g.cellCount * this.cellWidth + this.startX;   
    14.    
  
  
  
  14.     },   
    15.    
  
  
  
  15.     getEndY: function () {   
    16.    
  
  
  
  16.         return g.cellCount * this.cellWidth + this.startY;   
    17.    
  
  
  
  17.     },   
    18.    
  
  
  
  18.     draw: function () {   
    19.    
  
  
  
  19.         ctx.beginPath();   
    20.    
  
  
  
  20.    
    21.    
  
  
  
  21.         ctx.moveTo(this.startX, this.startY);   
    22.    
  
  
  
  22.    
    23.    
  
  
  
  23.         for (var i = 0; i <= g.cellCount; i++) {   
    24.    
  
  
  
  24.    
    25.    
  
  
  
  25.             var p1 = i * this.cellWidth + this.startX;   
    26.    
  
  
  
  26.             ctx.moveTo(p1, this.startY);   
    27.    
  
  
  
  27.             ctx.lineTo(p1, this.getEndY());   
    28.    
  
  
  
  28.    
    29.    
  
  
  
  29.             var p2 = i * this.cellWidth + this.startY;   
    30.    
  
  
  
  30.             ctx.moveTo(this.startX, p2);   
    31.    
  
  
  
  31.             ctx.lineTo(this.getEndX(), p2);   
    32.    
  
  
  
  32.    
    33.    
  
  
  
  33.         }   
    34.    
  
  
  
  34.         ctx.strokeStyle = "#456";   
    35.    
  
  
  
  35.         ctx.stroke();   
    36.    
  
  
  
  36.     },   
    37.    
  
  
  
  37.    
    38.    
  
  
  
  38. };   
    39.    
  
  
  
  39.    
    40.    
  
  
  
  40. map.draw(); 
    41.

是吧，更專業(yè)了吧，這樣就不會(huì)定義一坨的function，到時(shí)候沒(méi)出找，而是定義在一個(gè)對(duì)象里，這種封裝也能避免命名沖突。而且，棋盤起始的位置我也做了調(diào)整，只要修改起始的x y值，棋盤就會(huì)在這個(gè)點(diǎn)開(kāi)始畫(huà)。那，現(xiàn)在我們要在第五行，第六列畫(huà)一個(gè)黃色的球，該怎么畫(huà)呢？只需要給map增加一個(gè)方法，再調(diào)用這個(gè)方法就行啦

  
 
 
 
       
  
  
  
  1. drawBubble: function (x, y) {   
    2.    
  
  
  
  2.     var px = this.startX + this.cellWidth * x - this.cellWidth / 2;   
    3.    
  
  
  
  3.     var py = this.startY + this.cellWidth * y - this.cellWidth / 2;   
    4.    
  
  
  
  4.     ctx.beginPath();   
    5.    
  
  
  
  5.     ctx.arc(px, py, 12, 0, Math.PI * 2);   
    6.    
  
  
  
  6.     ctx.strokeStyle = "white";   
    7.    
  
  
  
  7.     ctx.fillStyle = "yellow";   
    8.    
  
  
  
  8.     ctx.fill();   
    9.    
  
  
  
  9.     ctx.stroke();   
    10.    
  
  
  
  10. }, 
    11.

畫(huà)出來(lái)刷新下，居然是第六行，第五列，我們搞錯(cuò)了嗎？代碼沒(méi)有，只是我們誤認(rèn)為x是行y是列 按順序叫順口了，其實(shí)是反過(guò)來(lái)的：）

泡泡既然能畫(huà)出來(lái)，也要能清除才是，不然沒(méi)法玩，所以再增加一個(gè)清除泡泡的方法。

  
 
 
 
       
  
  
  
  1. clearBubble: function (x, y) {   
    2.    
  
  
  
  2.     var px = this.startX + this.cellWidth * x - this.cellWidth + 0.5;   
    3.    
  
  
  
  3.     var py = this.startY + this.cellWidth * y - this.cellWidth + 0.5;   
    4.    
  
  
  
  4.     ctx.beginPath();   
    5.    
  
  
  
  5.     ctx.clearRect(px, py, this.cellWidth - 1, this.cellWidth - 1);   
    6.    
  
  
  
  6.     ctx.stroke();   
    7.    
  
  
  
  7. } 
    8.

ok，是不是很霸氣？ o(∩_∩)o 哈哈，不過(guò)在獲取泡泡的位置時(shí)是不是很糾結(jié)，為什么畫(huà)泡泡是 width/2 而擦除要加0.5？

畫(huà)圓是從中心點(diǎn)開(kāi)始畫(huà)，所以要去掉半徑，而擦數(shù)不能擦掉我們的棋盤線，所以要偏移0.5 。


名稱欄目：HTML 5游戲制作之五彩連珠（畫(huà)圖）
標(biāo)題路徑：http://www.5511xx.com/article/coocjpd.html