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

Question

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

index.html包含新游戏的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

我的问题是，每当我将难度设置为任何值时，它总是恢复为Difficulty = 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难度= 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;

我希望这有帮助！