WEB开发网
开发学院网页设计JavaScript 用javascript绘制超级玛丽 阅读

用javascript绘制超级玛丽

 2010-09-14 13:35:16 来源:WEB开发网   
核心提示:下面我就说下如何进行绘图,十分简单,用javascript绘制超级玛丽,我们只需要建立一个js数组,人性化的输出界面即可(如下),都是以x,y轴来抒写,我们只要定义了画布,functionboot(){draw(document.getElementById('canvas'));draw(docume

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

用javascript绘制超级玛丽

functionboot(){
 draw(document.getElementById('canvas'));
 draw(document.getElementById('vmlcanvas'));
}
functiondraw(e){
 vardot=
      " 11111  "+
      " 111111111"+
      " 2223323 "+
      "2323332333"+
      "23223332333"+
      "2233332222"+
      " 3333333 "+
      " 221222  "+
      "2221221222"+
      "222211112222"+
      "332131131233"+
      "331111111133"+
      " 111 111 "+
      "222  222"+
      "2222  2222";
 varary=dot.split("");
 vardata=[];
 vari,iz;
 for(i=0,iz=ary.length;i<iz;++i){
  switch(parseInt(ary[i])||0){
  case0:data.push("");break;
  case1:data.push("#FF3900");break;
  case2:data.push("#AD7B00");break;
  case3:data.push("#FFA542");break;
  }
 }
 uu.draw(e).scale(5,5).icon(5,25,12,15,data);
}

上面的代码很简单,我们绘制一个绘图数组,下面直接分割输出即可。

注意下 .icon(x轴,y轴,数组的宽度,数组的高度)

用javascript绘制超级玛丽 (这是我本人绘的)

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

浏览器兼容方面无需担心, 因为这个库兼容能力很强,在IE下,它会把js 代码转化为 Silverlight ,如果客户没有安装

Silverlight,程序会解析为VML , 火狐和Google 就更兼容了因为他们本身就支持画布元素。

如果做游戏是首选,因为Silverlight 的速度相当不错,而且,都是以x,y轴来抒写,我们只要定义了画布,就不需要html div.

因为这个画布就是一个区域整体或控件。

Tags:javascript 绘制 超级

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接