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

前提・実現したいこと

エラーは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>

行動規範の内容に同意します

回答1件

ベストアンサー

変数jを使ってfor文を繰り返しながら、添字にiを使っている。
画面下に到達したかのチェックに、なぜかSTAGE_W (横幅)を使っている
ストロベリーを新規作成するさい、xではなくyに乱数値を振っている
変数名(apple, strawberry)と配列名(apples, strawberrys)が紛らわしいせいで、apple.push(apple)のように変数にpushしたり、stage.addChild(strawberrys)のように配列ごとaddChildしたり、さらにはapple.push(strawberrys)と変数に別のフルーツの配列をpushしたり、と間違い放題である
メソッド名も頻繁に間違えている、localToLOcalはlocalToLocalの誤り、bucket,hitTestはbucket.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さんのコードで動きましたありがとうございます。以前からこういうミスが多く、見直しても見直してもミスしてしまいます。私はプログラミングは向いてないのかもしれません。

行動規範の内容に同意します