用javascript绘制超级玛丽

来源:岁月联盟 编辑:zhuzhu 时间:2009-01-11

    在文章“让javascript画布变成Silverlight”中,我讲过,有一个日本人,小雄他做了一个非常强大的js画布库,能将 javascript 转换为 Silverlight
这次要用到他的函数库,

 下面我就说下如何进行绘图,十分简单,我们只需要建立一个js数组,人性化的输出界面即可(如下)。 


Code
function boot() {
  draw(document.getElementById('canvas'));
  draw(document.getElementById('vmlcanvas'));
}
function draw(e) {
  var dot =
            "   11111    "+
            "  111111111 "+
            "  2223323   "+
            " 2323332333 "+
            " 23223332333"+
            " 2233332222 "+
            "   3333333  "+
            "  221222    "+
            " 2221221222 "+
            "222211112222"+
            "332131131233"+
            "331111111133"+
            "  111  111  "+
            " 222    222 "+
            "2222    2222";
  var ary = dot.split("");
  var data = [];
  var i, iz;
  for (i = 0, iz = ary.length; i < iz; ++i) {
    switch (parseInt(ary[i]) || 0) {
    case 0: data.push(""); break;
    case 1: data.push("#FF3900"); break;
    case 2: data.push("#AD7B00"); break;
    case 3: data.push("#FFA542"); break;
    }
  }
  uu.draw(e).scale(5, 5).icon(5, 25, 12, 15, data);
}

 上面的代码很简单,我们绘制一个绘图数组,下面直接分割输出即可。
注意下 .icon(x轴,y轴,数组的宽度,数组的高度)

  (这是我本人绘的)

 
我们将我们的视图数组存取为一个对象,就可以多次调用,或做动画。

    浏览器兼容方面无需担心, 因为这个库兼容能力很强,在IE下,它会把js 代码转化为 Silverlight ,如果客户没有安装
Silverlight,程序会解析为VML , 火狐和Google 就更兼容了因为他们本身就支持画布元素。

如果做游戏是首选,因为Silverlight 的速度相当不错,而且,都是以x,y轴来抒写,我们只要定义了画布,就不需要html div.
因为这个画布就是一个区域整体或控件。