javascript添加新建筑物

时间:2017-05-29 03:50:20

标签: javascript css html5

我不确定如何按数组添加新建筑物。我是一个初学javascript的人。

我在其他方面添加了保存/加载到后端,但客户端出于某种原因给了我问题。

我认为这与我有关,不是在正确的阵列正确,但如果你能指出我正确的方向,我很乐意学习。

我想添加第二个名为

的建筑物
loadbuilding("taco stand")

以下是代码:

var Timer = window.setInterval(function() {
    Tick()
}, 1000);
var buildings = [];

//The object declaration for game saves
function GameSave() {
    this.money = 0;
    this.buildings = [];
    for (var i = 0; i < buildings.length; i++) {
        this.buildings[i] = 0;
    }
}

//The object declaration for buildings
function Building() {
    this.Name = "Lemonade Stand";
    this.Cost = 10;
    this.PerSec = 1;
}

//The function to initialise all buildings
function InitBuildings() {
    LoadBuilding("Lemonade Stand", 10, 1);
    LoadBuilding("Taco Stand", 100, 1);

}

//The function to automatically load a building into the buildings array
function LoadBuilding(name, cost, persec) {
    var cur = buildings.length;

    buildings[cur] = new Building();
    buildings[cur].Name = name;
    buildings[cur].Cost = cost;
    buildings[cur].PerSec = persec;
}

//The function used to gather money
function GatherMoney() {
    game.money++; //++ tells javascript to add 1 to the variable

    //Display the player's current money
    document.getElementById("money").innerHTML = game.money;
}

//The function that gets run every second
function Tick() {
    for (var i = 0; i < buildings.length; i++) {
        game.money += game.buildings[i] * buildings[i].PerSec;
    }
    document.getElementById("money").innerHTML = game.money;
}

//The function to buy a lemonade stand
function Build(id) {
    if (game.money >= buildings[id].Cost) { //Check if the player has enough money, then subtract it and add a new building if they do
        game.money -= buildings[id].Cost;
        game.buildings[id] = game.buildings[id] + 1;
        document.getElementById("money").innerHTML = game.money;
        document.getElementById("Building1Qty").innerHTML = game.buildings[id];
    }
}

//Run this code once the page has loaded fully
window.onload = function() {
    InitBuildings();
    window.game = new GameSave();
};
<!--Pleae refer to Lesson 9.txt for a full description on this lesson -->

<html>
<head>
<title>Basic Incremental Game</title>
<link rel="stylesheet" type="text/css" href="css/Incremental.css">
<script src="js/Incremental.js"></script>
</head>

<body>
	<div id="page">
		<div id="header">
			<div id="game-title">
				Basic Incremental Game
			</div>
		</div>
	
	<div id="content">
		<div id="stats" class="block">
			<div class="label">Money:</div>
			<div id="money" class="label">0</div>
		</div>
	
		<div id="clickables" class="block">
			<input type="button" value="Click Me!" onclick="GatherMoney();">
		</div>
	
		<div id="buildings" class="block">
			<div id="Building1">
				<input type="button" value="Lemonade Stand" onclick="Build(0);">
				<div>
					<div class="label">Cost:</div>
					<div id="Building1Cost" class="label">10</div>
				</div>
				
				<div>
					<div class="label">Per Sec:</div>
					<div id="Building1PerSec" class="label">1</div>
				</div>
				
				<div>
					<div class="label">Quantity:</div>
					<div id="Building1Qty" class="label">0</div>
				</div>
			</div>
					<div id="Building2">
				<input type="button" value="Taco Stand" onclick="Build(1);">
				<div>
					<div class="label">Cost:</div>
					<div id="Building2Cost" class="label">10</div>
				</div>
				
				<div>
					<div class="label">Per Sec:</div>
					<div id="Building2PerSec" class="label">1</div>
				</div>
				
				<div>
					<div class="label">Quantity:</div>
					<div id="Building2Qty" class="label">0</div>
				</div>
			</div>
		</div>


		<div id="upgrades" class="block">
			This is where our upgrades will go!
		</div>
	</div>

</body>

编辑:

我尝试改变但是山雀没有工作

buildings[]

buildings["Lemonade Stand", "Taco Stand"]

2 个答案:

答案 0 :(得分:0)

怎么样,

LoadBuilding("myBuilding", 12, 1);

因为你有这个工厂功能,

function LoadBuilding(name, cost, persec) {
    var cur = buildings.length;

    buildings[cur] = new Building();
    buildings[cur].Name = name;
    buildings[cur].Cost = cost;
    buildings[cur].PerSec = persec;
}

答案 1 :(得分:0)

您可以构建一个Building对象数组,然后使用while循环遍历它们。

请参阅JSFIDDLE或附加代码。

如果有帮助,请告诉我。

class Building {
 constructor(name, cost, persec) {
 	this.name = name;
  this.cost = cost;
  this.persec = persec;
 }
}

var buildings = [];

buildings.push(new Building('Building One', '$10', '1'));
buildings.push(new Building('Building Two', '$20', '0.5'));
buildings.push(new Building('Building Three', '$25', '2'));

var count = 0;

while(count < buildings.length) {
	document.getElementById('stores').innerHTML += '<p>' + buildings[count].name + '<br />' + buildings[count].cost + '<br />' + buildings[count].persec + '</p>';
  count++;
}
<div id="stores">

</div>