HTML5学习日记3------------js类的测试小程序

 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.fill;
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 });

 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 });

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.fill;
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 });