时间戳

首页 > 解决方案 > 当我添加计时器功能时，它不会画出我的“点”

javascript - 当我添加计时器功能时，它不会画出我的“点”

问题描述

所以我正在使用带有库 p5.js 的 javascript 在 HTML5 中制作一个简单的目标训练游戏。当计时器被注释掉并且计时器在其他代码中工作时，该代码工作，但是当我将时间放入此代码时它不起作用。

let x;
let y;
let circle;
let dots = [];
let score = 0;
let gameover = false;

function setup() {
    createCanvas(1080, 800);
    xycircle();
}

function draw() {
    if (gameover) {
        gameend();
    } else {
        background(100, 100, 255);
        scorer();
        for (let dot of dots) {
            ellipse(dot.x, dot.y, dot.circle, dot.circle)
        }
    }
};

function xycircle() {
    for (i = 0; i < 25; i += 1) {
        dots.push({
            x: random(1080),
            y: random(100, 800),
            circle: random(25, 50)
        })
    };

};

function mousePressed() {

    var hit = false;
    for (let dot of dots) {
        if (dist(dot.x, dot.y, mouseX, mouseY) < dot.circle / 2) {
            dots = dots.filter(dot1 => dot1 !== dot)
            hit = true;
            if (dots.length === 0) {
                xycircle();
            }
        }
    };

    if (hit)
        score++
    else
        gameover = true;
};

function scorer() {
    fill(20, 75, 200);
    rect(0, 0, 1080, 75);
    fill(0, 0, 0);
    text(score, 950, 50)
    text(timeremaning, 900, 50)
    fill(255, 255, 255);
};

//function timer() {
//   let time = Date.now();
//   let timeremaning = 60000
//   if (timeremaning > time) {
//       timeremaning--
//   }
//   if (timeremaning === 0)
//       gameend()
//};

function gameend() {
    background(255, 0, 0);
    fill(0, 0, 0);
    text("GAME OVER", 540, 400);
    text("Your score was " + score, 540, 420);
};

我想要的只是一个不会破坏我的代码的 1 或 2 分钟计时器。任何帮助表示赞赏。

标签： javascriptp5.js

解决方案

看来您的timer功能不太正确。我不确定您为什么要将timeremaning（顺便说一句拼写错误）的值与 进行比较now，这种方法对我来说没有意义。似乎您只想减少剩余时间，当您到达零时，触发gameend()并设置gameover为true. 没有设置gameover，结束状态不会正确触发。

注意：您可能需要调整计时器的起始值，因为这需要超过一分钟才能运行。

在不确切知道您要拍摄什么的情况下，以下更改似乎会在规定时间后结束。

希望这可以帮助。

let x;
let y;
let circle;
let dots = [];
let score = 0;
let gameover = false;
let timeremaning

function setup() {
    createCanvas(1080, 800);
    xycircle();
}

function draw() {
    if (gameover) {
        gameend();
    } else {
        background(100, 100, 255);
        scorer();
        for (let dot of dots) {
            ellipse(dot.x, dot.y, dot.circle, dot.circle)
        }
    }
};

function xycircle() {
    for (i = 0; i < 25; i += 1) {
        dots.push({
            x: random(1080),
            y: random(100, 800),
            circle: random(25, 50)
        })
    };

};

function mousePressed() {

    var hit = false;
    for (let dot of dots) {
        if (dist(dot.x, dot.y, mouseX, mouseY) < dot.circle / 2) {
            dots = dots.filter(dot1 => dot1 !== dot)
            hit = true;
            if (dots.length === 0) {
                xycircle();
            }
        }
    };

    if (hit)
        score++
    else
        gameover = true;
};

function scorer() {
    fill(20, 75, 200);
    rect(0, 0, 1080, 75);
    fill(0, 0, 0);
    text(score, 950, 50)
    text(timeremaning, 900, 50)
    fill(255, 255, 255);
};

function timer() {
  let time = Date.now();
   timeremaning = 60000
   setInterval(() => {
      timeremaning--
      if (timeremaning <= 0) { gameend(); gameover = true }
   }, 1)
};

function gameend() {
    background(255, 0, 0);
    fill(0, 0, 0);
    text("GAME OVER", 540, 400);
    text("Your score was " + score, 540, 420);
};
timer()
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>

推荐阅读