Question

我目前正在使用javascript学习p5.js。

我试图在p5.js中制作DVD屏幕保护程序，并且我使用了The Coding Train的视频之一来帮助我。但是，它对我来说不太有效。

以下是他的视频的链接：https://www.youtube.com/watch?v=0j86zuqqTlQ

我使用preload（）加载DVD徽标，但是当我将其放入代码中时，整个页面将变成“正在加载...”。

这是我的代码：

let x;
let y;
let xspeed;
let yspeed;

let dvd;

function preload() {
    dvd = loadImage("dvd.png");
}

function setup() {
    createCanvas(800, 600);
    x = 400;
    y = 300;
    xspeed = 10;
    yspeed = 10;
}

function draw() {
    background(0);
    image(dvd, x, y);
    x = x + xspeed;
    y = y + yspeed;
    
    if (x + 80 == width || x === 0) {
        xspeed = -xspeed;
    }
    if (y + 60 == height || y === 0) {
        yspeed = -yspeed;
    }
}

<!DOCTYPE html>

<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>

        
        <script src="dvd-screensaver.js"></script>
        <script src="p5.js"></script>
    </body>
</html>

这是一个学校项目。

Answer 1

要在PC上本地使用p5.js，与它们提供的在线编辑器不同，您必须安装本地服务器：

https://github.com/processing/p5.js/wiki/Local-server

如果按照上面链接提供的说明进行操作，将非常简单。我个人使用了Node http-server选项。

在p5.js中使用preload（）时，页面停留在“正在加载...”上

1 个答案: