所以我正在练习构建和增量游戏，在尝试开发网页时，我遇到了这个问题...... 这是我正在http://47z.bitballoon.com/
工作的网页的链接
#header{
margin: auto;
}
#points{
margin: auto;
border: 3px solid green;
}
#points_per_second{
margin: auto;
border: 3px solid green;
}<!DOCTYPE HTML>
<html>
<head>
<title>Incremental Game Test</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://aldo111.github.io/incremental-game-engine-js/js/incrementalObject.js"></script>
<script src="http://aldo111.github.io/incremental-game-engine-js/js/jquery.js"></script>
<!--Our Javascript Code-->
<script type="text/javascript">
//Variable Declarations & Initializations
var game;
//the init() function initializes or sets up our game
function init()
{
game=new Game(28);
game.addAttribute("Points",0);
game.track("Points","#points", function(value) { return value.toFixed(0); });
game.addAttribute("PointsPerSecond",0);
game.track("PointsPerSecond","#points_per_second")
game.addClicker("#earn",function() {
game.attributes.Points+=2;
game.addClickerText("+2");//adds clicker/particle text - still under works!
});
game.addClicker("#getSome", function() {
//this function also shows another way to access attributes
var p=game.getAttribute("Points");
var cost=10;
var increase=2;
if (p>=cost)
{
//we can buy
p-=cost;
game.setAttribute("Points",p);
var pps=game.getAttribute("PointsPerSecond");
pps+=increase;
game.setAttribute("PointsPerSecond",pps);
}
});
game.play(play);//Tells the Game() object's play() function that we want to execute the code in our play() function for every loop iteration in the game loop
}
//the play() function contains essential game code
function play()
{
var g=game.attributes;
g["Points"]+=g["PointsPerSecond"]/game.getFPS();
}
//this checks if the window has loaded - includes the document, and all objects/elements in it - and executes the function init() when it has
window.onload=init;
</script>
</head>
<body>
<div id='header'>
<h1><center>Incremental Game Test</h1>
</div>
<div id='points'>
Points: <span id="points"></span>
<input type='button' id='earn' value='Earn Points'>
</div>
<div id='points_per_second'>
Points Per Second: <span id="points_per_second"></span>
<input type='button' id='getSome' value='Get Some!'>
</div>
</body>
</html>
为什么文本和输入按钮没有显示在最终网站上？
答案 0 :(得分：1)
原因是您为points和points_per_second分配了2个相同的ID，而JavaScript只选择了一个ID。只需制作1 Points ID和1 points_per_second ID，如下所示：
<div class='points'>
Points: <span id="points"></span>
<input type='button' id='earn' value='Earn Points'>
</div>
<div class='points_per_second'>
Points Per Second: <span id="points_per_second"></span>
<input type='button' id='getSome' value='Get Some!'>
</div>
要解决此问题，您只需制作一个ID。我已经更新了你的代码，这是一个有效的例子。
<!DOCTYPE HTML>
<html>
<head>
<title>Incremental Game Test</title>
<style type="text/css">
#header{
margin: auto;
}
#points{
margin: auto;
border: 3px solid green;
}
#points_per_second{
margin: auto;
border: 3px solid green;
}
</style>
<script src="http://aldo111.github.io/incremental-game-engine-js/js/incrementalObject.js"></script>
<script src="http://aldo111.github.io/incremental-game-engine-js/js/jquery.js"></script>
<!--Our Javascript Code-->
<script type="text/javascript">
//Variable Declarations & Initializations
var game;
//the init() function initializes or sets up our game
function init()
{
game=new Game(28);
game.addAttribute("Points",0);
game.track("Points","#points", function(value) { return value.toFixed(0); });
game.addAttribute("PointsPerSecond",0);
game.track("PointsPerSecond","#points_per_second")
game.addClicker("#earn",function() {
game.attributes.Points+=2;
game.addClickerText("+2");//adds clicker/particle text - still under works!
});
game.addClicker("#getSome", function() {
//this function also shows another way to access attributes
var p=game.getAttribute("Points");
var cost=10;
var increase=2;
if (p>=cost)
{
//we can buy
p-=cost;
game.setAttribute("Points",p);
var pps=game.getAttribute("PointsPerSecond");
pps+=increase;
game.setAttribute("PointsPerSecond",pps);
}
});
game.play(play);//Tells the Game() object's play() function that we want to execute the code in our play() function for every loop iteration in the game loop
}
//the play() function contains essential game code
function play()
{
var g=game.attributes;
g["Points"]+=g["PointsPerSecond"]/game.getFPS();
}
//this checks if the window has loaded - includes the document, and all objects/elements in it - and executes the function init() when it has
window.onload=init;
</script>
</head>
<body>
<div id='header'>
<h1><center>Incremental Game Test</h1>
</div>
<div class='points'>
Points: <span id="points"></span>
<input type='button' id='earn' value='Earn Points'>
</div>
<div class='points_per_second'>
Points Per Second: <span id="points_per_second"></span>
<input type='button' id='getSome' value='Get Some!'>
</div>
</body>
</html>