更改变量名称后，我的代码停止运行

时间：2018-07-05 10:24:41

标签： javascript html variables

我的代码在运行时会挂起。这是一个基于文本的RPG。现在，它所要做的就是能够导航地图（这就是为什么会有巨大的开关功能）并且时间会过去的原因。我遇到的问题是，在我更改了变量名之后，它只是挂在启动屏幕上（因为在我使用像培根和白痴这样的愚蠢变量之前）。

//topbar 
var game_time_display = document.getElementById("id_day_period");

//images
var image_map_display = document.getElementById("id_map_area_image");

//map navigation
var north = document.getElementById("id_north");
var east = document.getElementById("id_east");
var south = document.getElementById("id_south");
var west = document.getElementById("id_west");

//player's tile
var map_area_display = document.getElementById("test");

//gameplay variables
//player area
var map_area;
//time
var game_time;
var game_time_day;
var game_time_period;

//starting prefixes
map_area = 8;
game_time_part = 0;
game_time_day = 1;

//show player's tile
map_area_display.innerHTML = map_area;

//1 game time part passing
function time_pass(){
game_time_part = game_time_part + 1;


//periods of the day: it is in this order for it to work
 if (game_time_part >= 50) {
	game_time_period = "EVENING";
}
else if (game_time_part >= 40) {
	game_time_period = "AFTERNOON";
}
else if (game_time_part >= 30) {
	game_time_period = "MIDDAY";
}
else if (game_time_part >= 20) {
	game_time_period = "MORNING";
}
else if (game_time_part >= 10) {
	game_time_period = "DAWN";
}
else if (game_time_part >= 0) {
	game_time_period = "EARLY MORNING";
}
else {}

//game day passing test
if (game_time_part > 60) {
	game_time_day = game_time_day + 1;
	game_time_part = 0;
}
//display on topbar
game_time_display.innerHTML = "DAY "+game_time_day+" "+game_time_period;
}
//normal travel on flat ground:3-5 game time parts?
function time_pass_flat_travel() {
time_pass()
time_pass()
time_pass()
time_pass()
}

function north_click() {
map_area = map_area - 1;
area.innerHTML = map_area;
map_navigation();
time_pass_flat_travel()
}

function east_click() {
map_area = map_area + 5;
area.innerHTML = map_area;
map_navigation();
time_pass_flat_travel()
}

function south_click() {
map_area = map_area + 1;
area.innerHTML = map_area;
map_navigation();
time_pass_flat_travel()
}

function west_click() {
map_area = map_area - 5;
area.innerHTML = map_area;
map_navigation();
time_pass_flat_travel()
}

function map_navigation(){
switch (map_area) {
		case 0:
        
        break;
		case 1:
			north.style.display = "none";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "none";
			image_map_display.src = "map1.png";
			
        break;
		case 2:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "none";
			image_map_display.src = "map2.png";
        break;
		case 3:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "none";
			image_map_display.src = "map3.png";
        break;
		case 4:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "none";
			image_map_display.src = "map4.png";
        break;
		case 5:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "none";
			west.style.display = "none";
			image_map_display.src = "map5.png";
        break;
		case 6:
			north.style.display = "none";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map6.png";
        break;
		case 7:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map7.png";
        break;
		case 8:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map8.png";
        break;
		case 9:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map9.png";
        break;
		case 10:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "none";
			west.style.display = "block";
			image_map_display.src = "map10.png";
        break;
		case 11:
			north.style.display = "none";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map11.png";
        break;
		case 12:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map12.png";
        break;
		case 13:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map13.png";
        break;
		case 14:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map14.png";
        break;
		case 15:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "none";
			west.style.display = "block";
			image_map_display.src = "map15.png";
        break;
		case 16:
			north.style.display = "none";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map16.png";
        break;
		case 17:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map17.png";
        break;
		case 18:
			north.style.display = "block";
			east.style.display = "none";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map18.png";
        break;
		case 19:
			north.style.display = "block";
			east.style.display = "none";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map19.png";
        break;
		case 20:
			north.style.display = "block";
			east.style.display = "none";
			south.style.display = "none";
			west.style.display = "block";
			image_map_display.src = "map20.png";
        break;
		case 21:
			north.style.display = "none";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map21.png";
        break;
		case 22:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "none";
			west.style.display = "block";
			image_map_display.src = "map22.png";
        break;
		case 23:
			north.style.display = "none";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "none";
			image_map_display.src = "map23.png";
        break;
		case 24:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "none";
			image_map_display.src = "map24.png";
        break;
		case 25:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "none";
			west.style.display = "none";
			image_map_display.src = "map25.png";
        break;
		case 26:
			north.style.display = "none";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map26.png";
        break;
		case 27:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map27.png";
        break;
		case 28:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map28.png";
        break;
		case 29:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map29.png";
        break;
		case 30:
			north.style.display = "block";
			east.style.display = "block";
			south.style.display = "none";
			west.style.display = "block";
			image_map_display.src = "map30.png";
        break;
		case 31:
			north.style.display = "none";
			east.style.display = "none";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map31.png";
        break;
		case 32:
			north.style.display = "block";
			east.style.display = "none";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map32.png";
        break;
		case 33:
			north.style.display = "block";
			east.style.display = "none";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map33.png";
        break;
		case 34:
			north.style.display = "block";
			east.style.display = "none";
			south.style.display = "block";
			west.style.display = "block";
			image_map_display.src = "map34.png";
        break;
		case 35:
			north.style.display = "block";
			east.style.display = "none";
			south.style.display = "none";
			west.style.display = "block";
			image_map_display.src = "map35.png";
        break;
		}
		}
<head>
<!--this shows the tile the player is on-->
<p id="test"></p>
</head>
<body>

<!--above the image; map area shows map area+local area-->
<div id="topbar">
<p id="id_health"></p>
<p id="id_map_area"></p>
<p id="id_pills_num"></p>
<p id="id_day_period"></p>
</div>

<!-- the image-->
<div id="parent">
<img id="id_map_area_image" src="map8.png">
</div>

<!--underneath the image-->
<div id="bottombar">
<p id="id_outfit"></p>
<p id="id_melee_weapon"></p>
<p id="id_ranged_weapon"></p>
</div>

<!--this is the overview of the map-->
<div id="map_menu">
<!--map navigation:-->
<p onclick="north_click()" id="id_north">GO NORTH</p>
<p onclick="east_click()" id="id_east">GO EAST</p>
<p onclick="south_click()" id="id_south">GO SOUTH</p>
<p onclick="west_click()" id="id_west">GO WEST</p>
<!--local navigation:-->
<p id="id_locale1"></p>
<p id="id_locale2"></p>
<p id="id_locale3"></p>
<p id="id_locale4"></p>
<!--random encounter:-->
<p id="id_map_loot_encounter"></p>
</div>

</body>

1 个答案:

答案 0 :(得分：0)

我认为，您有一个undefined变量area，如果您查看控制台，它将抛出一个ReferenceError: area is not defined。

还要用id="test"创建一个HTML元素。

这是我的解决方法：

//topbar 
var game_time_display = document.getElementById("id_day_period");

//images
var image_map_display = document.getElementById("id_map_area_image");

//map navigation
var north = document.getElementById("id_north");
var east = document.getElementById("id_east");
var south = document.getElementById("id_south");
var west = document.getElementById("id_west");

//player's tile
var map_area_display = document.getElementById("test");

//gameplay variables
//player area
var map_area;
//time
var game_time;
var game_time_day;
var game_time_period;

//starting prefixes
map_area = 8;
game_time_part = 0;
game_time_day = 1;

//show player's tile
map_area_display.innerHTML = map_area;

//1 game time part passing
function time_pass() {
  game_time_part = game_time_part + 1;


  //periods of the day: it is in this order for it to work
  if (game_time_part >= 50) {
    game_time_period = "EVENING";
  } else if (game_time_part >= 40) {
    game_time_period = "AFTERNOON";
  } else if (game_time_part >= 30) {
    game_time_period = "MIDDAY";
  } else if (game_time_part >= 20) {
    game_time_period = "MORNING";
  } else if (game_time_part >= 10) {
    game_time_period = "DAWN";
  } else if (game_time_part >= 0) {
    game_time_period = "EARLY MORNING";
  } else {}

  //game day passing test
  if (game_time_part > 60) {
    game_time_day = game_time_day + 1;
    game_time_part = 0;
  }
  //display on topbar
  game_time_display.innerHTML = "DAY " + game_time_day + " " + game_time_period;
}
//normal travel on flat ground:3-5 game time parts?
function time_pass_flat_travel() {
  time_pass()
  time_pass()
  time_pass()
  time_pass()
}

function north_click() {
  map_area = map_area - 1;
  map_area_display.innerHTML = map_area;
  map_navigation();
  time_pass_flat_travel()
}

function east_click() {
  map_area = map_area + 5;
  map_area_display.innerHTML = map_area;
  map_navigation();
  time_pass_flat_travel()
}

function south_click() {
  map_area = map_area + 1;
  map_area_display.innerHTML = map_area;
  map_navigation();
  time_pass_flat_travel()
}

function west_click() {
  map_area = map_area - 5;
  map_area_display.innerHTML = map_area;
  map_navigation();
  time_pass_flat_travel()
}

function map_navigation() {
  switch (map_area) {
    case 0:

      break;
    case 1:
      north.style.display = "none";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "none";
      image_map_display.src = "map1.png";

      break;
    case 2:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "none";
      image_map_display.src = "map2.png";
      break;
    case 3:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "none";
      image_map_display.src = "map3.png";
      break;
    case 4:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "none";
      image_map_display.src = "map4.png";
      break;
    case 5:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "none";
      west.style.display = "none";
      image_map_display.src = "map5.png";
      break;
    case 6:
      north.style.display = "none";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map6.png";
      break;
    case 7:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map7.png";
      break;
    case 8:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map8.png";
      break;
    case 9:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map9.png";
      break;
    case 10:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "none";
      west.style.display = "block";
      image_map_display.src = "map10.png";
      break;
    case 11:
      north.style.display = "none";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map11.png";
      break;
    case 12:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map12.png";
      break;
    case 13:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map13.png";
      break;
    case 14:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map14.png";
      break;
    case 15:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "none";
      west.style.display = "block";
      image_map_display.src = "map15.png";
      break;
    case 16:
      north.style.display = "none";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map16.png";
      break;
    case 17:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map17.png";
      break;
    case 18:
      north.style.display = "block";
      east.style.display = "none";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map18.png";
      break;
    case 19:
      north.style.display = "block";
      east.style.display = "none";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map19.png";
      break;
    case 20:
      north.style.display = "block";
      east.style.display = "none";
      south.style.display = "none";
      west.style.display = "block";
      image_map_display.src = "map20.png";
      break;
    case 21:
      north.style.display = "none";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map21.png";
      break;
    case 22:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "none";
      west.style.display = "block";
      image_map_display.src = "map22.png";
      break;
    case 23:
      north.style.display = "none";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "none";
      image_map_display.src = "map23.png";
      break;
    case 24:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "none";
      image_map_display.src = "map24.png";
      break;
    case 25:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "none";
      west.style.display = "none";
      image_map_display.src = "map25.png";
      break;
    case 26:
      north.style.display = "none";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map26.png";
      break;
    case 27:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map27.png";
      break;
    case 28:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map28.png";
      break;
    case 29:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map29.png";
      break;
    case 30:
      north.style.display = "block";
      east.style.display = "block";
      south.style.display = "none";
      west.style.display = "block";
      image_map_display.src = "map30.png";
      break;
    case 31:
      north.style.display = "none";
      east.style.display = "none";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map31.png";
      break;
    case 32:
      north.style.display = "block";
      east.style.display = "none";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map32.png";
      break;
    case 33:
      north.style.display = "block";
      east.style.display = "none";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map33.png";
      break;
    case 34:
      north.style.display = "block";
      east.style.display = "none";
      south.style.display = "block";
      west.style.display = "block";
      image_map_display.src = "map34.png";
      break;
    case 35:
      north.style.display = "block";
      east.style.display = "none";
      south.style.display = "none";
      west.style.display = "block";
      image_map_display.src = "map35.png";
      break;
  }
}
<div id="test"></div>

<div id="topbar">
  <p id="id_health"></p>
  <p id="id_map_area"></p>
  <p id="id_pills_num"></p>
  <p id="id_day_period"></p>
</div>

<!-- the image-->
<div id="parent">
  <img id="id_map_area_image" src="map8.png">
</div>

<!--underneath the image-->
<div id="bottombar">
  <p id="id_outfit"></p>
  <p id="id_melee_weapon"></p>
  <p id="id_ranged_weapon"></p>
</div>

<!--this is the overview of the map-->
<div id="map_menu">
  <!--map navigation:-->
  <p onclick="north_click()" id="id_north">GO NORTH</p>
  <p onclick="east_click()" id="id_east">GO EAST</p>
  <p onclick="south_click()" id="id_south">GO SOUTH</p>
  <p onclick="west_click()" id="id_west">GO WEST</p>
  <!--local navigation:-->
  <p id="id_locale1"></p>
  <p id="id_locale2"></p>
  <p id="id_locale3"></p>
  <p id="id_locale4"></p>
  <!--random encounter:-->
  <p id="id_map_loot_encounter"></p>
</div>

相关问题
最新问题