ActionScript のような構文を使用して html5 を記述する - パート 3、マウス イベントとゲーム キャラクターの動き

パート 3、マウス イベントとゲーム キャラクターの動き

1. 仮定
マウス イベントを追加できるすべてのオブジェクトには MouseEvent メソッドがあり、追加されたマウス イベントはこの MouseEvent を通じて呼び出されると仮定します。
この場合、マウス イベントを追加するには、マウス イベントをキャンバスに追加し、LGlobal クラスの childList をループするだけです。つまり、マウス イベントが追加された場合は、すべてのビジュアル オブジェクトをループします。 、その後、対応するメソッドを呼び出します。
2 番目に、mouseEvent メソッドを LGlobal クラスに追加し、LGlobal クラスの setCanvas を変更して、キャンバス上にマウス イベントを追加して呼び出します。

LGlobal.setCanvas = function (id,width,height){  
    LGlobal.canvasObj = document.getElementById(id);  
    if(width)LGlobal.canvasObj.width = width;  
    if(height)LGlobal.canvasObj.height = height;  
    LGlobal.width = LGlobal.canvasObj.width;  
    LGlobal.height = LGlobal.canvasObj.height;  
    LGlobal.canvas = LGlobal.canvasObj.getContext("2d");  
      
    LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_DOWN,function(event){  
        LGlobal.mouseEvent(event,LMouseEvent.MOUSE_DOWN);  
    });  
}   
LGlobal.mouseEvent = function(event,type){  
    var key;  
    for(key in LGlobal.childList){  
        if(LGlobal.childList[key].mouseEvent){  
            LGlobal.childList[key].mouseEvent(event,type);  
        }  
    }  
}

2 保存するために、mouseList 配列を追加します。追加したマウスイベントを追加し、mouseEventメソッドを追加します

mouseEventメソッドでは、2つの処理を実行する必要があります。
1) マウスイベントを追加したかどうかを判断し、追加していない場合は、そのchildListをループします。
2) 追加した場合。マウスイベントは自分で判断してください。クリックされたかどうかは、LSprite はある意味では可視クラスですが、現在可視になっているのは、この Bitmap クラスの BitmapData です。正確には、BitmapDataのこのImageなので、クリックされたかどうかを判定するには、LSpriteのchildList内のビジュアルオブジェクトがクリックされたかどうかを判定する必要があります。クリックされた場合は、対応するメソッド

mouseEvent:function (event,type,cood){  
        if(cood==null)cood={x:0,y:0};  
        var self = this;  
        if(self.mouseList.length == 0){  
            for(key in self.childList){  
                if(self.childList[key].mouseEvent){  
                    self.childList[key].mouseEvent(event,type,{x:self.x+cood.x,y:self.y+cood.y});  
                }  
            }  
            return;  
        }  
        if(self.childList.length == 0)return;  
        var key;  
        var isclick = false;  
        for(key in self.childList){  
            isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});  
            if(isclick)break;  
        }  
        if(isclick){  
            for(key in self.mouseList){  
                var obj = self.mouseList[key];  
                if(obj.type == type){  
                    event.selfX = event.offsetX - (self.x+cood.x);  
                    event.selfY = event.offsetY - (self.y+cood.y);  
                    event.currentTarget = self;  
                    obj.listener(event);  
                }  
            }  
            return;  
        }  
          
    },  
    ismouseon:function(event,cood){  
        var self = this;  
        var key;  
        var isclick = false;  
        for(key in self.childList){  
            isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});  
            if(isclick)break;  
        }  
        return isclick;  
    }

を呼び出します。クリックされたかどうかを判定する ismouseon メソッド

LBitmap クラスもクリックされたかどうかを判定する必要があるので ismouseon

ismouseon:function(event,cood){  
        var self = this;  
        if(event.offsetX >= self.x + cood.x && event.offsetX <= self.x + cood.x + self.width &&   
            event.offsetY >= self.y + cood.y && event.offsetY <= self.y + cood.y + self.height){  
            return true;  
        }else{  
            return false;  
        }  
    }

マウスイベントを追加するときは ActionScript の構文を真似してください

backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);

次にマップと文字を用意しますウォーキングチャートを作成し、マウスイベントを使用してキャラクターを制御します。

init(80,"back",800,480,main);  
  
  
var list = new Array();  
var index = 0;  
var backLayer;  
//地图  
var mapimg;  
//人物  
var playerimg;  
var loader  
var imageArray;  
var animeIndex = 0;  
var dirindex = 0;  
var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1},{x:-1,y:1},{x:1,y:1},{x:-1,y:-1},{x:1,y:-1});  
var dirmark = {"0,1":0,"-1,0":1,"1,0":2,"0,-1":3,"-1,1":4,"1,1":5,"-1,-1":6,"1,-1":7};  
  
  
//移动目标  
var toX = 0;  
var toY = 0;  
function main(){  
      
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    loader.load("back.jpg","bitmapData");  
}  
function loadBitmapdata(event){  
    var bitmapdata = new LBitmapData(loader.content);  
    mapimg = new LBitmap(bitmapdata);  
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadOver);  
    loader.load("1.png","bitmapData");  
}  
function loadOver(event){  
    var bitmapdata = new LBitmapData(loader.content,0,0,70,92);  
    imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);  
    document.getElementById("inittxt").innerHTML="";  
    playerimg = new LBitmap(bitmapdata);  
    playerimg.bitmapData.setCoordinate(0,0);  
    index = 0;  
    backLayer = new LSprite();  
    addChild(backLayer);  
    backLayer.addChild(mapimg);  
    backLayer.addChild(playerimg);  
    backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)  
    backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);  
}  
  
  
function onframe(){  
    index++;  
    if(index >= imageArray[0].length){  
        index = 0;  
    }  
    var markx = 0,marky = 0;  
    var l = 3;  
    if(playerimg.x > toX){  
        playerimg.x -= l;  
        markx = -1;  
    }else if(playerimg.x < toX){  
        playerimg.x += l;  
        markx = 1;  
    }  
    if(playerimg.y > toY){  
        playerimg.y -= l;  
        marky = -1;  
    }else if(playerimg.y < toY){  
        playerimg.y += l;  
        marky = 1;  
    }  
    if(markx !=0 || marky != 0){  
        var mark = markx+","+marky;  
        dirindex = dirmark[mark];  
    }  
    playerimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y);  
}  
function onmousedown(event){  
    toX = parseInt(event.selfX/3)*3;  
    toY = parseInt(event.selfY/3)*3;  
}

上記は、ActionScript のような構文を使用して HTML5 を作成する方法です - 3 番目の記事、マウスイベントとゲームキャラクターの移動の内容については、さらに関連した内容をご覧ください。 PHP 中国語 Web サイト (www.php.cn) にご注意ください。