HTML5学习日记3------------js类的测试小程序
很久没懂的东西。平时想着打游戏~~
现在来说说使用js类的好处~~~
这是我写的一个人物移动的小demo~~~
仿java类~
首先第一个类GameFrame~
1 var GameFrame = JSC.createClass({ 2 initialize:function(){ 3 this.myCanvas = document.createElement("canvas"); 4 this.myCanvas.setAttribute("id", "mainFrame"); 5 this.myCanvas.setAttribute("width", "800"); 6 this.myCanvas.setAttribute("height", "600"); 7 this.myCanvas.setAttribute("onClick", "gameFrame.frameClick(event)"); 8 var canvasNav = document.getElementById("mainFrameNav"); 9 canvasNav.appendChild(this.myCanvas); 10 this.cxt = this.myCanvas.getContext("2d"); 11 this.player = new Role(this,"test",15,15); 12 this.cMap = new Map(this,0,0); 13 }, 14 print:function(frame){ 15 frame.clean(frame.cxt); 16 frame.cMap.draw(frame.cxt); 17 frame.player.draw(frame.cxt); 18 frame.draw(frame.cxt); 19 }, 20 clean:function(cxt){ 21 this.cxt.fillStyle="#ffffff"; 22 this.cxt.fillRect(0,0,this.myCanvas.getAttribute("width"),this.myCanvas.getAttribute("height")); 23 }, 24 frameClick:function(e){ 25 var t = e.target || e.srcElement; 26 var x = t.offsetLeft + t.clientLeft; 27 var y = t.offsetTop + t.clientTop; 28 this.player.moveTo(e.clientX-x,e.clientY-y); 29 }, 30 draw:function(cxt){ 31 cxt 32 } 33 });
这是游戏主窗口控制类~这里有一个我很郁闷的地方。就是print。js的定时器的使用问题。就不讨论了。
然后是地图类Map~
1 var Map = JSC.createClass({ 2 initialize:function(frame,x,y){ 3 //外框架对象 4 this.frame = frame; 5 //开始截图的坐标 6 this.x = x; 7 this.y = y; 8 //地图载入 9 this.cImg = new Image(); 10 this.cImg.src = "images/20.jpg"; 11 this.switchArray = new Array(); 12 this.switchArray[1] = new Switch(this,1500,1000); 13 }, 14 draw:function(cxt){ 15 cxt.drawImage( 16 this.cImg, 17 this.x, 18 this.y, 19 this.frame.myCanvas.getAttribute("width"), 20 this.frame.myCanvas.getAttribute("height"), 21 0, 22 0, 23 this.frame.myCanvas.getAttribute("width"), 24 this.frame.myCanvas.getAttribute("height") 25 ); 26 for(var switchObj in this.switchArray){ 27 this.switchArray[switchObj].draw(cxt); 28 } 29 30 }, 31 swicthMap:function(path){ 32 this.cImg.src = path; 33 }, 34 canMoveX:function(stepx){ 35 if(stepx > 0 && (this.x+Number(this.frame.myCanvas.getAttribute("width"))+stepx) <= this.cImg.width){ 36 this.x = this.x + stepx; 37 return true; 38 }else if(stepx < 0 && (this.x + stepx) >= 0){ 39 this.x = this.x + stepx; 40 return true; 41 }else if(stepx > 0) { 42 this.x = this.cImg.width - Number(this.frame.myCanvas.getAttribute("width")); 43 return false; 44 }else { 45 this.x = 0; 46 return false; 47 } 48 }, 49 canMoveY:function(stepy){ 50 if(stepy > 0 && (this.y+Number(this.frame.myCanvas.getAttribute("height"))+stepy) <= this.cImg.height){ 51 this.y = this.y + stepy; 52 return true; 53 }else if(stepy < 0 && (this.y + stepy) >= 0){ 54 this.y = this.y + stepy; 55 return true; 56 }else if(stepy > 0) { 57 this.y = this.cImg.height - Number(this.frame.myCanvas.getAttribute("height")); 58 return false; 59 }else { 60 this.y = 0; 61 return false; 62 } 63 } 64 });
这是游戏地图类~
接下来是人物类Role~
var Role = new JSC.createClass({ initialize:function(frame,name,x,y){ this.frame = frame; //角色名 this.name = name; //角色屏幕坐标 this.x = x; this.y = y; //角色地图坐标 this.wx = x; this.wy = y; //角色需要移动到的屏幕坐标 this.px; this.py; //角色需要移动到的地图坐标 this.pwx; this.pwy; //角色的移速 this.speed = 5; //角色的步伐 this.step = 0; //角色x坐标步伐 this.stepx = 0; //角色Y坐标步伐 this.stepy = 0; }, draw: function(cxt) { this.move(); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(this.x,this.y,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); }, move: function(){ if(Math.abs(this.wx-this.pwx)>this.speed){ var cx = this.x + this.stepx; if(this.stepx > 0){ if(this.x >= (this.frame.myCanvas.getAttribute("width")/2)) { if(this.frame.cMap.canMoveX(this.stepx)) this.x = this.x; else this.x = cx; }else { this.x = cx; } }else { if(this.x <= (this.frame.myCanvas.getAttribute("width")/2)) { if(this.frame.cMap.canMoveX(this.stepx)) this.x = this.x; else this.x = cx; }else { this.x = cx; } } this.wx = this.wx + this.stepx; } if(Math.abs(this.wy-this.pwy)>this.speed){ var cy = this.y + this.stepy; if(this.stepy > 0){ if(cy >= (this.frame.myCanvas.getAttribute("height")/2)) { if(this.frame.cMap.canMoveY(this.stepy)) this.y = this.y; else this.y = cy; }else { this.y = cy; } }else { if(cy <= (this.frame.myCanvas.getAttribute("height")/2)) { if(this.frame.cMap.canMoveY(this.stepy)) this.y = this.y; else this.y = cy; }else { this.y = cy; } } this.wy = this.wy + this.stepy; } }, moveTo: function(x,y){ this.px = x; this.py = y; this.pwx = this.wx + (this.px - this.x); this.pwy = this.wy + (this.py - this.y); var dis = Math.sqrt(Math.pow((this.px-this.x), 2) + Math.pow((this.py-this.y), 2)); this.step = dis/this.speed; this.stepx = (this.px-this.x)/this.step; this.stepy = (this.py-this.y)/this.step; } });
这是人物类~
接下来是地图切换类~
1 var Switch = JSC.createClass({ 2 initialize:function(map,x,y){ 3 this.x = x; 4 this.y = y; 5 this.r = 30; 6 this.map = map; 7 }, 8 draw:function(cxt){ 9 if(this.canSee()){ 10 cxt.fillStyle="#FF0000"; 11 cxt.beginPath(); 12 cxt.arc(this.x-this.map.x,this.y-this.map.y,this.r,0,Math.PI*2,true); 13 cxt.closePath(); 14 } 15 16 }, 17 swicthMap:function(path){ 18 this.cImg.src = path; 19 }, 20 canSee:function(){ 21 if(this.map.x <= (this.x+this.r) && 22 this.map.y <= (this.y+this.r) && 23 (this.map.frame.myCanvas.getAttribute("width")+this.map.x) >= (this.x-30) && 24 (this.map.frame.myCanvas.getAttribute("height")+this.map.y) >= (this.y-this.r) 25 ) 26 return true; 27 return false; 28 } 29 });
切换地图没有实现~
大概就是这样子。使用了js类之后开发起来感觉就是在开发C或者java代码。不过很多事件触发还是没有。。。
当然这只是小例子~不代表这可以开发游戏。
附件：小demo
