質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

enchant.js

enchant.jsとは、アプリやゲームを簡単に開発できるオープンソースのHTML5+JavaScriptベースのフレームワークです。プログラミング学習にも用いられ、多くの素材やプラグインが用意されています。

Q&A

解決済

2回答

1955閲覧

変数の使用方法について

kamecha

総合スコア41

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

enchant.js

enchant.jsとは、アプリやゲームを簡単に開発できるオープンソースのHTML5+JavaScriptベースのフレームワークです。プログラミング学習にも用いられ、多くの素材やプラグインが用意されています。

0グッド

0クリップ

投稿2017/06/12 11:37

編集2017/06/12 13:12

###現状
自作ゲームを制作しようとしている、プログラミング初心者です。
現在JavaScriptを用いてゲームを作成しているのですが、意図しない動作をしたので
質問したいと思います。

###内容
まずは、このコードです。
少し長いかもしれませんが、見ていただきたいです。

lang

1enchant(); 2 3var canvas; 4 5var Pscene; //待期シーン 6var play; 7 8var RsceneW; //勝利シーン 9var RsceneL; //敗北シーン 10var RsceneD; //引き分けシーン 11 12 13window.onload = function(){ 14 var game = new Core(320, 320); 15 game.preload('img/chara1.png', 'img/enchant.png', 'img/sirokuma.png','sound/bakumatsubukyoku_hananoran.mp3'); 16 game.fps = 15; 17 18 game.onload = function(){ 19 20 Pscene = new Scene(); 21 var bear = new Sprite(32, 32); 22 bear.image = game.assets['img/chara1.png']; 23 bear.x = 30; 24 bear.y = 80; 25 bear.frame = 0; 26 Pscene.addChild(bear); 27 28 var enemy = new Sprite(32, 32); 29 enemy.image = game.assets['img/sirokuma.png']; 30 enemy.x = 200; 31 enemy.y = 80; 32 enemy.scaleX = -1; 33 enemy.frame = 2; 34 Pscene.addChild(enemy); 35 36 play = function(){ 37 game.pushScene(Pscene); 38 } 39 40 } 41 game.start(); 42}; 43 44play(); 45

現在Psceneなどを関数で表示しようとしているのですが、
window.onloadの外側で変数playを定義して、window.onladの内側で変数playに、
Psceneを表示させる関数を代入し、
その変数playを、window.onloadの外側で呼び出すことをしようとしているのですが

main.js:41 Uncaught TypeError: play is not a function at main.js:41

と、エラーメッセージが表示されました。
自分の変数が誤っているのは、理解できるのですが
現在自分が考えているような事
〔変数playにPsceneを表示する関数を代入し、window.onloadの外側で関数を呼び出す〕
をするためには、どのような解決策がありますか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

考え方はあってますが、イベントの知識が足りないのかなと思いました。

::追記
kei344さんがおっしゃるように、非同期処理も学んでみてください。
javascriptではイベントと非同期処理が非常に重要になります。
ただ、非同期処理はテストがとても面倒になることにもなるので
そのあたりは設計を頑張ってくださいね。
::追記ここまで

以下の

javascript

1window.onload

に対して代入するのは、関数です。ちゃんと関数が代入されていますが、
この代入した関数が実行されるタイミングより前に、[play();]としている
ため、代入処理がなされる前に実行されます。

現状のコードは以下のような順番で実行されます。

javascript

1// 実行開始 1 2enchant(); 3 4var canvas; 5 6var Pscene; //待期シーン 7var play; 8 9var RsceneW; //勝利シーン 10var RsceneL; //敗北シーン 11var RsceneD; //引き分けシーン 12 13 // ここでは window の onload イベントが実行された時に実行される関数を 14 // 登録する処理 15window.onload = 16 /* 17 ===================================================================== 18 ここからは、 window の onload イベントが実行された後に行われる 19 */ 20 function(){ 21 var game = new Core(320, 320); 22 game.preload('img/chara1.png', 'img/enchant.png', 'img/sirokuma.png','sound/bakumatsubukyoku_hananoran.mp3'); 23 game.fps = 15; 24 25 26 // ここでは game 変数に格納された Coreの onloadイベントが実行されたときに 27 // 実行される関数を登録する処理 28 game.onload = 29 30 /* 31 32 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 33 ここからは、 gameに格納された Core の onload イベントが実行された後に行われる 34 35 */ 36 function(){ 37 38 Pscene = new Scene(); 39 var bear = new Sprite(32, 32); 40 bear.image = game.assets['img/chara1.png']; 41 bear.x = 30; 42 bear.y = 80; 43 bear.frame = 0; 44 Pscene.addChild(bear); 45 46 var enemy = new Sprite(32, 32); 47 enemy.image = game.assets['img/sirokuma.png']; 48 enemy.x = 200; 49 enemy.y = 80; 50 enemy.scaleX = -1; 51 enemy.frame = 2; 52 Pscene.addChild(enemy); 53 54 play = function(){ 55 game.pushScene(Pscene); 56 } 57 58 } 59 /* 60 61 ここまで、 gameに格納された Core の onload イベントが実行された関数の終了 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 63 64 */ 65 game.start(); 66 }; 67 68 /* 69 ここまで、 window の onload イベントが実行された関数の終了 70 ===================================================================== 71 */ 72 73// 上記より +++ で囲まれた領域が実行されていないのにplayを関数呼び出しするため 74// playの内容はデフォルト値の undefined にたいして関数実行をするためエラーとなる 75play(); 76

投稿2017/06/12 12:31

編集2017/06/12 12:34
kanimaru

総合スコア1013

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kamecha

2017/06/12 13:25

なるほど、ということは、 1. enchant(); ~ var RsceneD; 2.play(); 3.window.onload という順番で実行されるため、エラーが発生すると言うことですか? それならば、自分が意図している動きを再現する方法は非同期の関係で不可能ですか?
kanimaru

2017/06/12 15:42

window.onloadのイベント発火時に処理する関数の登録直後にplayを実行するのは無理かと思います。 game.onloadeイベント発火後に処理されることが確定するのであれば可能かとおもいます。 そうでなければ、playを利用する前に毎回playが関数かをtypeofで判断して関数なら利用するというような判定処理が必要ですがあまり現実的ではないかと。
kamecha

2017/06/14 10:25

なるほど、有り難うございます。
guest

0

非同期 JavaScript」で検索してみてください。

JavaScript

1//play(); 2```3```JavaScript 4play = function(){ 5 game.pushScene(Pscene); 6} 7play(); // ここで始めて実行できる

投稿2017/06/12 12:28

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問