Question

我正在制作一款类似于游戏“Cookie clicker”的游戏，我想知道是否有办法制作阵列中可点击的内容，即像商店一样，用户可以使用不同的项目可以点击它，它会影响分数。

var i;
var shop = new Array();
shop[0] = "Bins:" + "  " + "5";
shop[1] = "Shops:" + "  " + "100";
shop[2] = "Factories: " + "   " + "500";
shop[3] = "Warehouses:" + "   " + "2,000";
shop[4] = "Over seas:" + "   " + "8,000";

for (i=0; i<shop.length; i++){
  document.write(shop[i] + "<br>")
}

以上是存储商店内商品和商品价格的数组。我发现很难找到如何使这些项目可点击并使它们影响得分。

Answer 1

您应该分配一个事件和事件处理程序。您还应该为每个元素包含一个ID属性，以便区分它们。

这是一个例子。

首先为表示商店项目的HTML元素提供ID

document.write('<div id="bins">'+shop[0]+'</div><br>');

然后你可以通过它的ID选择那个元素并附加一个事件监听器和处理程序。

var bins = document.getElementById("bins");
bins.addEventListener("click", function(eventData){
    //This is the event handler
    //this code will get executed when the bins element is clicked.
    console.log('Bins was clicked.  Here is some additional information ', eventData);
});

Answer 2

扩展Conor的答案，这里是为每个'商店'循环完成的解决方案 -

http://jsfiddle.net/uLyJu/10/

你应该使用一个对象数组，而不只是字符串，因为你真的为每个商店存储了两件东西，一个名字和一个值。这将让你独立使用每个。

var shops = new Array();
shops[0] = { name: "Bins:", value: 5 };
shops[1] = { name: "Shops:", value: 100 };
shops[2] = { name: "Factories:", value: 500 };
shops[3] = { name: "Warehouses:", value: 2000 };
shops[4] = { name: "Over seas:", value: 8000 };

Answer 3

您可以创建两个items和prices相互协调的数组。

http://jsfiddle.net/fenderistic/8pZsy/

你也可以使用二维数组，它可以完成同样的事情。

JS

$(function() {loadItems();});

var totalcash=100;

function loadItems(){
var items = new Array();
var prices = new Array();

items[0]="Bins";
prices[0]=5;

items[1]="Shops";
prices[1]=100;

var output="<table border=1>";
  for(var i=0; i<items.length; i++){
    output+="<tr><td><a href='javascript:D("+String(prices[i])+")'>"+items[i]+"</a>    </td><td>"+prices[i]+"</td></tr>";
  }
  output+="</table>";
  $("#output").html(output);
}

function D(price) {
  totalcash-=Number(price);
}

如果您希望商店成为单个实体，您可以创建一个类来处理所有此类事件。使用这种面向对象（类似）样式可以让您的代码简洁明了。对于类似于此的游戏，您可能遇到许多不同的实体，这些实体都需要以不同的方式处理

var shop = function(){

   this.createShop(){//create and output shop here}

   this.getPrice(item){//get price of a given item}

   this.chargeUser(price){//deduct user's total cash from given price}

   //
}

有没有办法让数组内的内容被点击？

3 个答案: