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

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

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

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

Q&A

解決済

1回答

4541閲覧

Uncaught TypeError: Cannot read property 'length' of undefinedの解決方法がわかりません。

K.Saitoh

総合スコア6

HTML

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

0グッド

0クリップ

投稿2020/08/03 11:56

編集2020/08/16 07:10

前提・実現したいこと

エラーは47行目のlengthという部分に出ていて値が代入されてない。と出ていると思います。そこの解決方法がわかりません。returnや()が足りないとも思えないのですがどうすればいいのでしょうか?

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

Uncaught TypeError: Cannot read property 'length' of undefined

該当のソースコード

html5

1<html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>フルーツ拾いゲーム</title> 5 <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> 6 <script> 7 var img_a = new Image(); 8 img_a.src = 'imgs/assets/apple.png' 9 var img_b = new Image(); 10 img_b.src = 'imgs/assets/bucket.png' 11 var img_c = new Image(); 12 img_c.src = 'imgs/assets/ichigo.png' 13 window.addEventListener("load", init); 14 15 function init() { 16 var stage = new createjs.Stage("myCanvas"); 17 18 var apples = []; 19 var strawberrys = []; 20 var count = 0; 21 var score = 0; 22 var STAGE_W = 960; 23 var STAGE_H = 540; 24 var SIZE = 64; 25 26 var bg = new createjs.Shape(); 27 bg.graphics.beginFill("0xfff8dc").drawRect(0, 0, STAGE_W, STAGE_H); 28 stage.addChild(bg); 29 30 var bucket = new createjs.Bitmap(img_b); 31 stage.addChild(bucket) 32 33 var scoreT = new createjs.Text("", "24px sans-serif", "#333333") 34 stage.addChild(scoreT); 35 36 createjs.Ticker.framerate = 60; 37 createjs.Ticker.addEventListener("tick", handleTick); 38 39 function handleTick() { 40 for(var i = 0; i < apples.length; i++) { 41 apples[i].y += 2; 42 if(apples[i].y > STAGE_W - SIZE) { 43 showGameOver(); 44 return; 45 } 46 } 47 for(var j = 0; j < strawberrys.length; j++) { 48 strawberrys[i].y += 2; 49 if(strawberrys[i].y > STAGE_W - SIZE) { 50 showGameOver(); 51 return; 52 } 53 } 54 55 bucket.x += (stage.mouseX - bucket.x) * 0.1; 56 bucket.y += (stage.mouseY - bucket.y) * 0.1; 57 58 count = count + 1; 59 if(count % 60 == 0){ 60 var apple = new createjs.Bitmap(img_a); 61 var strawberrys = new createjs.Bitmap(img_c); 62 apple.x =(STAGE_W - SIZE) * Math.random(); 63 apple.y = 0; 64 strawberrys.x = 0; 65 strawberrys.y = (STAGE_W - SIZE) * Math.random(); 66 stage.addChild(apple); 67 apple.push(apple); 68 stage.addChild(strawberrys); 69 apple.push(strawberrys); 70 } 71 72 for(var i = 0; i < apples.length; i++){ 73 var apple = apples[i]; 74 var pt = apple.localToLOcal(32, 55, bucket); 75 if(bucket,hitTest(pt.x, pt.y)) { 76 stage.removeChild(apple); 77 apple.splitce(i, 1); 78 score += 100; 79 scoreT.text = String(score); 80 break; 81 } 82 } 83 84 for(var i = 0; i < strawberrys.length; i++){ 85 var strawberry = strawberrys[i]; 86 var pt = strawberry.localToLOcal(32, 55, bucket); 87 if(bucket,hitTest(pt.x, pt.y)) { 88 stage.removeChild(apple); 89 strawberry.splitce(i, 1); 90 score += 100; 91 scoreT.text = String(score); 92 break; 93 } 94 } 95 96 stage.updata(); 97 98 } 99 100 function showGameOver(){ 101 alert("ゲームオーバー! あなたのスコアは" + score +"でした。"); 102 createjs.Ticker.removeAllEventListeners(); 103 } 104 } 105 </script> 106 </head> 107 <body> 108 <canvas id="myCanvas" width="960" height="540"></canvas> 109 </body> 110</html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

  • 変数jを使ってfor文を繰り返しながら、添字にiを使っている。
  • 画面下に到達したかのチェックに、なぜかSTAGE_W (横幅)を使っている
  • ストロベリーを新規作成するさい、xではなくyに乱数値を振っている
  • 変数名(apple, strawberry)と配列名(apples, strawberrys)が紛らわしいせいで、apple.push(apple)のように変数にpushしたり、stage.addChild(strawberrys)のように配列ごとaddChildしたり、さらにはapple.push(strawberrys)と変数に別のフルーツの配列をpushしたり、と間違い放題である
  • メソッド名も頻繁に間違えている、localToLOcallocalToLocalの誤り、bucket,hitTestbucket.hitTestの誤り、apple.splitce(i, 1)apples.splice(i, 1)の誤り(変数名と配列名の混同とセット)、strawberry.splitce(i, 1)strawberrys.splice(i, 1)の誤り(変数名と配列名の混同とセット)、stage.updata()stage.update()の誤りである。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>フルーツ拾いゲーム</title> 6 <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> 7 <script> 8 var img_a = new Image(); 9 img_a.src = 'imgs/assets/apple.png' 10 var img_b = new Image(); 11 img_b.src = 'imgs/assets/bucket.png' 12 var img_c = new Image(); 13 img_c.src = 'imgs/assets/ichigo.png' 14 window.addEventListener("load", init); 15 16 function init() { 17 var stage = new createjs.Stage("myCanvas"); 18 19 var apples = []; 20 var strawberrys = []; 21 var count = 0; 22 var score = 0; 23 var STAGE_W = 960; 24 var STAGE_H = 540; 25 var SIZE = 64; 26 27 28 var bg = new createjs.Shape(); 29 bg.graphics.beginFill("0xfff8dc").drawRect(0, 0, STAGE_W, STAGE_H); 30 stage.addChild(bg); 31 32 var bucket = new createjs.Bitmap(img_b); 33 stage.addChild(bucket) 34 35 var scoreT = new createjs.Text("", "24px sans-serif", "#333333") 36 stage.addChild(scoreT); 37 38 createjs.Ticker.framerate = 60; 39 createjs.Ticker.addEventListener("tick", handleTick); 40 41 function handleTick() { 42 for (var i = 0; i < apples.length; i++) { 43 apples[i].y += 2; 44 if (apples[i].y > STAGE_H - SIZE) { 45 console.log("apples[" + i + "].y = " + apples[i].y); 46 showGameOver(); 47 return; 48 } 49 } 50 51 for (var i = 0; i < strawberrys.length; i++) { 52 strawberrys[i].y += 2; 53 if (strawberrys[i].y > STAGE_H - SIZE) { 54 console.log("strawberrys[" + i + "].y = " + strawberrys[i].y); 55 showGameOver(); 56 return; 57 } 58 } 59 60 bucket.x += (stage.mouseX - bucket.x) * 0.1; 61 bucket.y += (stage.mouseY - bucket.y) * 0.1; 62 63 count = count + 1; 64 if (count % 60 == 0) { 65 var apple = new createjs.Bitmap(img_a); 66 apple.x = (STAGE_W - SIZE) * Math.random(); 67 apple.y = 0; 68 stage.addChild(apple); 69 apples.push(apple); 70 71 var strawberry = new createjs.Bitmap(img_c); 72 strawberry.x = (STAGE_W - SIZE) * Math.random(); 73 strawberry.y = 0; 74 stage.addChild(strawberry); 75 strawberrys.push(strawberry); 76 } 77 78 for (var i = 0; i < apples.length; i++) { 79 var apple = apples[i]; 80 var pt = apple.localToLocal(32, 55, bucket); 81 if (bucket.hitTest(pt.x, pt.y)) { 82 stage.removeChild(apple); 83 apples.splice(i, 1); 84 score += 100; 85 scoreT.text = String(score); 86 break; 87 } 88 } 89 90 for (var i = 0; i < strawberrys.length; i++) { 91 var strawberry = strawberrys[i]; 92 var pt = strawberry.localToLocal(32, 55, bucket); 93 if (bucket.hitTest(pt.x, pt.y)) { 94 stage.removeChild(strawberry); 95 strawberrys.splice(i, 1); 96 score += 100; 97 scoreT.text = String(score); 98 break; 99 } 100 } 101 102 stage.update(); 103 104 } 105 106 function showGameOver() { 107 alert("ゲームオーバー! あなたのスコアは" + score + "でした。"); 108 createjs.Ticker.removeAllEventListeners(); 109 } 110 } 111 </script> 112 </head> 113 <body> 114 <canvas id="myCanvas" width="960" height="540"></canvas> 115 </body> 116</html>

投稿2020/08/03 13:09

編集2020/08/03 13:16
Daregada

総合スコア11990

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

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

K.Saitoh

2020/08/03 13:52

Daregadaさん 回答ありがとうございます。 大文字、小文字のミスや全角半角などのイージーミスも多、醜いソースコードをのせて申し訳ありません。 Daregadaさんのコードで動きましたありがとうございます。 以前からこういうミスが多く、見直しても見直してもミスしてしまいます。 私はプログラミングは向いてないのかもしれません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問