HTML5游戏制作之五彩连珠（设计）

在看了几篇Canvas相关的文章后，发现前两节的代码实现还是有问题，因为知道的少，所以只能在自己已知的知识上做实现。不过还好，这是一个发现的过程，也是一个纠错和完善的过程。我第一次尝试一边学习一遍写博客，我想这也有助我的学习，可以把知识掌握的牢固些，起码忘的慢一些吧：）。

阿城网站建设公司成都创新互联,阿城网站设计制作，有大型网站制作公司丰富经验。已为阿城上1000+提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的阿城做网站的公司定做！

前两节学习了几个基本绘制的方法，lineTo moveTo和arc，也了解坐标的情况，但写的比较傻，只是单纯的实现。 比如棋盘的起始坐标如果有偏移量，我们还要计算他的具体开始坐标和结束坐标，实际上Canvas有现有的方法提供偏移的功能。 他叫 translate，另外还有缩放scale、旋转rotate，他们都可以用transform代替。所以，在代码方面还会有些调整。不过这个的学习恰巧也让我知道如何实现动画效果。如果多个元素在一个Canvas上，实现动画，必然会需要擦除重绘的情况，如果元素之间有覆盖的情况，擦除就需要多考虑了。当然，简单的办法就是把整个画布根据当然所有元素的位置重新绘制一遍。所以在代码设计方面，需要把不同的元素独立出来，每个元素都有自己的draw方法，并且要依照次序绘制Canvas。

分析一下游戏所需的元素：1、棋盘（地图）2、泡泡 3、等待区域（新的3个即将进入棋盘的泡泡）4、奖励区域（白搭星、超级百搭星、炸弹）5、统计信息 6、按钮

所以在对象的设计方面起码要有几类 棋盘(map)、新泡泡区（ready）、奖励区（awards）、泡泡（bubble）、星星1(star1) 、星星2(star2) 、炸弹(boom)、统计积分（score），还要包括游戏背后的数据（data）。 OK，先这么规划，挨个的去实现。先把map和bubble重写了。 

之前把map写成了类，显然是不合适的，因为这个游戏不可能会有多个map，所以直接定义为对象更方便。而泡泡显然需要很多，所以需要写成类比较方便。游戏里面所有对象需要访问的全局变量和常量需要定义在一个game对象里，游戏开始则是调用game.start()的方法。所以先看下game的定义：

 
 
 
 
    
  
  
  
  
  1. var game = {   
    2. 
  
  
  
  
  2.     canvas: document.getElementById("canvas"),   
    3. 
  
  
  
  
  3.     ctx: this.canvas.getContext("2d"),   
    4. 
  
  
  
  
  4.     cellCount: 9,   
    5. 
  
  
  
  
  5.     cellWidth: 30,   
    6. 
  
  
  
  
  6.     lineCount: 5,   
    7. 
  
  
  
  
  7.     mode: 7,   
    8. 
  
  
  
  
  8.     colors: ["red", "#039518", "#ff00dc", "#ff6a00", "gray", "#0094ff", "#d2ce00"],   
    9. 
  
  
  
  
  9.     over: function () {   
    10. 
  
  
  
  
  10.         alert("GAME OVER");   
    11. 
  
  
  
  
  11.     },   
    12. 
  
  
  
  
  12.     getRandom: function (max) {   
    13. 
  
  
  
  
  13.         return parseInt(Math.random() * 1000000 % (max));   
    14. 
  
  
  
  
  14.     },   
    15. 
  
  
  
  
  15. }; 
    16.

cellCount就是格子的总数，cellwidth是每个格子的宽度，因为不光map里需要这个，所以就定义在了这里，mode 是游戏模式 5是简单 7是困难。
 再看下map的代码：

 
 
 
 
    
  
  
  
  
  1. game.map = {   
    2. 
  
  
  
  
  2.     startX: 40.5,   
    3. 
  
  
  
  
  3.     startY: 60.5,   
    4. 
  
  
  
  
  4.     width: game.cellCount * game.cellWidth,   
    5. 
  
  
  
  
  5.     height: game.cellCount * game.cellWidth,   
    6. 
  
  
  
  
  6.     bubbles: [],   
    7. 
  
  
  
  
  7.     init: function () {   
    8. 
  
  
  
  
  8.         for (var i = 0; i < game.cellCount; i++) {   
    9. 
  
  
  
  
  9.             var row = [];   
    10. 
  
  
  
  
  10.             for (var j = 0; j < game.cellCount; j++) {   
    11. 
  
  
  
  
  11.                 row.push(new Bubble(i, j, null));   
    12. 
  
  
  
  
  12.             }   
    13. 
  
  
  
  
  13.             this.bubbles.push(row);   
    14. 
  
  
  
  
  14.         }   
    15. 
  
  
  
  
  15.     },   
    16. 
  
  
  
  
  16.     draw: function () {   
    17. 
  
  
  
  
  17.         var ctx = game.ctx;   
    18. 
  
  
  
  
  18.         ctx.save();   
    19. 
  
  
  
  
  19.         ctx.translate(this.startX, this.startY);   
    20. 
  
  
  
  
  20.         ctx.beginPath();   
    21. 
  
  
  
  
  21.         for (var i = 0; i <= 9; i++) {   
    22. 
  
  
  
  
  22.     
    23. 
  
  
  
  
  23.             var p1 = i * game.cellWidth;;   
    24. 
  
  
  
  
  24.             ctx.moveTo(p1, 0);   
    25. 
  
  
  
  
  25.             ctx.lineTo(p1, this.height);   
    26. 
  
  
  
  
  26.     
    27. 
  
  
  
  
  27.             var p2 = i * game.cellWidth;   
    28. 
  
  
  
  
  28.             ctx.moveTo(0, p2);   
    29. 
  
  
  
  
  29.             ctx.lineTo(this.width, p2);   
    30. 
  
  
  
  
  30.         }   
    31. 
  
  
  
  
  31.         ctx.strokeStyle = "#555";   
    32. 
  
  
  
  
  32.         ctx.stroke();   
    33. 
  
  
  
  
  33.     
    34. 
  
  
  
  
  34.         //绘制子元素（所有在棋盘上的泡）   
    35. 
  
  
  
  
  35.         this.bubbles.forEach(function (row) {   
    36. 
  
  
  
  
  36.             row.forEach(function (bubble) {   
    37. 
  
  
  
  
  37.                 bubble.draw();   
    38. 
  
  
  
  
  38.             });   
    39. 
  
  
  
  
  39.         });   
    40. 
  
  
  
  
  40.         ctx.restore();   
    41. 
  
  
  
  
  41.     },   
    42. 
  
  
  
  
  42.     addBubble: function (bubble) {   
    43. 
  
  
  
  
  43.         var thisBubble = this.bubbles[bubble.x][bubble.y];   
    44. 
  
  
  
  
  44.         thisBubble.color = bubble.color;   
    45. 
  
  
  
  
  45.     },   
    46. 
  
  
  
  
  46.     getBubble: function (x, y) {   
    47. 
  
  
  
  
  47.         var thisBubble = this.bubbles[x][y];   
    48. 
  
  
  
  
  48.         if (!thisBubble.color) {   
    49. 
  
  
  
  
  49.             return null;   
    50. 
  
  
  
  
  50.         }   
    51. 
  
  
  
  
  51.         else {   
    52. 
  
  
  
  
  52.             return thisBubble;   
    53. 
  
  
  
  
  53.         }   
    54. 
  
  
  
  
  54.     }   
    55. 
  
  
  
  
  55. }; 
    56.

map的init初始化方法里我先把所有的泡泡部署好了，但是都没有染色，我并没有在ui的背后维护一个数组，因为我觉得泡泡有没有颜色就代表 0,1了，所以就这样也行。

draw方法不再想之前那样把起始坐标计算进去了，而是使用了translate方法，这样就很方便写代码了。
addBubble其实就是染色而已，接收参数是一个泡泡对象，这个对象来自ready区域的泡泡。

Ready区域其实就像俄罗斯方块那样，有三个预备的泡泡即将进入map区域。

 
 
 
 
    
  
  
  
  
  1. game.ready = {   
    2. 
  
  
  
  
  2.     startX: 40.5,   
    3. 
  
  
  
  
  3.     startY: 20.5,   
    4. 
  
  
  
  
  4.     width: game.cellWidth * 3,   
    5. 
  
  
  
  
  5.     height: game.cellWidth,   
    6. 
  
  
  
  
  6.     bubbles: [],   
    7. 
  
  
  
  
  7.     init: function () {   
    8. 
  
  
  
  
  8.         this.genrate();   
    9. 
  
  
  
  
  9.         var me = this;   
    10. 
  
  
  
  
  10.         me.flyin();   
    11. 
  
  
  
  
  11.     },   
    12. 
  
  
  
  
  12.     genrate: function () {   
    13. 
  
  
  
  
  13.         for (var i = 0; i < 3; i++) {   
    14. 
  
  
  
  
  14.             var color = game.colors[game.getRandom(game.mode)];   
    15. 
  
  
  
  
  15.             this.bubbles.push(new Bubble(i, 0, color));   
    16. 
  
  
  
  
  16.         }   
    17. 
  
  
  
  
  17.     },   
    18. 
  
  
  
  
  18.     draw: function () {   
    19. 
  
  
  
  
  19.         var ctx = game.ctx;   
    20. 
  
  
  
  
  20.         ctx.save();   
    21. 
  
  
  
  
  21.         ctx.translate(this.startX, this.startY);   
    22. 
  
  
  
  
  22.         ctx.beginPath();   
    23. 
  
  
  
  
  23.         ctx.strokeStyle = "#555";   
    24. 
  
  
  
  
  24.         ctx.strokeRect(0, 0, this.width, this.height);   
    25. 
  
  
  
  
  25.         ctx.stroke();   
    26. 
  
  
  
  
  26.         //绘制准备的泡   
    27. 
  
  
  
  
  27.         this.bubbles.forEach(function (bubble) {   
    28. 
  
  
  
  
  28.             bubble.draw();   
    29. 
  
  
  
  
  29.         });   
    30. 
  
  
  
  
  30.     
    31. 
  
  
  
  
  31.         ctx.restore();   
    32. 
  
  
  
  
  32.     },   
    33. 
  
  
  
  
  33. }; 
    34.

ready.init 初始化3个泡泡，并且把这3个泡泡“飞入”到map里，ready.draw很简单就是绘制一个小矩形和3个泡泡。

哦，对了，我们的泡泡的绘制代码也稍作了修改，现在的样子不是之前的纯色了，有了水晶效果。。。不妨看看： 

 
 
 
 
    
  
  
  
  
  1. Bubble.prototype.draw = function () {   
    2. 
  
  
  
  
  2.     if (!this.color) {   
    3. 
  
  
  
  
  3.         return;   
    4. 
  
  
  
  
  4.     }   
    5. 
  
  
  
  
  5.     var ctx = game.ctx;   
    6. 
  
  
  
  
  6.     ctx.beginPath();   
    7. 
  
  
  
  
  7.     //console.log("x:" + px + "y:" + py);   
    8. 
  
  
  
  
  8.     var gradient = ctx.createRadialGradient(this.px - 5, this.py - 5, 0, this.px, this.py, this.light);   
    9. 
  
  
  
  
  9.     gradient.addColorStop(0, "white");   
    10. 
  
  
  
  
  10.     gradient.addColorStop(1, this.color);   
    11. 
  
  
  
  
  11.     ctx.arc(this.px, this.py, 11, 0, Math.PI * 2);   
    12. 
  
  
  
  
  12.     ctx.strokeStyle = this.color;   
    13. 
  
  
  
  
  13.     ctx.fillStyle = gradient;   
    14. 
  
  
  
  
  14.     ctx.fill();   
    15. 
  
  
  
  
  15.     ctx.stroke();   
    16. 
  
  
  
  
  16. }; 
    17.

createRadialGradient方法是画一个放射性的圆，起始在左上角，这样就有个光照效果，还是不错的。 看下效果图吧

原文链接：http://www.cnblogs.com/mad/archive/2012/03/17/2392632.html

【编辑推荐】

  1. HTML 5游戏制作之五彩连珠（预览）
  2. HTML 5游戏制作之五彩连珠（画图）
  3. HTML 5游戏制作之五彩连珠（动画）
  4. HTML 5游戏制作之五彩连珠（寻路）
  5. HTML 5游戏制作之五彩连珠（试玩）

当前文章：HTML5游戏制作之五彩连珠（设计）
URL标题：http://www.gawzjz.com/qtweb/news13/167013.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

解决方案知识

各行业网站

成都网站设计　　 　分类目录网站　　 　四川盐亭做网站　　 　成都名片印刷　　 　南充做网站　　 　西信中心　　 　简阳电信服务器托管　　 　网站定制　　 　成都网站优化　　 　成都网站制作　　 　定制网站建设　　 　服务器租用　　 　外贸网站设计方案　　 　阿坝网站设计　　 　蓬安网站建设　　 　营销网站建设　　 　免备案空间　　 　成都微信开发　　 　成都移动机房　　 　物流公司网站建设方案