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

how to set global variable from onclick function and pass it to another JS file

本文关键字：另一个 文件 JS onclick 函数 全局变量 设置      更新时间：2023-09-26

我试图为我的游戏创建一个难度系统，它通过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

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

$('.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

文档是全局性的。你可以添加你想要的，但要小心，不要重写现有的变量。

它总是返回到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;

我希望这能有所帮助！

相关文章：