jeudi 23 mars 2023

P5.JS - How can I make an image array without repeating?

I made a falling game with images. When I click the x box button on the image, it generates another image. I can't figure out how I can make the images non-repeatable. So far, I have 6 png images, and they repeat when I play the game. I used for loop in the function preload. Please advise.

Here is my code.

//variables 
let x = 10;
let y = 200;
let iw = 300;
let ih = 200;
let score = 0;
let speed = 1.5;
let screen = 0;
let bw = 24;
let bh = 20;
let slider;
var timerValue = 60;

// let ads;
let ads = [];

function preload() {
  for (let i = 0; i < 6; i++) {
    // ads[i] = loadImage(`ads/ad${i}.png`);
    ads[i] = loadImage("ads/ad" + i + ".png");
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  for (let i = 0; i < 1; i++){
    img = random(ads);
  }
  button = createButton("X");
  button.size(bw,bh);
  button.mouseClicked(changeImage);
  x1 = random(windowWidth-410);
  
  slider = createSlider(0, 255, 100);
  slider.position(18, 40);
  slider.style('width', '80px');
  
  setInterval(timeIt, 1000);
}

//which screen to display
function draw() {
  let val = slider.value();
  background(val);
  
  if (screen === 0) {
    startScreen();
  }
  if (screen === 1) {
    startGame();
  }
  if (screen === 2) {
    endGame();
  }
}

//what happens when you tap on the canvas 
function mousePressed() {
  if (screen === 0) {
    screen = 1;
  }
  if (screen === 2) {
    screen = 0;
  }  
}


//what to display at the start
function startScreen() {
  background(69);
  fill(255);
  textAlign(CENTER);
  textSize(20);
  text("IMAGE FALLING GAME", width / 2, height / 2);
  text("Click To Start", width / 2, height / 2 + 30);

  restart();
}

//Function for the game
function startGame() {
  
  if (timerValue >= 10) {
    text("0:" + timerValue, width / 2, height / 2);
  }
  if (timerValue < 10) {
    text('0:0' + timerValue, width / 2, height / 2);
  }
  if (timerValue == 0) {
    text('game over', width / 2, height / 2 + 15);
  }
  
  //score text
  fill(255);
  noStroke();
  textSize(20);
  textStyle(NORMAL);
  text("Score: " + score, 60, 30);

//change the y value
  y += speed;
  image(img, x1, y-ih, iw, ih);
  // button.position(iw-bw,y);
  button.show();
  // button.position(x1+iw-bw,y-ih);
  button.position(x1+iw-bw,y-ih);  

  if (y > height) {
    screen = 2;
  }
}

//mouseCkicked event
function changeImage() {
    for (let i = 0; i < 1; i++){
      img = random(ads);
    }
  
    y = 0;
    score++;
    // speed += 0.5;
    speed += 0.1;
  
    let xpos = random(width);
    // let xpos = random(x);
    x1 = xpos;
    button.position(xpos, y);
}

function timeIt() {
  if (timerValue > 0) {
    timerValue--;
  }
}

//endgame screen 
function endGame() {
  background(255, 0, 0);
  noStroke();
  textAlign(CENTER);
  textSize(20);
  text("You Lost", width / 2, height / 2);
  text("Score :" + score, width / 2, height / 2 + 20);
  text("Click To Play Again", width / 2, height / 2 + 40);
  button.hide();
  timerValue = 60;
}

//restart function 
function restart() {
  y = 0;
  speed = 1.5;
  score = 0;
}

function reSet() {
  score = 0;
}



Aucun commentaire:

Enregistrer un commentaire