я использую бумагу js, чтобы сделать клон patatap, но получаю ошибку - PullRequest
Новая
       78

я использую бумагу js, чтобы сделать клон patatap, но получаю ошибку

1 голос
/ 25 февраля 2020

я делаю курс по udemy, название курса - bootcamp веб-разработчика от colt steele, в лекции 239, когда я добавляю объект 'keyData', в моем коде console.my появляется сообщение об ошибке: 

<!DOCTYPE html>
<html>
<head>
    <title>Circles</title>
    <script type="text/javascript" src="paper-full.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.js"></script>
    <link rel="stylesheet" type="text/css" href="circles.css">
    <script type="text/paperscript" canvas="myCanvas">

        var keyData = {
            a: {
                color: "purple",
                sound: new Howl({
                src: ['sounds/bubbles.mp3']
                });
            },
            s: {
                color: "green",
                sound: new Howl({
                src: ['sounds/clay.mp3']
                });
            },
            d: {
                color: "yellow",
                sound: new Howl({
                src: ['sounds/confetti.mp3']
                });
            }
        }

        var circles = [];

        function onKeyDown(event){
            if(keyData[event.key]){
                var maxPoint = new Point(view.size.width, view.size.height);
                var randomPoint = Point.random();
                var point = maxPoint * randomPoint;
                var newCircle = new Path.Circle(point, 500);
                newCircle.fillColor = keyData[event.key].color;
                keyData[event.key].sound.play();
                circles.push(newCircle);
            }   
        }

        function onFrame(event){
            for(var i = 0; i < circles.length; i++){
                circles[i].scale(.9);
                circles[i].fillColor.hue += 1;
            }
        }
        <!-- alert(view.size);  this will give an alert showing the max width and max height of the screen-->
        <!-- alert(view.center); this will give an alert showing the center of the screen-->
    </script>
</head>
<body>
    <canvas id="myCanvas" resize></canvas>
</body>
</html>

Ошибка возникает только при вводе объекта keyData. Это ошибка. 

paper-full.js:15726 Uncaught SyntaxError: Unexpected token (8:6)
    at raise (paper-full.js:15726)
    at unexpected (paper-full.js:16366)
    at expect (paper-full.js:16362)
    at parseObj (paper-full.js:16829)
    at parseExprAtom (paper-full.js:16799)
    at parseExprSubscripts (paper-full.js:16730)
    at parseMaybeUnary (paper-full.js:16716)
    at parseExprOps (paper-full.js:16682)
    at parseMaybeConditional (paper-full.js:16669)
    at parseMaybeAssign (paper-full.js:16655)

`Основная проблема, которая сохраняется, заключается в том, что при вводе объекта возникает ошибка. Пожалуйста, помогите. Спасибо.

1 Ответ

1 голос
/ 27 февраля 2020

У вас есть дополнительный ; в вашем keyData коде.

Вот исправленный код. 

<!DOCTYPE html>
<html>
<head>
    <title>Circles</title>
    <script type="text/javascript" src="paper-full.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.js"></script>
    <link rel="stylesheet" type="text/css" href="circles.css">
    <script type="text/paperscript" canvas="myCanvas">

        var keyData = {
            a: {
                color: 'purple',
                sound: new Howl({
                    src: ['sounds/bubbles.mp3']
                })
            },
            s: {
                color: 'green',
                sound: new Howl({
                    src: ['sounds/clay.mp3']
                })
            },
            d: {
                color: 'yellow',
                sound: new Howl({
                    src: ['sounds/confetti.mp3']
                })
            }
        };

        var circles = [];

        function onKeyDown(event) {
            if (keyData[event.key]) {
                var maxPoint = new Point(view.size.width, view.size.height);
                var randomPoint = Point.random();
                var point = maxPoint * randomPoint;
                var newCircle = new Path.Circle(point, 500);
                newCircle.fillColor = keyData[event.key].color;
                keyData[event.key].sound.play();
                circles.push(newCircle);
            }
        }

        function onFrame(event) {
            for (var i = 0; i < circles.length; i++) {
                circles[i].scale(.9);
                circles[i].fillColor.hue += 1;
            }
        }

        <!-- alert(view.size);  this will give an alert showing the max width and max height of the screen-->
        <!-- alert(view.center); this will give an alert showing the center of the screen-->
    </script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
...