Javascript游戏麻烦

Posted

技术标签:

【中文标题】Javascript游戏麻烦【英文标题】:Javascript game trouble 【发布时间】:2012-02-29 06:28:12 【问题描述】:

我正在使用 html5 的 canvas API 用 Ja​​vascript 制作游戏,但遇到了障碍。

其中一个游戏效果是导弹沿 y 轴向上飞行,它受到沿 x 轴移动的阵风(由涡轮机发出)的影响。我制造其中一台涡轮机没有问题,但是当它们的数量增加到 3 台时,我遇到了麻烦。 在一个新的层次上,我将这些涡轮机实例化为对象,然后将其推入一个数组中,如下所示:

function gameStateNewLevel()

    for (var i = 0; i < 2; i++)
        turbine = ;
        turbine.width = 10;
        turbine.height = Math.floor(Math.random()*200); //turbine height
        turbine.y = Math.floor(Math.random()*600) //turbine y-axis 
        if (Math.random()*10 > 5) //indicates turbine side of canvas
            turbine.side = leftSide;
        else
            turbine.side = rightSide;
        
        if(turbine.height <= 100) //Increases turb. size if it's too small
            turbine.height += Math.floor(Math.random()*100);
        

        turbines.push(turbine);

    

    context.fillStyle = "#FFFFFF"       
    switchGameState(GAME_STATE_PLAYER_START);

现在,在渲染它们之前,它们也会通过 updateTurbine 函数进行更新。所有这个函数应该做的是确保涡轮机没有相互重叠,并根据需要将它们向上或向下移动 y 轴(通过循环遍历数组并比较其中的每个对象)。我已经尝试过制作这个功能,但我完全迷失在所有循环之间。就我所知,这差不多,我感觉我走错了路:

function updateTurbines()
    tempTurbine = 
    turbinePositionTop = tempTurbine.y;
    turbinePositionBottom = tempTurbine.y + tempTurbine.height;
    for (var i = turbineArrayLength; i < 2; i++)
        tempTurbine = turbines[i];
        for (var i = turbineArrayLength; i < 2; i++)
            if (tempTurbine !== tempTurbines[i])
                while ()

                
               
        
    

你可以在 www.techgoldmine.com 找到源代码和我得到的最远的东西而不破坏这个东西

【问题讨论】:

建议:您的if(turbine.height &lt;= 100) 应该是while(turbine.height &lt;= 100),以防新号码仍低于 100。 @Jeffrey 或者从一开始就使用100 + Math.random()*100... @Andrew 是的...这可能是一个更好的主意 :) 【参考方案1】:

您的代码中有错误,请在此处查看 cmets:

function updateTurbines()
    tempTurbine = 
    turbinePositionTop = tempTurbine.y; // tempTurbine is an empty object right now so .y is undefined
    turbinePositionBottom = tempTurbine.y + tempTurbine.height; // same problem here
    for (var i = turbineArrayLength; i < 2; i++) // why am I starting at the end of the array? What's the 2 for?
        tempTurbine = turbines[i];
        for (var i = turbineArrayLength; i < 2; i++) // why am I doing this twice? I'm also clobbering the value of "i"
            if (tempTurbine !== tempTurbines[i])
                while ()

                
               
        
    

这是我在不知道它在做什么的情况下重写它的方法:

function updateTurbines()
    var l = turbines[i].length; // get the turbine length directly from the array[1]
    for (var i = 0; i < l; i++) // go through all of the turbines
        var tempTurbine = turbines[i];
        turbinePositionTop = tempTurbine.y; // now .y is defined because tempTurbine is not an empty object
        turbinePositionBottom = tempTurbine.y + tempTurbine.height;
        for (var j = 0; j < l; j++)  // NOT i but j here
            if (tempTurbine !== tempTurbines[j])
                while ()
                     // ...
                
               
        
    

[1] 如果您修改数组,这可能会导致错误。我假设你现在只添加它。

【讨论】:

感谢您的回复。明天我会试一试,然后告诉你结果如何,我真的很感激。 嘿,只是想说你很亲密,但这是错误的。 var l = 涡轮机[i].length;这只得到了当前对象的长度。 tempTurbine 也没有正确定义,在第 8 行它应该是 tempTurbine[j]。无论哪种方式,它都没有奏效。我已经在答案中发布了工作代码。【参考方案2】:

您的问题可能是索引重叠;内循环正在改变外循环的i 值。

我在内部循环中将i 更改为j

function updateTurbines()
    tempTurbine = 
    turbinePositionTop = tempTurbine.y;
    turbinePositionBottom = tempTurbine.y + tempTurbine.height;
    for (var i = turbineArrayLength; i < 2; i++)
        tempTurbine = turbines[i];
        for (var j = turbineArrayLength; j < 2; j++)
            if (tempTurbine !== tempTurbines[j])
                while ()
                    //What the heck is going on here?
                
               
        
    

如果解决了问题,请告诉我。

【讨论】:

也谢谢你,这不是修复问题,而是澄清函数的外观。我也会记住你的建议。干杯!【参考方案3】:

回复很有帮助,但没有一个有效……这是我最后得到的代码。

function updateTurbines()
    var l = turbines.length; 
    for (var i = 0; i < l; i++) // go through all of the turbines
        var tempTurbine1 = turbines[i];
        tempTurbine1.PositionTop = tempTurbine1.y; // now .y is defined because tempTurbine is not an empty object
        tempTurbine1.PositionBottom = tempTurbine1.y + tempTurbine1.height;
        for (var j = 0; j < l; j++)  // NOT i but j here
            var tempTurbine2 = turbines[j];
            if (tempTurbine1 !== tempTurbine2 && tempTurbine1.PositionBottom >= tempTurbine2.PositionTop)

    
   
  
 

【讨论】:

以上是关于Javascript游戏麻烦的主要内容,如果未能解决你的问题,请参考以下文章

能用CSS实现的就不用麻烦JavaScript

Javascript/jQuery onbeforeunload HTML 事件麻烦

Javascript 日常开发用到的小知识点

JavaScript中的设计模式:状态模式

JavaScript制作游戏摇杆方向盘

JavaScript制作游戏摇杆方向盘