iwamoto-takaaki/TextQuest.html

## TextQuest.html
<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TextQuest</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" >
// これ見てて作りたくなった。
// https://teratail.com/questions/13308
// fieldの定義はうまく言ったと思うが、コードは汚い
// HTMLもひどいもんだ勉強しなおしだな

var castle_map = {
  name:"castle",
  loc:{x:4, y:9},
  block:["壁", "王"],
  move:{出:"field"},
  map:[
    "壁壁壁壁壁壁壁壁壁壁",
    "壁壁壁壁王壁壁壁壁壁",
    "壁道道道道道道道道壁",
    "壁道道道道道道道道壁",
    "壁道壁道道道道壁道壁",
    "壁道道道道道道道道壁",
    "壁道道道道道道道道壁",
    "壁道壁道道道道壁道壁",
    "壁道壁道道道道壁道壁",
    "壁壁壁壁出出壁壁壁壁"]
  };
var town_map = {
  name:"town",
  loc:{x:4, y:9},
  block:["武", "防", "宿"],
  move:{出:"field"},
  map:[
    "出出出出出出出出出出",
    "出草草草草草草草草出",
    "出草武草草草草道草出",
    "出草草草草草草草草出",
    "出草草草草草草草草出",
    "出草防草草草草宿草出",
    "出草草草草草草草草出",
    "出草草草草草草草草出",
    "出草草草草草草草草出",
    "出出出出出出出出出出"]
  };
var field_map = {
  name:"field",
  loc:{x:10, y:12},
  block:["海", "山"],
  move:{城:"castle", 街:"town"},
  map:[
    "海海海海海海海海海海海海海海海海海海海海",
    "海海山山山山山山山山山山山草草草草草海海",
    "海山山山山山山山山山山山草草草草草草草海",
    "海山山山山山山山山山草草草草草草草草草海",
    "海山山山山山山草草草草草草草草草草草草海",
    "海森森森森森森森森森草草草草草草草草草海",
    "海森森森森森森森森森森草草草草草草草草海",
    "海森森森森森森森森森草草草草草草草草草海",
    "海草森森森森森森森森草草草草草草草草草海",
    "海草草草草草草草草草草草草草草草草草草海",
    "海草草草草城草草草草草草草草草草草草草海",
    "海草草草草道草草草草草草草草草草森森森海",
    "海草草草草道草草草草草草草草草森森森森海",
    "海草草草草道草草草草草草草草草草森森森海",
    "海草草草道道道道道道道道道街草草草草草海",
    "海草草草道草草草草草草草草草草草草草草海",
    "海草草草道草草草草草草草草草草草草草草海",
    "海草草草道草草草草草草草草草草草草草草海",
    "海海草道道道草草草草草草草草草草草草海海",
    "海海海海海海海海海海海海海海海海海海海海"]
  };

var mapManeger = function(initMap){
  var self = this;

  self.fields = {};
  self.Add = function(map){
    self.fields[map.name] = map;
  };

  self.map = initMap;
  self.Add(initMap);

  function place(x, y){
    return self.map.map[y][x];
  }

  this.move = function(vx, vy){
    var map = self.map;

    function canMove() {
      var x = map.loc.x + vx;
      var y = map.loc.y + vy;
      var x_len = map.map[0].length;
      var y_len = map.map.length;
      if(x < 0) return false;
      if(x_len <= x) return false;
      if(y < 0) return false;
      if(y_len <= y) return false;
      if(0 <= $.inArray(place(x, y), map.block)) return false;
      return true;
    }

    if(canMove()){
      map.loc.x +=vx;
      map.loc.y +=vy;
    }

    if(undefined != map.move[place(map.loc.x, map.loc.y)]){
      self.map = self.fields[map.move[place(map.loc.x, map.loc.y)]];
    }
  };

  self.toHtml = function(){
    var disp = [];
    var map = this.map;
    for(var i = 0; i < map.map.length; ++i){
      disp[i] = map.map[i];
      if(map.loc.y == i){
        disp[i] = disp[i].substr(0, map.loc.x)
          + "主" + disp[i].substr(map.loc.x + 1, map.map[i].length)
      }
    }
    return disp.join("<br/>");
  };
};

var mm = new mapManeger(field_map);
mm.Add(castle_map);
mm.Add(town_map);

function move(vx, vy){
  mm.move(vx, vy);
  $("#map").html(mm.toHtml());
}

jQuery(document).ready(
  function(){
    $("#map").html(mm.toHtml());
  }
);

</script>
</head>
  <body>
    <div style="position:static">
      <div id="map">
        ........
      </div>
      <div >
        <button style="width:80" onclick="move(0, -1);"> up </button><br/>
        <button style="width:40" onclick="move(-1, 0);">right</button>
        <button style="width:40" onclick="move(1, 0);">left</button><br/>
        <button style="width:80" onclick="move(0, 1);">down</button>
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>TextQuest</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript" >
	// これ見てて作りたくなった。
	// https://teratail.com/questions/13308
	// fieldの定義はうまく言ったと思うが、コードは汚い
	// HTMLもひどいもんだ勉強しなおしだな

	var castle_map = {
	name:"castle",
	loc:{x:4, y:9},
	block:["壁", "王"],
	move:{出:"field"},
	map:[
	"壁壁壁壁壁壁壁壁壁壁",
	"壁壁壁壁王壁壁壁壁壁",
	"壁道道道道道道道道壁",
	"壁道道道道道道道道壁",
	"壁道壁道道道道壁道壁",
	"壁道道道道道道道道壁",
	"壁道道道道道道道道壁",
	"壁道壁道道道道壁道壁",
	"壁道壁道道道道壁道壁",
	"壁壁壁壁出出壁壁壁壁"]
	};
	var town_map = {
	name:"town",
	loc:{x:4, y:9},
	block:["武", "防", "宿"],
	move:{出:"field"},
	map:[
	"出出出出出出出出出出",
	"出草草草草草草草草出",
	"出草武草草草草道草出",
	"出草草草草草草草草出",
	"出草草草草草草草草出",
	"出草防草草草草宿草出",
	"出草草草草草草草草出",
	"出草草草草草草草草出",
	"出草草草草草草草草出",
	"出出出出出出出出出出"]
	};
	var field_map = {
	name:"field",
	loc:{x:10, y:12},
	block:["海", "山"],
	move:{城:"castle", 街:"town"},
	map:[
	"海海海海海海海海海海海海海海海海海海海海",
	"海海山山山山山山山山山山山草草草草草海海",
	"海山山山山山山山山山山山草草草草草草草海",
	"海山山山山山山山山山草草草草草草草草草海",
	"海山山山山山山草草草草草草草草草草草草海",
	"海森森森森森森森森森草草草草草草草草草海",
	"海森森森森森森森森森森草草草草草草草草海",
	"海森森森森森森森森森草草草草草草草草草海",
	"海草森森森森森森森森草草草草草草草草草海",
	"海草草草草草草草草草草草草草草草草草草海",
	"海草草草草城草草草草草草草草草草草草草海",
	"海草草草草道草草草草草草草草草草森森森海",
	"海草草草草道草草草草草草草草草森森森森海",
	"海草草草草道草草草草草草草草草草森森森海",
	"海草草草道道道道道道道道道街草草草草草海",
	"海草草草道草草草草草草草草草草草草草草海",
	"海草草草道草草草草草草草草草草草草草草海",
	"海草草草道草草草草草草草草草草草草草草海",
	"海海草道道道草草草草草草草草草草草草海海",
	"海海海海海海海海海海海海海海海海海海海海"]
	};

	var mapManeger = function(initMap){
	var self = this;

	self.fields = {};
	self.Add = function(map){
	self.fields[map.name] = map;
	};

	self.map = initMap;
	self.Add(initMap);

	function place(x, y){
	return self.map.map[y][x];
	}

	this.move = function(vx, vy){
	var map = self.map;

	function canMove() {
	var x = map.loc.x + vx;
	var y = map.loc.y + vy;
	var x_len = map.map[0].length;
	var y_len = map.map.length;
	if(x < 0) return false;
	if(x_len <= x) return false;
	if(y < 0) return false;
	if(y_len <= y) return false;
	if(0 <= $.inArray(place(x, y), map.block)) return false;
	return true;
	}

	if(canMove()){
	map.loc.x +=vx;
	map.loc.y +=vy;
	}

	if(undefined != map.move[place(map.loc.x, map.loc.y)]){
	self.map = self.fields[map.move[place(map.loc.x, map.loc.y)]];
	}
	};

	self.toHtml = function(){
	var disp = [];
	var map = this.map;
	for(var i = 0; i < map.map.length; ++i){
	disp[i] = map.map[i];
	if(map.loc.y == i){
	disp[i] = disp[i].substr(0, map.loc.x)
	+ "主" + disp[i].substr(map.loc.x + 1, map.map[i].length)
	}
	}
	return disp.join("<br/>");
	};
	};

	var mm = new mapManeger(field_map);
	mm.Add(castle_map);
	mm.Add(town_map);

	function move(vx, vy){
	mm.move(vx, vy);
	$("#map").html(mm.toHtml());
	}

	jQuery(document).ready(
	function(){
	$("#map").html(mm.toHtml());
	}
	);

	</script>
	</head>
	<body>
	<div style="position:static">
	<div id="map">
	........
	</div>
	<div >
	<button style="width:80" onclick="move(0, -1);"> up </button><br/>
	<button style="width:40" onclick="move(-1, 0);">right</button>
	<button style="width:40" onclick="move(1, 0);">left</button><br/>
	<button style="width:80" onclick="move(0, 1);">down</button>
	</div>
	</div>
	</body>
	</html>