基於HTML5實現的橫版射擊遊戲詳解

功能說明：

　　基於HTML5的橫版射擊遊戲，參考自flash遊戲《雙面特工》。 ##　　此遊戲基於自己開發的HTML5遊戲框架cnGameJS。 ##實現分析：

　　

1.關於多層地圖。簡單的單層地圖，意思是地圖中除了石頭就是空地，僅僅只有一層的地圖。 ），只有一層的地圖往往是不夠的，因為我們除了遊戲主角所站的障礙物外，還有遊戲背景等元素（例如後面的牆壁等），因此我們需要為地圖對象分層，從而達到多圖層展示的目的。的值。 #　　　在上一次的HTML5《遊戲超級瑪麗遊戲demo》中，我們透過讓遊戲玩家的移動轉換為遊戲場景的移動來實現玩家固定，場景移動的效果，但是這種實現方法有比較大的問題，因為它干涉了地圖和玩家的xy值的變化，因此會帶來許多不便。原點的座標。下，在繪製時使view固定，其他遊戲元素相對於view移動，實現移動背景的效果。只需要在初始化時：

/**
        *层对象
        **/                               
        var layer = function(id,mapMatrix, options) {
    
            if (!(this instanceof arguments.callee)) {
                return new arguments.callee(id,mapMatrix, options);
            }
            this.init(id,mapMatrix, options);
        }
        layer.prototype={
            
            /**
            *初始化
            **/
            init: function(id,mapMatrix,options) {
                /**
                *默认对象
                **/    
                var defaultObj = {
                    cellSize: [32, 32],   //方格宽，高
                    x: 0,                      //layer起始x
                    y: 0                  //layer起始y
    
                };    
                options = options || {};
                options = cg.core.extend(defaultObj, options);
                this.id=options.id;
                this.mapMatrix = mapMatrix;
                this.cellSize = options.cellSize;
                this.x = options.x;
                this.y = options.y;
                this.row = mapMatrix.length; //有多少行
                this.width=this.cellSize[0]* mapMatrix[0].length;
                this.height=this.cellSize[1]* this.row;
                this.spriteList=new cg.SpriteList();//该层上的sprite列表
                this.imgsReference=options.imgsReference;//图片引用字典：{"1":{src:"xxx.png",x:0,y:0},"2":{src:"xxx.png",x:1,y:1}}
                this.zIindex=options.zIndex;
            },
            /**
            *添加sprite
            **/            
            addSprites:function(sprites){
                if (cg.core.isArray(sprites)) {
                    for (var i = 0, len = sprites.length; i < len; i++) {
                        arguments.callee.call(this, sprites[i]);
                    }
                }
                else{
                    this.spriteList.add(sprites);
                    sprites.layer=this;
                }                
                
            },
            /**
            *获取特定对象在layer中处于的方格的值
            **/
            getPosValue: function(x, y) {
                if (cg.core.isObject(x)) {
                    y = x.y;
                    x = x.x;
                }
                var isUndefined = cg.core.isUndefined;
                y = Math.floor(y / this.cellSize[1]);
                x = Math.floor(x / this.cellSize[0]);
                if (!isUndefined(this.mapMatrix[y]) && !isUndefined(this.mapMatrix[y][x])) {
                    return this.mapMatrix[y][x];
                }
                return undefined;
            },
            /**
            *获取特定对象在layer中处于的方格索引
            **/
            getCurrentIndex: function(x, y) {
                if (cg.core.isObject(x)) {
                    y = x.y;
                    x = x.x;
                }
                return [Math.floor(x / this.cellSize[0]), Math.floor(y / this.cellSize[1])];
            },
            /**
            *获取特定对象是否刚好与格子重合
            **/
            isMatchCell: function(x, y) {
                if (cg.core.isObject(x)) {
                    y = x.y;
                    x = x.x;
                }
                return (x % this.cellSize[0] == 0) && (y % this.cellSize[1] == 0);
            },
            /**
            *设置layer对应位置的值
            **/
            setPosValue: function(x, y, value) {
                this.mapMatrix[y][x] = value;
            },
            /**
            *更新层上的sprite列表
            **/            
            update:function(duration){
                this.spriteList.update(duration);
                
            },
            /**
            *根据layer的矩阵绘制layer和该layer上的所有sprite
            **/
            draw: function() {
                var mapMatrix = this.mapMatrix;
                var beginX = this.x;
                var beginY = this.y;
                var cellSize = this.cellSize;
                var currentRow;
                var currentCol
                var currentObj;
                var row = this.row;
                var img;
                var col;
                for (var i = beginY, ylen = beginY + row * cellSize[1]; i < ylen; i += cellSize[1]) {    //根据地图矩阵，绘制每个方格
                    currentRow = (i - beginY) / cellSize[1];
                    col=mapMatrix[currentRow].length;
                    for (var j = beginX, xlen = beginX + col * cellSize[0]; j < xlen; j += cellSize[0]) {
                        currentCol = (j - beginX) / cellSize[0];
                        currentObj = this.imgsReference[mapMatrix[currentRow][currentCol]];
                        if(currentObj){
                            currentObj.x = currentObj.x || 0;
                            currentObj.y = currentObj.y || 0;
                            img = cg.loader.loadedImgs[currentObj.src];
                            //绘制特定坐标的图像
                            cg.context.drawImage(img, currentObj.x, currentObj.y, cellSize[0], cellSize[1], j, i, cellSize[0], cellSize[1]); 
                        }
                    }
                }
                //更新该layer上所有sprite
                this.spriteList.draw();
    
            }
        }

　　在繪製時：

/*    背景矩阵    */
var bgMatrix = [
                    [1,1,1],
                    [1,1,1],
                    [1,1,1]
                ];

this.map = new cnGame.Map({width:3000,height:3000});
var newLayer=new cnGame.Layer("bg",bgMatrix, { cellSize: [1000, 1000], width: this.map.width, height: this.map.height });
newLayer.imgsReference={ "1": { src: srcObj.bg }};
this.map.addLayer(newLayer);

　　這樣map內所有元素都會相對於view而移動。

　　而applyInView的實作原理也非常簡單，它只是不斷使繪製的原點和view的座標等長且相反：

   this.view=new cnGame.View({map:this.map,x:0,y:0,width:cnGame.width,height:cnGame.height});
        this.view.centerElem(this.player,true);

　　這樣無論view的座標如何變化，view在視覺上始終固定在

canvas，其他元素的座標在視覺上始終相對於view。

 

以上是基於HTML5實現的橫版射擊遊戲詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！