Javascriptのcanvasにてsessionを使用する

前提・実現したいこと

PHPとJavaScriptのcanvasを使用して簡易なRPG風ゲームを作成しています。

今回知りたいことを簡単に説明しますと
キーボードでキャラクターを操作→マップ画面内をキャラクター移動する→敵に遭遇する→戦闘中の画面へ遷移→
敵を倒す→元のマップ画面に遷移する
のところで元のマップ画面へ遷移する際にキャラクターが元いた座標の位置からスタートさせたいと思っております。

別ページへの遷移なのでsessionにて座標の値を代入して使用すれば上手くいくはず…
と思っていたのですがなかなか上手く動作せず困っています。

発生している問題・エラーメッセージ

ページを遷移した際は元いた座標からスタートさせることはできるのですが
その後にキーボードにてキャラクターを操作するとキャラクターが消えて
コンソールにてエラーがでます。

script.js:110 Uncaught TypeError: Cannot read property '9' of undefined
at main (script.js:110)
script.js:121 Uncaught TypeError: Cannot read property '3' of undefined
at main (script.js:121)
などその時に押すキーボードによってエラーが違います。

そもそもcanvasにてsessionを使用することは出来ないのでしょうか？

該当のソースコード

//index.php-----------------------------------------------------------------------
//-------------------------------------------------------------------------------

<?php
require('function.php');
?>

<!DOCTYPE html>
<html lang="ja">
<haed>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</haed>

<body>

 <div class="width">

 <section class="main">

 <div>
   <canvas id="can"></canvas>
 </div>

 <div class="form-area">
    <div class="human">
      <?php echo $Humans[0]->getName();?> HP:<?php echo $Humans[0]->getHp()?>
    </div>
 </div>

 </section>

 <section class="sideber">
<span>
  <?PHP
    echo (!empty($_SESSION['history']))? $_SESSION['history'] : '';
  ?>
</span>
 </section>

</div>

<script src="script.js"></script>
</body>
</html>

//script.js-----------------------------------------------------------------------
//-------------------------------------------------------------------------------

//キャンバス設定
let can = document.getElementById("can");
let con = can.getContext("2d");
can.width = 32*22;
can.height = 32*15;
//スムージング
const SMOOTHING = false;
con.mozimageSmoothingEnagble = SMOOTHING;
con.webkitimageSmoothigEnagble = SMOOTHING;
con.msimageSmoothingEnable = SMOOTHING;
con.imageSmoothingEnable = SMOOTHING;

//画像（がぞう）のオブジェクトを作る
const mapchip = new Image();
mapchip.src = 'img/map.png';

var x = 0;
var y = 0;

var x = window.sessionStorage.getItem('session_x');
var y = window.sessionStorage.getItem('session_y');
window.sessionStorage.removeItem('session_x');
window.sessionStorage.removeItem('session_y');

//人間表示
const human = new Object();
human.img = new Image();
human.img.src = 'img/20140106-yusya.jpg';
human.x = x;
human.y = y;
human.move = 0;

//魔王表示
const monster = new Object();
monster.img = new Image();
monster.img.src = 'img/monster.jpeg';
monster.x = 32*19;
monster.y = 0;

//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;
key.push = '';

//マップの作成
var map = [
  [0, 1, 1, 0, 0, 0, 1, 1 ,0 ,0 ,0 ,1 ,0 ,1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1],
  [0, 0, 0, 0, 1, 0, 0, 1 ,0 ,1 ,0 ,1 ,0 ,0 ,0 ,1 ,0 ,1 ,0 ,0 ,0 ,1],
  [0, 1, 1, 1, 0, 1, 0, 1 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1],
  [0, 1, 0, 0, 0, 1, 0, 0 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,1 ,1 ,1 ,0 ,0 ,0 ,0],
  [0, 1, 1, 0, 1, 0, 1, 1 ,1 ,1 ,1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,0],
  [0, 0, 0, 0, 1, 0, 1, 1 ,0 ,0 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1 ,0 ,0 ,0],
  [0, 1, 1, 1, 0, 0, 0, 1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0 ,0 ,0 ,1 ,0 ,1 ,1],
  [0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0 ,0 ,1 ,1 ,0 ,0 ,1 ,0 ,1 ,0 ,0 ,0],
  [0, 0, 0, 0, 1, 0, 1, 0 ,0 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,1 ,1 ,0],
  [0, 1, 1, 0, 1, 0, 1, 0 ,0 ,1 ,1 ,1 ,0 ,1 ,0 ,0 ,1 ,0 ,1 ,0 ,0 ,0],
  [0, 0, 0, 0, 0, 0, 1, 1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,1],
  [0, 1, 1, 1, 1, 1, 0, 1 ,0 ,0 ,0 ,1 ,1 ,1 ,1 ,1 ,0 ,0 ,1 ,1 ,0 ,0],
  [0, 1, 0, 0, 0, 1, 0, 1 ,0 ,1 ,1 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,1 ,0 ,1 ,0],
  [0, 1, 0, 1, 0, 1, 0, 0 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,0],
  [0, 0, 0, 1, 0, 0, 0, 1 ,1 ,0 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,1 ,0 ,0 ,0],
]

function main() {

  //塗りつぶす色を指定
	con.fillStyle = "rgb( 0, 0, 0 )";
	//塗りつぶす
	con.fillRect(0, 0, 32*22, 32*15);

  for(var y=0; y<map.length; y++){
		for (var x=0; x<map[y].length; x++) {
			if ( map[y][x] === 1 ) con.drawImage( mapchip, 32, 0, 32, 32, 32*x, 32*y, 32, 32 );
		}
	}

	//画像を表示
	con.drawImage( human.img, human.x, human.y );
  con.drawImage( monster.img, monster.x, monster.y);

	addEventListener("keydown", keydownfunc, false);
	addEventListener("keyup", keyupfunc, false);

//敵とのエンカウント
  function rand(){
    const randam = Math.floor( Math.random() * 25 );
    if(randam === 0){
      window.sessionStorage.setItem('session_x', human.x);
      window.sessionStorage.setItem('session_y', human.y);
      window.location.replace("battle.php");
    }
  }

     if(human.move === 0){
       var x = human.x/32;
	     var y = human.y/32;
       if( x === 2 && y === 19){
        window.location.replace("battle.php");
       }
     }

	//方向キーが押されている場合は移動する
  if ( human.move === 0 ) {
		if ( key.left === true ) {
			var x = human.x/32;
			var y = human.y/32;
			x--;
			if ( map[y][x] === 0 ) {
				human.move = 32;
				key.push = 'left';
                rand();
			}
		}
		if ( key.up === true ) {
			var x = human.x/32;
			var y = human.y/32;
			if ( y > 0) {
				y--;
				if ( map[y][x] === 0 ) {
					human.move = 32;
					key.push = 'up';
                    rand();
				}
			}
		}
		if ( key.right === true ) {
			var x = human.x/32;
			var y = human.y/32;
			x++;
			if ( map[y][x] === 0 ) {
				human.move = 32;
				key.push = 'right';
                rand();
			}
		}
		if ( key.down === true ) {
			var x = human.x/32;
			var y = human.y/32;
			if ( y < 14 ) {
				y++;
				if ( map[y][x] === 0 ) {
					human.move = 32;
					key.push = 'down';
                    rand();
				}
			}
		}
	}
	//rico.moveが0より大きい場合は、移動を続ける
	if (human.move > 0) {
		human.move -= 2;
		if ( key.push === 'left' ) human.x -= 2;
		if ( key.push === 'up' ) human.y -= 2;
		if ( key.push === 'right' ) human.x += 2;
		if ( key.push === 'down' ) human.y += 2;
	}

	requestAnimationFrame( main );
}
//ページと依存している全てのデータが読み込まれたら、メインループ開始
addEventListener('load', main(), false);

//キーボードが押されたときに呼び出される関数
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	event.preventDefault();
}

//キーボードが放されたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}

よろしくお願いします。