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

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

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

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

1414閲覧

CreatejsでremoveChildが効かない

teta

総合スコア16

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/06/08 07:53

escキーを押した際にtickイベントを削除してstopの文字を真ん中に出現させるようにして
spaceキーを押すと再度tickイベントを再設定するようにしたのですがなぜか
stopの文字がremoveChildで削除されません。

また、ゲームオーバーになった際にスタート画面に戻るようにしたくてgotoAndStopで最初の1フレーム目に戻る処理を
実装する予定なのですがCreatejsにはcavasのclearRectのようなものはないのでしょうか?(プレイヤーの飛行機などの位置がそのままになってしまうため)
canvas全体を初期化するようなもの

回答のほうよろしくお願いします。
確認用url
http://canvasgame.html.xdomain.jp/

↓以下抜粋

javascript

1//変数宣言 2var player = this.player; 3var scoreNum = 0; 4var score = this.score; 5var cntTick = 0; 6var cntTick_enemy = 0; 7var beamList = []; 8var enemyList = []; 9var enemy_beamList = []; 10//tickイベント 11createjs.Ticker.addEventListener("tick", handleTick); 12window.addEventListener("keydown", handleKeyEsc); 13/*window.addEventListener("keydown",handleKeyStart);*/ 14function handleKeyEsc(event) { 15 var keyEsc = event.keyCode; 16 console.log(keyEsc); 17 var stopTxt = new lib.stopTxt; 18 if (keyEsc === 32) { 19 20 createjs.Ticker.addEventListener("tick", handleTick); 21 stage.removeChild(stopTxt); 22 } 23 if (keyEsc === 27) { 24 25 createjs.Ticker.removeEventListener("tick", handleTick); 26 stopTxt.x = canvas.width / 2; 27 stopTxt.y = canvas.height / 2; 28 stage.addChild(stopTxt); 29 30 } 31 32 33} 34 35//ビーム作成 36function beamCreate() { 37 var beam = new lib.beam(); 38 beam.x = player.x; 39 beam.y = player.y; 40 stage.addChild(beam); 41 beamList.push(beam); 42} 43//エネミービーム作成 44function enemy_beamCreate(numE) { 45 var enemy_beam = new lib.enemy_beam(); 46 enemy_beam.x = enemyList[numE].x + 10; 47 enemy_beam.y = enemyList[numE].y + 4; 48 stage.addChild(enemy_beam); 49 /*console.log(enemyList[numE].x);*/ 50 enemy_beamList.push(enemy_beam); 51} 52 53function handleTick(event) { 54 //tickイベント8の倍数の時にbeamCreate呼び出す 55 if (cntTick++ % 8 == 0) { 56 beamCreate(); 57 58 } 59 //ビーム移動処理個別 60 for (var i = 0; i < beamList.length; i++) { 61 beamList[i].y -= 10; 62 63 if (beamList[i].y < 0) { 64 stage.removeChild(beamList[i]); // 画面から削除 65 beamList.splice(i, 1); // 配列から削除 66 } 67 } 68 69 /*console.log(canvas.width);*/ 70 71 //プレイヤー機マウスeaseing追従 72 player.x += (stage.mouseX - player.x) * 0.1; 73 player.y += (stage.mouseY - player.y) * 0.1; 74 75 //エネミー生成 76 if (cntTick_enemy++ % 60 == 0) { 77 var enemy = new lib.enemy(); 78 enemy.x = (canvas.width - 40) * Math.random(); 79 enemy.y = 50; 80 stage.addChild(enemy); 81 enemyList.push(enemy); 82 //配列に保存 83 84 85 86 } 87 for (var j = 0; j < enemyList.length; j++) { 88 if (Math.floor(Math.random() * 61) == 60) { 89 /*console.log(Math.random()*11);*/ 90 enemy_beamCreate(j); 91 } 92 93 for (var i = 0; i < enemy_beamList.length; i++) { 94 enemy_beamList[i].y += 1; 95 if (enemy_beamList[i].y > canvas.height) { 96 stage.removeChild(enemy_beamList[i]); 97 enemy_beamList.splice(i, 1); 98 } 99 } 100 } 101 102 103 //配列から操作 104 for (var i = 0; i < enemyList.length; i++) { 105 enemyList[i].y += 1; 106 if (enemyList[i].y > canvas.height) { 107 stage.removeChild(enemyList[i]); // 画面から削除 108 enemyList.splice(i, 1); // 配列から削除 109 } 110 } 111 112 // 発射弾と敵の当たり判定 113 114 for (var j = 0; j < enemyList.length; j++) { 115 for (var i = 0; i < beamList.length; i++) { 116 var beam = beamList[i]; 117 var enemy = enemyList[j]; 118 // 敵から見た発射弾のローカル座標を取得 119 var pt = beam.localToLocal(0, 0, enemy); 120 121 // 当たり判定を行う 122 if (enemy.hitTest(pt.x, pt.y) == true) { 123 // 発射弾の削除 124 stage.removeChild(beam); 125 beamList.splice(i, 1); 126 /*enemyList[j].alpha = 0.5;*/ 127 // 敵の削除 128 stage.removeChild(enemyList[j]); 129 enemyList.splice(j, 1); 130 131 // スコアの更新 132 scoreNum += 10; 133 score.text = String(scoreNum); 134 135 break; 136 } 137 } 138 } 139 140 stage.update(); 141}

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問