Q&A
コードはマークダウンのcode機能を利用してご提示ください
前提・実現したいこと
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; }
よろしくお願いします。
session と呼んでいるのはいわゆるセッションではなく、sessionStorage のことを指していますか？
すいません。
そもそもsessionとsessionStorageは概要が違うのですね。
sessionStorageのことを指しています。
回答1件
0
var y = human.y/32;だと変数yが整数であることが担保されないと思います。
その変数yを配列の添え字に使うのですから、map[y]がundefinedを返すことがあるはずで、そうであればmap[y][x]はご提示のようなエラーになるのではないかと思います。
解決方法としては、var y = Math.floor(human.y/32);のように整数化すればいいのではないかな、と思いました。
投稿2020/03/12 09:02
総合スコア36138
確かにLhankor_Mhyさんの言う通りだと思いましたのでMath.floorで整数化してみましたが
動作は変わりませんでした。
回答ありがとうございます✨
なるほど。
コメントを受けて、実際に当方でご提示のコードを試してみましたが、ご提示のエラーが再現しませんでした。
もしかすると、環境の問題か、ご提示いただいていない部分のコードに原因があるのかもしれないですね。
ちなみに、テストしているブラウザは何ですか？
あなたの回答
tips
プレビュー
