HTML5第一人称射击游戏实现的代码分享(2)-木庄网络博客

当前第2页返回上一页

/*  检测是否获得钥匙    */
var checkGetKeys = function() {
    var list = cnGame.spriteList;
    var playerRect= this.player.getRect();
    for (var i = 0, len = list.length; i < len; i++) {
        if (list[i] instanceof key) {
            if (cnGame.collision.col_Between_Rects(list[i].getRect(),playerRect)) {
                this.keysValue.push(list[i].keyValue);
                list.remove(list[i]);
                i--;
                len--;
            }
        }
    }
 
}

4.如何同时把游戏元素和游戏场景同时绘制在屏幕上并且保持正确的先后关系？

　　在css里，我们可以使用z-Index使元素保持正确的层级关系，但是我们现在需要在canvas上绘制图形，因此只能模拟出z-Index效果。

　　在之前那篇文章中说过，3D场景是由一条条不同长短的像素线的绘制而成，因此在加入了其他游戏元素之后，若要保持正确的层级关系，就需要为每个元素和像素线自定义zIndex属性，并存放在数组中。每次绘制的时候数组根据zIndex排序，使绘制有一个先后顺序，从而保证层级正确。zIndex的值根据玩家到该元素或像素线的距离计算所得：

1	`zIndex= Math.floor(1 / distant * 10000)`

　　之后每次绘制就可以产生近的图像覆盖在远的图像上的效果：

　　排序：

colImgsArray.sort(function(obj1, obj2) {
 
            if (obj1.zIndex > obj2.zIndex) {
                return 1;
            }
            else if (obj1.zIndex < obj2.zIndex) {
                return -1;
            }
            else {
                return 0;
            }
        });

　　绘制：

//画出每条像素线和游戏元素
        for (var i = 0, len = colImgsArray.length; i < len; i++) {
            var obj = colImgsArray[i];
            if(obj.draw){
                obj.draw();
            }
            else{
                context.drawImage(obj.img, obj.oriX, obj.oriY, obj.oriWidth, obj.oriHeight, obj.x, obj.y, obj.width, obj.height);
            }
        }

　　5.如何判断玩家击中敌人？

　　玩家击中敌人的判别其实也是利用碰撞检测，不过这次是利用元素在屏幕上的对象进行碰撞检测。我们只需要检测准星（屏幕中点）与敌人对象所形成的矩形是否产生碰撞，就可以检测到是否击中了敌人。

for (var i = list2.length - 1; i >= 0; i--) {
        if (list2[i] instanceof enemy2 && list2[i].relatedParent.isShooting) {
            var obj = list2[i];
            var enemyRect = obj.getRect();//构造敌人在屏幕上形成的矩形对象
            if (cnGame.collision.col_Point_Rect(starPos[0], starPos[1], enemyRect)) {
                obj.setCurrentAnimation("enemyDie");    
                break;
            }
        }
    }