Question

我试图为我的游戏创建一个难度系统，它由用户选择通过jquery控制。

index.html包含新游戏，积分和＆amp;的div。游戏难度。然后用户可以通过选择难度菜单来改变难度，并且将出现难度选择（简单，正常，硬）。选择新游戏将隐藏菜单，并显示画布来玩游戏。

的index.html

<ul id="difficulty">
     <li><a href="#" class="diff-link1" class="choice">
         <img class="diff-choice" src="images/Easy.png">
         <div class="diff-desc">9 Life </div>
     </a></li>
     <li><a href="#" class="diff-link2" class="choice">
         <img class="diff-choice" src="images/Normal.png">          
         <div class="diff-desc">6 Life </div>
     </a></li>
     <li><a href="#" class="diff-link3" class="choice">
         <img class="diff-choice" src="images/Hard.png">
         <div class="diff-desc">3 Life </div>
     </a></li>
</ul>

<canvas id="myCanvas" width="700" height="500"></canvas> 
<script src="js/menu.js"></script>
<script src="js/game.js"></script>

menu.js

var difficulty = 2;    //Default, if user don't change difficulty 

$('.newgame').click(function() {
    $('#menu').hide();
    $('#wrapper').hide();
    $('#myCanvas').show();
    assetLoader.sounds.titleBgm.volume = 0; 
    assetLoader.sounds.bgm.volume = 0.5;
    assetLoader.sounds.bgm.loop = true;
    assetLoader.sounds.bgm.play();     
});

$('.credits').click(function() { 
    $('#menu').hide();
    $('#credit').show();
});

$('.diff').click(function() { 
    $('#menu').hide();
    $('#diff').show();
}); 

$('.diff-link1').click(function() { 
    $('#diff').hide();  
    $('#menu').show();
    difficulty = 3;              //set difficulty to easy
});

$('.diff-link2').click(function() { 
    $('#diff').hide();  
    $('#menu').show();
    difficulty = 2;                //set difficulty to normal
}); 

$('.diff-link3').click(function() { 
    $('#diff').hide();  
    $('#menu').show();
    difficulty = 1;             //set difficulty to hard
});  

$('.back').click(function(){
    $('#credit').hide();
    $('#diff').hide();  
    $('#menu').show();
});

game.js

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var diffText;
var heroLife = difficulty * 3;
var immortal = true;
// Difficulties
if(difficulty == 1) {
    diffText = "Hard";
} else if(difficulty == 2){
    diffText = "Normal";
} else if(difficulty == 3){
    diffText = "Easy";
}

//Game logic,etc

我的问题是，每当我将难度设置为任何东西时，它总会恢复到难度= 2（正常难度）。我试图将两个js文件合并为一个大文件，仍然是相同的结果:( 提前谢谢。

Answer 1

$('.diff-link1').click(function() { 
    $('#diff').hide();  
    $('#menu').show();
    document.myGlobal_difficulty = 3;              //set difficulty to easy
});

$('.diff-link2').click(function() { 
    $('#diff').hide();  
    $('#menu').show();
    document.myGlobal_difficulty = 2;                //set difficulty to normal
}); 

$('.diff-link3').click(function() { 
    $('#diff').hide();  
    $('#menu').show();
    document.myGlobal_difficulty = 1;             //set difficulty to hard

文件是全球性的。你可以添加你想要的东西 - 但要小心 - 不要重写现有的变量。

Answer 2

有意义的是它总是恢复为2，因为每次选择难度时，它都会加载javascript文件，它将通过以下行：var difficulty = 2;

一种解决方案是在html上创建一个隐藏的输入字段，并在每次用户更改时将难度存储在那里。因此，您将从输入标签（文本框）中读取新的难度。输入字段类似于：

<input type="text" id="global_difficulty" style="display:none;" value="2"/>

默认值为2。

现在，在javascript上，你可以使用这样的DOM访问困难：

var difficulty = document.getElementById("global_difficulty");

要设置不同的值，您可以说：

difficulty.value = 3;

我希望这有帮助！

如何从onclick函数设置全局变量并将其传递给另一个JS文件

的index.html

menu.js

game.js

2 个答案: