一共3个文件one.html, one.js, mymap.js
one.html:
<!DOCTYPE HTML>
<br> var c=document.getElementById("mycanvas");<br> var cxt=c.getContext("2d");<br> //�����ϰ�������<br> var obs=new Array();<br> //�����ϰ���<br> for(var i=0;i<map.length;i++)<br> {<br><br> if(map[i]!=0)<br> {<br> var ob=new Obstacle(parseInt(i%32)*30,parseInt(i/32)*30,map[i]);<br> obs.push(ob);<br> }</p> <pre><code> } drawObs() </script> </code></pre> <p></body><br> </html><br> one.js:<br> //定义障碍物类<br> function Obstacle(x,y,type)<br> {<br> this.x=x;<br> this.y=y;<br> this.width=30;<br> this.type=type;<br> this.isLive=true;<br> }<br> //画出障碍物<br> function drawObs()<br> {<br> for(var i=0;i<obs.length;i++)<br> {<br> if(obs[i].isLive)<br> {<br> var img=new Image();<br> if(obs[i].type==1)<br> {<br> img.src="zhuan.jpg";<br> }<br> else if(obs[i].type==2)<br> {<br> img.src="gang.jpg";<br> }<br> else<br> {<br> img.src="water.jpg";<br> }<br> img.onload=function(){<br> cxt.drawImage(img,obs[i].x,obs[i].y,obs[i].width,obs[i].width);</p> <pre><code> } } } </code></pre> <p>}<br> mymap.js:<br> var map = [<br> 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,<br> 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,<br> 0,0,0,0,2,2,2,2,2,2,2,2,2,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,<br> 0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,3,3,3,3,3,3,3,3,2,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,<br> 0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,<br> 0,0,0,0,2,1,1,1,1,1,1,1,2,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,<br> 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,<br> 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,<br> 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,<br> ];</p> <p>运行的时候显示黑黑的一片，不知道是哪里出了问题</p>
要用支持html5的浏览器浏览，比如chrome高版本、firefox高版本、ie11等。
网上查一下，支持html5的浏览器以及版本。
支持html5的浏览器以及版本