Question

这是我正在制作的捕手游戏的JavaScript。给出了一些代码，这就是为什么我完全不理解如何做某些事情的原因。现在，我有不同的坠落物体，基本上是红色长方形，高度和宽度各不相同。我想要做的就是让坠落的物体在红色和蓝色之间随机化（蓝色显示较少），但我非常困惑如何这样做。我尝试制作它，以便添加到game.fillstyle的颜色先于随机，但这似乎不起作用。非常感谢任何帮助或建议 - 不一定是答案。我只想解决这个问题。

另外，如果我要把所有代码都放进去，请告诉我。

这是JSfiddle：https://jsfiddle.net/ianlizzo/4dLr48v0/7/#&togetherjs=irGLk3uxOE

(() => {

let canvas = document.getElementById("game");
let game = canvas.getContext("2d");
let lastTimestamp = 0;

const FRAME_RATE = 60;
const FRAME_DURATION = 1000 / FRAME_RATE;


let fallers = [];
let score = 0;


let colourValues = ["red", "blue"]
colourValues = {
  red: "#ff0000",
  blue: "#0000ff"
};

let colour = colourValues[Math.floor(Math.random()*colourValues.length)];

//ignore 
//let scoreCount = document.getElementById("scoreCount”);

let showScore = function(){
    scoreCount.innerHTML = "Your score is " + score;
};


let addScore = function(pointValue){
    score += pointValue;
    showScore();
};

let fallerIn = function(inside){
    inside.captured = true;
    addScore(inside.pointValue);
};

const DEFAULT_DESCENT = 0.0001; // This is per millisecond.
let Faller = function (x, y, width, height, dx = 0, dy = 0, ax = 0, ay = DEFAULT_DESCENT) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;

    this.captured = false;
    this.pointValue = 5;
    this.colour;

    // Velocity.
    this.dx = dx;
    this.dy = dy;

    // Acceleration.
    this.ax = ax;
    this.ay = ay;
};

Faller.prototype.draw = function () {
    game.fillStyle = colour;
    game.fillRect(this.x, this.y, this.width, this.height);
};

Faller.prototype.move = function (millisecondsElapsed) {
    this.x += this.dx * millisecondsElapsed;
    this.y += this.dy * millisecondsElapsed;

    this.dx += this.ax * millisecondsElapsed;
    this.dy += this.ay * millisecondsElapsed;
};


const DEFAULT_PLAYER_WIDTH = 65;
const DEFAULT_PLAYER_HEIGHT = 45;
const DEFAULT_PLAYER_Y = canvas.height - DEFAULT_PLAYER_HEIGHT;
let Player = function (x, y = DEFAULT_PLAYER_Y, width = DEFAULT_PLAYER_WIDTH, height = DEFAULT_PLAYER_HEIGHT) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
};

Player.prototype.draw = function () {
    let grd = game.createLinearGradient(0, 200, 200, 0);
    grd.addColorStop(0, "black");
    grd.addColorStop(0.5, "red");
    grd.addColorStop(1, "white");
    game.fillStyle = grd;
    game.fillRect(this.x, this.y, this.width, this.height);
    game.fill();
};

let player = new Player(canvas.width / 2);

let draw = (millisecondsElapsed) => {
    game.clearRect(0, 0, canvas.width, canvas.height);

    fallers.forEach((faller) => {
        faller.draw();
        faller.move(millisecondsElapsed);
        if (!(faller.captured)&&
          faller.y + faller.height > canvas.height &&
            faller.x + faller.width < player.x + player.width &&
            faller.x > player.x){
            fallerIn(faller);
            }
    });

    player.draw();

    fallers = fallers.filter((faller) => {
        return faller.y < canvas.height;
    });

};

const MIN_WIDTH = 10;
const WIDTH_RANGE = 20;
const MIN_HEIGHT = 10;
const HEIGHT_RANGE = 20;
const MILLISECONDS_BETWEEN_FALLERS = 750;

let fallerGenerator;
let startFallerGenerator = () => {
    fallerGenerator = setInterval(() => {

        let fallerWidth = Math.floor(Math.random() * WIDTH_RANGE) + MIN_WIDTH;
        fallers.push(new Faller(
            Math.floor(Math.random() * (canvas.width - fallerWidth)), 0,
            fallerWidth, Math.floor(Math.random() * HEIGHT_RANGE) + MIN_HEIGHT
        ));
    }, MILLISECONDS_BETWEEN_FALLERS);
};

let stopFallerGenerator = () => clearInterval(fallerGenerator);

let setPlayerPositionBasedOnMouse = (event) => {
    player.x = event.clientX / document.body.clientWidth * canvas.width;
};

document.body.addEventListener("mouseenter", setPlayerPositionBasedOnMouse);
document.body.addEventListener("mousemove", setPlayerPositionBasedOnMouse);

let running = false;
let nextFrame = (timestamp) => {
    if (!lastTimestamp) {
        lastTimestamp = timestamp;
    }

    if (timestamp - lastTimestamp < FRAME_DURATION) {
        if (running) {
            window.requestAnimationFrame(nextFrame);
        }

        return;
    }

    draw(timestamp - lastTimestamp);

    lastTimestamp = timestamp;
    if (running) {
        window.requestAnimationFrame(nextFrame);
    }
};

document.getElementById("start-button").addEventListener("click", () => {
    running = true;
    lastTimestamp = 0;
    startFallerGenerator();
    window.requestAnimationFrame(nextFrame);
});

document.getElementById("stop-button").addEventListener("click", () => {
    stopFallerGenerator();
    running = false;
});
})();

Answer 1

let colourValues = ["red", "blue", "red", "red"];

game.fillStyle = colourValues[Math.floor(Math.random()*colourValues.length)];

plnkr http://plnkr.co/edit/uY5hm8Pkaoklfr6Tikrd?p=preview

Answer 2

let colourValues = ["red", "blue"]
/* colourValues.length will be undefined for object.
  colourValues = {
  red: "#ff0000",
  blue: "#0000ff"
};*/
let colour = colourValues[Math.floor(Math.random()*colourValues.length)];

请参阅this fiddle

随机颜色生成器应生成75％的红色。

  Faller.prototype.randomColour = function() { 
    return colourValues[Math.floor(Math.random() * colourValues.length * 0.75)]; 
  };

Faller应该使用自己的颜色填充

  Faller.prototype.draw = function() {
    game.fillStyle = this.colour;
    game.fillRect(this.x, this.y, this.width, this.height);
  };

在Faller构造函数中分配。

this.colour = this.randomColour();

我无法弄清楚如何在jsFiddle中设置ES6。所以它在ES5中完成

添加不同颜色的落物

2 个答案: