Edit in JSFiddle

var flagman_chip = 1
var pandora_crystal = 3
var module_chip = 3
var mine_crystal = 4
var mine_crystal = 4
var gal_core = 4
var gal_core = 4
var robot = 6
var robot = 6
var gal_energy = 7
var gal_energy = 7
var gal_energy = 7
var tech_points = 9
var tech_points = 9
var tech_points = 9
var cubite = 12
var cubite = 12
var cubite = 12

var credits = 6000;

var items_arr = [];
var ranges_arr = [];


var item_names = [
  "flag_chip",
  "pandora_crystal",
  "module_chip",
  "mine_crystal",
  "mine_crystal",
  "gal_core",
  "gal_core",
  "robot",
  "robot",
  "gal_energy",
  "gal_energy",
  "gal_energy",
  "tech_points",
  "tech_points",
  "tech_points",
  "cubite",
  "cubite",
  "cubite"
]

function plot() {
	var g = d3.select("svg").selectAll("g")
	
	g
		.append("image")
			.attr("x", -15)
			.attr("y", -15)
			.attr("width", 80)
			.attr("height", 80)
			.attr("preserveAspectRatio", "none")
			.attr("href", "http://www.picshare.ru/uploads/170216/NCrh81b57M.png");
	g
		.append("image")
			.attr("x", 0)
			.attr("y", 0)
			.attr("width", 50)
			.attr("height", 50)
			.attr("href", "http://www.picshare.ru/uploads/170215/X7MZdQ600E.png")
			.on("click", () => {openBox(d3.event.target);});
			
}

function init() {
  items_arr = [];

  items_arr.push(flagman_chip);
  items_arr.push(pandora_crystal);
  items_arr.push(module_chip);
  items_arr.push(mine_crystal);
  items_arr.push(mine_crystal);
  items_arr.push(gal_core);
  items_arr.push(gal_core);
  items_arr.push(robot);
  items_arr.push(robot);
  items_arr.push(gal_energy);
  items_arr.push(gal_energy);
  items_arr.push(gal_energy);
  items_arr.push(tech_points);
  items_arr.push(tech_points);
  items_arr.push(tech_points);
  items_arr.push(cubite);
  items_arr.push(cubite);
  items_arr.push(cubite);

  var sum = items_arr.reduce((sum, curr) => {
    return sum += curr;
  }, 0);

  console.log(sum);

  var k = 100 / sum;

  items_arr = items_arr.map((item) => {
    return item *= k / 100;
  });

  sum = items_arr.reduce((sum, curr) => {
    return sum += curr;
  }, 0);

  console.log(sum);
}

function calculateItem() {
  var randomValue = Math.random();

  var lowBound = 0;
  var topBound = 0;
  var interval = 17;
  items_arr.forEach((item, i) => {
    topBound += item;
    if (randomValue >= lowBound && randomValue < topBound) {
      interval = i;
    }
    lowBound += item;
  });

  return interval;
}

// Новые вероятности для всех предметов.
function calculateProbabilities() {
  var sum = items_arr.reduce((sum, curr) => {
    return sum += curr;
  }, 0);

  var k = 100 / sum;

  items_arr = items_arr.map((item) => {
    return item *= k / 100;
  });
}

function setImage(context, itemOpened) {
  if (context.nodeName !== "image") return;

	switch (itemOpened) {
  	case "flag_chip":
    	context.setAttribute("href", "http://www.picshare.ru/uploads/170215/6934tC67Fl.png");
    	break;
    case "tech_points":
  		context.setAttribute("href", "http://www.picshare.ru/uploads/170215/n0i933el6U.png");
    	break;
      case "cubite":
      context.setAttribute("href", "http://www.picshare.ru/uploads/170215/52Lo125IK1.png");
      break;
    case "gal_energy":
      context.setAttribute("href", "http://www.picshare.ru/uploads/170215/jwJZKSEpTG.png");
      break;
    case "gal_core":
      context.setAttribute("href", "http://www.picshare.ru/uploads/170215/ePj4E5Le3e.png");
      break;
    case "pandora_crystal":
    	context.setAttribute("href", "http://www.picshare.ru/uploads/170215/5C8x3HXEi1.png");
      break;
    case "mine_crystal":
    	context.setAttribute("href", "http://www.picshare.ru/uploads/170215/890s715aUT.png");
    	break;
	case "module_chip":
    	context.setAttribute("href", "http://www.picshare.ru/uploads/170216/XNBa30U571.png");
    	break;	
	case "robot":
    	context.setAttribute("href", "http://www.picshare.ru/uploads/170216/jYCA8c9WCG.png");
    	break;		
    default:
      context.setAttribute("href", "");
    	break;
  }
  
	var elem = d3.select(context)
		.on("click", null);
}


function openBox(context) {
  if (items_arr.length == 0) return;
  var item = calculateItem();
  items_arr.splice(item, 1);
  var opened = item_names.splice(item, 1)[0];

  setImage(context, opened);

  console.log(opened);

  calculateProbabilities();
}

plot();
init();
//openBox();

<body style = "background-color: #000; ">

<svg width="600" height="300">
  <g transform="translate(25, 25)" ></g>
  <g transform="translate(100, 25)" />
  <g transform="translate(175, 25)" />
  <g transform="translate(250, 25)" />
  <g transform="translate(325, 25)" />
  <g transform="translate(400, 25)" />

  <g transform="translate(25, 100)" />
  <g transform="translate(100, 100)" />
  <g transform="translate(175, 100)" />
  <g transform="translate(250, 100)" />
  <g transform="translate(325, 100)" />
  <g transform="translate(400, 100)" />

  <g transform="translate(25, 175)" />
  <g transform="translate(100, 175)" />
  <g transform="translate(175, 175)" />
  <g transform="translate(250, 175)" />
  <g transform="translate(325, 175)" />
  <g transform="translate(400, 175)" />
</svg>
</body>