时间戳

首页 > 解决方案 > 在函数原型中使用类时出错

p5.js - 在函数原型中使用类时出错

问题描述

我正在做一个p5项目，但我遇到了一个问题。当我试图在我的原型中使用我的类名时，我遇到了一个错误',' expected，但我没有任何地方可以放置一个。这是文件。


-----FIRST FILE----- 
class Pipe {
    constructor() {
        this.width = 50;
        this.height = floor(random(canvas.height - 100));
        this.x = canvas.width + this.width;
        this.topY = canvas.height - this.height;
    }

    show() {
        fill(0, 204, 0);
        rect(this.x, canvas.height - this.height, this.x + width, canvas.height);
    }

    update() {
        this.x -= panSpeed;
    }

    ### IT'S THIS "p" which causing the problem ###
    colided(Player p) {
        if (p.x + p.size > this.x && p.x - p.size < this.x + this.width) {
            if (p.y + p.size > this.topY) {
                return true;
            }
        }
        return false;
    }
}

-----SECOND FILE-----
class Player {

    constructor(x, y) {
        this.x  = x;
        this.y = y;
        this.velY = 0;
        this.velX = panSpeed;
        this.size = 20;
    }

    show() {
        noStroke();
        fill(255, 255, 0);
        ellipse(this.x, this.y, this.size);
    }

    update() {
        this.velY += gravity;
        this.velY = constrain(this.velY, -1000, 25);
        this.y += this.velY;
        if (pipe.colided(this)) {
            this.y = 0;
        }
    }

    flap() {
        this.velY -= 50;
    }
}

-----THIRD FILE-----
var panSpeed = 5;
var gravity = 3;
var player;
var pipe;

function setup() {
    window.canvas = createCanvas(800, 800);
    player = new Player(100, canvas.height / 2);
    pipe = new Pipe();
}

function draw() {
    background(135, 206, 250);
    pipe.update();
    pipe.show();
    player.update();
    player.show();
}

function keyPressed() {
    switch (key) {
        case ' ':
            player.flap();
            break;
    }
}

-----THE HTML-----
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.js example</title>
    <style> body {padding: 0; margin: 0;} </style>
    <script src="lib/p5.js"></script>
    <script src="lib/p5.sound.js"></script>
    <script src="js/sketch.js"></script>
    <script src="js/toto.js"></script>
    <script src="js/pipe.js"></script>
  </head>
  <body>
  </body>
</html>

标签： p5.js

解决方案

首先，删除 ### IT'S THIS "p" which causing the problem ###

第二个问题是

colided(Player p) {
 ...
}

你试图给它一种 Player 类型，它不是有效的 JavaScript。如果您删除播放器并且只有

colided(p) { 
 ...
}

这会解决你的问题。仅供参考，如果您使用 Typescript 作为可选静态类型的示例，则语法为colided(p : Player)

class Pipe {
    constructor() {
        this.width = 50;
        this.height = floor(random(canvas.height - 100));
        this.x = canvas.width + this.width;
        this.topY = canvas.height - this.height;
    }

    show() {
        fill(0, 204, 0);
        rect(this.x, canvas.height - this.height, this.x + width, canvas.height);
    }

    update() {
        this.x -= panSpeed;
    }

    colided(p) {
        if (p.x + p.size > this.x && p.x - p.size < this.x + this.width) {
            if (p.y + p.size > this.topY) {
                return true;
            }
        }
        return false;
    }
}

class Player {

    constructor(x, y) {
        this.x  = x;
        this.y = y;
        this.velY = 0;
        this.velX = panSpeed;
        this.size = 20;
    }

    show() {
        noStroke();
        fill(255, 255, 0);
        ellipse(this.x, this.y, this.size);
    }

    update() {
        this.velY += gravity;
        this.velY = constrain(this.velY, -1000, 25);
        this.y += this.velY;
        if (pipe.colided(this)) {
            this.y = 0;
        }
    }

    flap() {
        this.velY -= 50;
    }
}

var panSpeed = 5;
var gravity = 3;
var player;
var pipe;

function setup() {
    window.canvas = createCanvas(800, 800);
    player = new Player(100, canvas.height / 2);
    pipe = new Pipe();
}

function draw() {
    background(135, 206, 250);
    pipe.update();
    pipe.show();
    player.update();
    player.show();
}

function keyPressed() {
    switch (key) {
        case ' ':
            player.flap();
            break;
    }
}
<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>

推荐阅读