Question

我正在尝试用Javascript进行一些简单的游戏编程，并且已经意识到我需要改变我处理精灵的方式。唯一的问题是，“如何”？

我有一个英雄用箭头键移动并用WASD激发激光射线。这是我定义光线的方式：

function Ray (x, y, width, height, direction, index) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.direction = direction;
    this.index = index;
    this.speed = 512;
    this.disabled = false;
}

索引仅指示存储的光线数组（heh）中的位置。我目前有5个同时光线的硬编码限制，但其他限制（屏幕尺寸，光线大小，速度，英雄大小等）不应允许超过4：

var rays = [];
var numberOfRays = 0;
var rayLimit = 5;
var shotClock = 300;

因此，在游戏循环调用的update（）函数中，我有WASD键的监听器。它们看起来像这样：

// D
    if (68 in keysDown && numberOfRays <= rayLimit && Date.now() - lastShootTime > shotClock) {
        lastShootTime = Date.now();
        var newRayIndex = findFreeRay();        
        rays[newRayIndex] = new Ray(hero.x + hero.width + 12, hero.y + hero.height / 2, rayImage.width, rayImage.height, 'right', newRayIndex);         
        numberOfRays++;                 
    }

（findFreeRay（）只返回光线[]中最低的未使用或禁用（屏幕外）索引

更新（）方法的早期（我之前也尝试过）我有更新光线移动的逻辑：

rays.forEach(function(ray) {
        if (ray != null && !ray.disabled) {
            switch(ray.direction) {
                case 'right':
                    ray.x += ray.speed * modifier;                  
                    break;
                case 'left':
                    ray.x -= ray.speed * modifier;
                    break;
                case 'up':
                    ray.y -= ray.speed * modifier;
                    break;
                case 'down':
                    ray.y += ray.speed * modifier;
                    break;
            }
        }       
    });

最后，有光线的图像（实际上，一个用于水平光线，另一个用于垂直光线）。目前，我正在使用每个全局的一个Image对象，即现有的光线共享。但是我也没有太多运气，为每条射线创建单独的图像对象。

// Ray images
var rayReady = false;
var rayImage = new Image();
rayImage.onload = function() {
    rayReady = true;
};
rayImage.src = "images/ray.png";

var rayVertReady = false;
var rayVertImage = new Image();
rayVertImage.onload = function() {
    rayVertReady = true;
};
rayVertImage.src = "images/ray_vert.png";

以下是他们的绘制方式：

if (rayReady && rayVertReady && numberOfRays > 0) {
        rays.forEach(function(ray) {            
            if (ray.x > canvas.width
                    || ray.x + ray.width < 0
                    || ray.y > canvas.height
                    || ray.y + ray.height < 0) {                        
                        numberOfRays--;                 
                        ray.disabled = true;                    
                }
            else if (ray.direction == 'right' || ray.direction == 'left'){
                ctx.drawImage(rayImage, ray.x, ray.y);          
            }
            else {
                ctx.drawImage(rayVertImage, ray.x, ray.y);
            }               
        });     
    }

问题在拍摄了几条光线之后，新光线开始闪烁并消失，或完全保持隐形。它们实际上作为游戏对象存在，因为它们可以击中目标。

什么可能导致这种闪烁？

（以Matt Hackett为代码的基础）

小提琴：http://jsfiddle.net/Vr3MW/

为什么我的激光射线会闪烁？

0 个答案: