HTML5游戏制作之五彩连珠（预览）

HTML5推出也有很长一段时间了，一直没有学习过，闲来无事学习开发个游戏吧。  用javascript+canvas编写一个五彩连珠的游戏。

成都创新互联公司是一家专业从事网站设计、做网站、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,成都创新互联公司依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务！

Canvas 画布

标签，很简单和普通的tag没区别。 关键在于js对他的操作。先看个示例代码：

  
 
 
 
    
   
  
  
  
  1.   
    2.    
  
  
  
  2.  
    3.

你能看到想到我画的是什么吗？  ctx是canvas的绘制的类型2D的，以后会支持3D，那木，目前基于canvas的绘制都是调用2d context的方法。所以要了解绘制各种图形，得先看看他的api。

  
 
 
 
    
   
  
  
  
  1. interface CanvasRenderingContext2D {  
    2.    
  
  
  
  2.  
    3.    
  
  
  
  3.   // back-reference to the canvas  
    4.    
  
  
  
  4.   readonly attribute HTMLCanvasElement canvas;  
    5.    
  
  
  
  5.  
    6.    
  
  
  
  6.   // state  
    7.    
  
  
  
  7.   void save(); // push state on state stack  
    8.    
  
  
  
  8.   void restore(); // pop state stack and restore state  
    9.    
  
  
  
  9.   // transformations (default transform is the identity matrix)  
    10.    
  
  
  
  10.   void scale(in double x, in double y);  
    11.    
  
  
  
  11.   void rotate(in double angle);  
    12.    
  
  
  
  12.   void translate(in double x, in double y);  
    13.    
  
  
  
  13.   void transform(in double a, in double b, in double c, in double d, in double e, in double f);  
    14.    
  
  
  
  14.   void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);  
    15.    
  
  
  
  15.   // compositing  
    16.    
  
  
  
  16.            attribute double globalAlpha; // (default 1.0)  
    17.    
  
  
  
  17.            attribute DOMString globalCompositeOperation; // (default source-over)  
    18.    
  
  
  
  18.   // colors and styles  
    19.    
  
  
  
  19.            attribute any strokeStyle; // (default black)  
    20.    
  
  
  
  20.            attribute any fillStyle; // (default black)  
    21.    
  
  
  
  21.   CanvasGradient createLinearGradient(in double x0, in double y0, in double x1, in double y1);  
    22.    
  
  
  
  22.   CanvasGradient createRadialGradient(in double x0, in double y0, in double r0, in double x1, in double y1, in double r1);  
    23.    
  
  
  
  23.   CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);  
    24.    
  
  
  
  24.   CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);  
    25.    
  
  
  
  25.   CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);  
    26.    
  
  
  
  26.  
    27.    
  
  
  
  27.   // line caps/joins  
    28.    
  
  
  
  28.            attribute double lineWidth; // (default 1)  
    29.    
  
  
  
  29.            attribute DOMString lineCap; // "butt", "round", "square" (default "butt")  
    30.    
  
  
  
  30.            attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")  
    31.    
  
  
  
  31.            attribute double miterLimit; // (default 10)  
    32.    
  
  
  
  32.  
    33.    
  
  
  
  33.   // shadows  
    34.    
  
  
  
  34.            attribute double shadowOffsetX; // (default 0)  
    35.    
  
  
  
  35.            attribute double shadowOffsetY; // (default 0)  
    36.    
  
  
  
  36.            attribute double shadowBlur; // (default 0)  
    37.    
  
  
  
  37.            attribute DOMString shadowColor; // (default transparent black)  
    38.    
  
  
  
  38.  
    39.    
  
  
  
  39.   // rects  
    40.    
  
  
  
  40.   void clearRect(in double x, in double y, in double w, in double h);  
    41.    
  
  
  
  41.   void fillRect(in double x, in double y, in double w, in double h);  
    42.    
  
  
  
  42.   void strokeRect(in double x, in double y, in double w, in double h);  
    43.    
  
  
  
  43.  
    44.    
  
  
  
  44.   // path API  
    45.    
  
  
  
  45.   void beginPath();  
    46.    
  
  
  
  46.   void closePath();  
    47.    
  
  
  
  47.   void moveTo(in double x, in double y);  
    48.    
  
  
  
  48.   void lineTo(in double x, in double y);  
    49.    
  
  
  
  49.   void quadraticCurveTo(in double cpx, in double cpy, in double x, in double y);  
    50.    
  
  
  
  50.   void bezierCurveTo(in double cp1x, in double cp1y, in double cp2x, in double cp2y, in double x, in double y);  
    51.    
  
  
  
  51.   void arcTo(in double x1, in double y1, in double x2, in double y2, in double radius);  
    52.    
  
  
  
  52.   void rect(in double x, in double y, in double w, in double h);  
    53.    
  
  
  
  53.   void arc(in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise);  
    54.    
  
  
  
  54.   void fill();  
    55.    
  
  
  
  55.   void stroke();  
    56.    
  
  
  
  56.   void clip();  
    57.    
  
  
  
  57.   boolean isPointInPath(in double x, in double y);  
    58.    
  
  
  
  58.  
    59.    
  
  
  
  59.   // Focus management  
    60.    
  
  
  
  60.   boolean drawFocusRing(in Element element, in optional boolean canDrawCustom);  
    61.    
  
  
  
  61.  
    62.    
  
  
  
  62.   // Caret and selection management  
    63.    
  
  
  
  63.   long caretBlinkRate();  
    64.    
  
  
  
  64.   boolean setCaretSelectionRect(in Element element, in double x, in double y, in double w, in double h);  
    65.    
  
  
  
  65.  
    66.    
  
  
  
  66.   // text  
    67.    
  
  
  
  67.            attribute DOMString font; // (default 10px sans-serif)  
    68.    
  
  
  
  68.            attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")  
    69.    
  
  
  
  69.            attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")  
    70.    
  
  
  
  70.   void fillText(in DOMString text, in double x, in double y, in optional double maxWidth);  
    71.    
  
  
  
  71.   void strokeText(in DOMString text, in double x, in double y, in optional double maxWidth);  
    72.    
  
  
  
  72.   TextMetrics measureText(in DOMString text);  
    73.    
  
  
  
  73.  
    74.    
  
  
  
  74.   // drawing images  
    75.    
  
  
  
  75.   void drawImage(in HTMLImageElement image, in double dx, in double dy, in optional double dw, in double dh);  
    76.    
  
  
  
  76.   void drawImage(in HTMLImageElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);  
    77.    
  
  
  
  77.   void drawImage(in HTMLCanvasElement image, in double dx, in double dy, in optional double dw, in double dh);  
    78.    
  
  
  
  78.   void drawImage(in HTMLCanvasElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);  
    79.    
  
  
  
  79.   void drawImage(in HTMLVideoElement image, in double dx, in double dy, in optional double dw, in double dh);  
    80.    
  
  
  
  80.   void drawImage(in HTMLVideoElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);  
    81.    
  
  
  
  81.  
    82.    
  
  
  
  82.   // pixel manipulation  
    83.    
  
  
  
  83.   ImageData createImageData(in double sw, in double sh);  
    84.    
  
  
  
  84.   ImageData createImageData(in ImageData imagedata);  
    85.    
  
  
  
  85.   ImageData getImageData(in double sx, in double sy, in double sw, in double sh);  
    86.    
  
  
  
  86.   void putImageData(in ImageData imagedata, in double dx, in double dy, in optional double dirtyX, in double dirtyY, in double dirtyWidth, in double dirtyHeight);  
    87.    
  
  
  
  87. };  
    88.    
  
  
  
  88.  
    89.    
  
  
  
  89. interface CanvasGradient {  
    90.    
  
  
  
  90.   // opaque object  
    91.    
  
  
  
  91.   void addColorStop(in double offset, in DOMString color);  
    92.    
  
  
  
  92. };  
    93.    
  
  
  
  93.  
    94.    
  
  
  
  94. interface CanvasPattern {  
    95.    
  
  
  
  95.   // opaque object  
    96.    
  
  
  
  96. };  
    97.    
  
  
  
  97.  
    98.    
  
  
  
  98. interface TextMetrics {  
    99.    
  
  
  
  99.   readonly attribute double width;  
    100.    
  
  
  
  100. };  
    101.    
  
  
  
  101.  
    102.    
  
  
  
  102. interface ImageData {  
    103.    
  
  
  
  103.   readonly attribute unsigned long width;  
    104.    
  
  
  
  104.   readonly attribute unsigned long height;  
    105.    
  
  
  
  105.   readonly attribute CanvasPixelArray data;  
    106.    
  
  
  
  106. };  
    107.    
  
  
  
  107.  
    108.    
  
  
  
  108. interface CanvasPixelArray {  
    109.    
  
  
  
  109.   readonly attribute unsigned long length;  
    110.    
  
  
  
  110.   getter octet (in unsigned long index);  
    111.    
  
  
  
  111.   setter void (in unsigned long index, in octet value);  
    112.    
  
  
  
  112. }; 
    113.

上面的内容是我粘贴的官方的，一目了然。

既然我们知道了lineTo和moveTo的功能，那么我们先把游戏的格子棋盘先画出来：

  
 
 
 
    
   
  
  
  
  1.  
    2.    
  
  
  
  2.  
    3.

从运行效果可以看到我们的棋盘是从10像素的位置开始画的，画了个9*9格子的五彩连珠棋盘。

今天入门就到这里，下一节讲怎么画一个球。。。

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

责任编辑：张伟
来源： 君之蘭的博客 HTML5

网站题目：HTML5游戏制作之五彩连珠（预览）
网站URL：http://www.hantingmc.com/qtweb/news29/157279.html

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

广告

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

猜你还喜欢下面的内容

搜索引擎优化知识

分类信息网站

南部网站建设　　 　成都网站建设　　 　网站设计公司　　 　香港虚拟主机空间　　 　成都众诚伟业　　 　平城网站运维　　 　宜宾冠赛网站　　 　品牌网站定制　　 　保温橡塑管　　 　手机网站建设　　 　成都品牌网站设计　　 　成都网站制作　　 　网页改版　　 　宇仓仓储　　 　LED亮化工程　　 　成都铁科精智测控　　 　重庆水土三线托管　　 　成都网站维护　　 　彭州网站建设　　 　主机租用