如何使用p5.js实现游戏加载页视频播放完毕后显示开始按钮

你不需要使用setInterval来实现这个效果，p5.js提供的视频元素自带播放结束事件监听，比定时器精度更高，不会受视频加载卡顿的影响出现时间错位。

具体修改步骤 #

• 按钮初始化完成后先隐藏，避免页面加载时就显示
• 把视频的循环播放改为单次播放
• 给视频绑定播放结束回调，触发时显示按钮
• 可在按钮点击回调中补充进入游戏的逻辑

修改后的完整代码 #

let bg;
let logo;
let button;
let vid;
let click;

function preload() {
    bg = loadImage('assets/space.png');
    logo = loadImage('assets/logo.png');
    rock1 = loadImage('assets/rock1.png');
    rock2 = loadImage('assets/rock2.png');
    go = loadImage('assets/go.png');
    hs = loadImage('assets/hs.png');
    bg1 = loadImage('assets/space.png');
    w = loadImage('assets/w.png');
    a = loadImage('assets/a.png');
    s = loadImage('assets/s.png');
    d = loadImage('assets/d.png');
    mouse = loadImage('assets/mouse.png');
    click = loadSound('assets/click.mp3');
}

function setup() {
    vid = createVideo('assets/vid.mp4')
    bg = loadImage('assets/space1.png');
    createCanvas(windowWidth, windowHeight);
    strokeWeight(10);
    // frameRate(30);
    button = createButton('CLICK TO START');
    button.position(650, 650);
    button.mousePressed(soundPlay)
    button.hide(); // 默认隐藏按钮
    vid.play(); // 替换原vid.loop()，单次播放视频
    // 监听视频播放结束事件
    vid.onended(() => {
      button.show(); // 播放完成后显示按钮
    })
}

function soundPlay() {
    if (!click.isPlaying()) {
        click.play();
    }
    // 此处可补充进入游戏的逻辑，比如切换场景或者跳转页面
    // 示例：window.location.href = './game.html'
}

function draw() {
    background(bg);
    stroke(189, 51, 164);
    rect(190, 90, 1070, 600, 10);
    for (let i = 200; i < 1250; i++) {
        let r = random(255);
        stroke(r);
        line(i, 100, i, 680);
    }
    image(logo, 180, 70, 200, 200);
    stroke(189, 51, 164);
    line(740, 30, 700, 85);
    line(660, 30, 700, 85);
    circle(660, 30, 20);
    circle(740, 30, 20);
    image(rock1, 1300, 70, 100, 100);
    image(rock2, 60, 70, 100, 100);
    rect(400, 150, 650, 300, 10);
    image(bg1, 400, 155, 650, 290);
    rect(400, 450, 650, 180, 10);
    image(bg1, 400, 455, 650, 170);
    image(w, 410, 500, 25, 25);
    image(a, 410, 530, 24, 24);
    image(s, 410, 560, 24, 24);
    image(d, 410, 590, 24, 24);
    image(mouse, 710, 500, 25, 25);
    noStroke();
    fill(255)
    text("CONTROLLS:", 660, 470);
    textSize(20);
    textStyle(BOLD);
    text("SPACEBAR:", 710, 550);
    image(vid, 400, 150, 650, 300);
    text("LOADING: . . .", 650, 150);
}

备选定时器方案（不推荐） #

如果确实需要用时间控制实现，可以在setup中添加定时器，40秒后显示按钮：

setTimeout(() => {
  button.show()
}, 40000)

该方案缺陷是如果视频加载卡顿、播放缓冲，会出现按钮显示和视频结束不同步的问题。

内容的提问来源于stack exchange，提问作者Yakob