时间戳

首页 > 解决方案 > 我正在使用纸质 js 进行 patatap 克隆，但一直出错

javascript - 我正在使用纸质 js 进行 patatap 克隆，但一直出错

问题描述

我正在上 udemy 上一门课程，课程名称是 colt Steele 的 web developer bootcamp，在第 239 课中，当我添加对象“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>

该错误仅在键入对象“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)

` 仍然存在的主要问题是，当我键入对象时出现错误。请帮助。谢谢你。

标签： javascriptpaperjshowler.js

解决方案

您的代码中有额外;的内容。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>

推荐阅读