p5.js Web Editor | Marble school copy krack

xxxxxxxxxx
let scaleFactor = 0.5;
let backgroundImage;
let treeScreenBackground;
let gameState = 'start'; // Initial state is 'start'
let christmasTree;
let draggableObjects = [];
let ornamentImages = [];
let snowflakes = [];
let presents = [];
let presentImgs = [];
​
// Add variables to store the positions relative to the tree
let positionsRelativeToTree = [];
​
function preload() {
  // Loading all the required images
  buttonpng = loadImage('present.png');
  backgroundImage = loadImage('bg3.png');
  treeScreenBackground = loadImage('treescreen.png');
  christmasTree = loadImage('christmas_tree.png');
  
  // Three types of ornaments in an array
  ornamentImages = [
    loadImage('ornament.png'),
    loadImage('bell.png'),
    loadImage('sock.png')
  ];
  spriteSheet = loadImage('spr.png');
  
  // Loading presents for the game screen
  for (let i = 0; i < 5; i++) {
    presentImgs[i] = loadImage('present.png');
  }
​
  // Load positions relative to the tree from local storage
  let savedPositions = JSON.parse(localStorage.getItem('positionsRelativeToTree'));
  if (savedPositions) {
    positionsRelativeToTree = savedPositions;
  }
}
​
function setup() {
  createCanvas(800, 500);
  // Resizing
  backgroundImage.resize(width, height);
  christmasTree.resize(christmasTree.width * scaleFactor, christmasTree.height * scaleFactor);
​
  // Buttons
  backButton = new Button(buttonpng, width - 120, height/3 - 150, 100, 50, 'Back to Experience');
  endButton = new Button(buttonpng, width - 120, height/3 - 150, 100, 50, 'End Experience');
  gameButton = new Button(buttonpng, width - 120, height/3 - 90, 100, 50, 'game');
​
  // Snowfall
  for (let i = 0; i < 200; i++) {
    snowflakes.push(new Snowflake());
  }
}
​
function draw() {
  // Check the current game state and execute the corresponding function
  if (gameState === 'start') {
    background(backgroundImage);
    drawStartScreen();
  } 
  else if (gameState === 'end') {
    background(backgroundImage);
    drawEndScreen();
  } 
  else if (gameState === 'experience') {
    background(backgroundImage);
    drawExperienceScreen();
  } 
  else if (gameState === 'house') {
  }
  else if (gameState === 'tree') {
    // Background to the tree screen background
    background(treeScreenBackground);
    drawTreeScreen();
  } 
  else if (gameState === 'game') 
  {
    background(backgroundImage);
    for (let present of presents) 
    {
      present.display();
    }
    backButton.show();
  }
}
​
function drawStartScreen() 
{
  fill(255);
  textSize(32);
  text('Start Screen', width / 2 - 80, height / 2);
}
​
function drawEndScreen() 
{
  fill(255);
  textSize(32);
  text('Thank you!', width / 2 - 50, height / 2);
}
​
function drawExperienceScreen() 
{
  // Snowflakes behind tree
  for (let snowflake of snowflakes) 
  {
    snowflake.update();
    snowflake.display();
  }
  
  fill(255);
  textSize(32);
  text('Experience Screen', width / 2 - 50, height / 2);
  drawChristmasTree();
  for (let draggableObject of draggableObjects) 
  {
    draggableObject.show();
  }
  
  // Buttons for this screen
  gameButton.show();
  endButton.show();
}
​
function drawTreeScreen() {
  // Snowflakes
  for (let snowflake of snowflakes) 
  {
    snowflake.update();
    snowflake.display();
  }
  // Center the Christmas tree
  let treeX = (width - christmasTree.width) / 2;
  let treeY = (height - christmasTree.height) / 2;
  image(christmasTree, treeX, treeY);
}
​
// Only drawing the tree
function drawChristmasTree() 
{
  let x = width - christmasTree.width;
  let y = height - christmasTree.height;
  image(christmasTree, x, y);
}
​
function mousePressed() {
  if (gameState === 'start') 
  {
    gameState = 'experience';
  } 
  else if (gameState === 'experience') 
  {
    // Check if the mouse click is over the Christmas tree
    let x = width - christmasTree.width;
    let y = height - christmasTree.height;
    if (mouseX >= x && mouseX <= x + christmasTree.width && mouseY >= y && mouseY <= y + christmasTree.height) {
      gameState = 'tree';
    }
    
    // Buttons
    if (endButton.clicked()) {
      gameState = 'end';
    }
    if (gameButton.clicked()) {
      gameState = 'game';
    }
  } 
  
  else if (gameState === 'tree') 
  {
    // Check if the mouse click is over any of the draggable objects
    for (let draggableObject of draggableObjects) {
      draggableObject.pressed();
    }
    
    if (backButton.clicked()) {
      gameState = 'experience';
    }
  } 
  
  else if (gameState === 'game') 
  {
    for (let present of presents) {
      if (!present.found && mouseX >= present.x && mouseY >= present.y && mouseX <= present.x + present.img.width && mouseY <= present.y + present.img.height) {
        present.found = true; // Mark the present as found
      }
    }
    if (backButton.clicked()) {
      gameState = 'experience';
    }
  }
  
  else if (gameState === 'end') 
  {
    gameState = 'start';
  }
}
​
function mouseReleased() {
  // Release the draggable objects when the mouse button is released
  for (let draggableObject of draggableObjects) {
    draggableObject.released();
  }
}
​
class Button {
  constructor(img, x, y, w, h, label) {
    this.img = img; // Assign the image to the this.img property
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.label = label;
  }
​
  show() {
    fill(255);
    image(this.img, this.x, this.y, this.w, this.h);
    fill(0);
    textSize(10);
    textAlign(CENTER, CENTER);
    text(this.label, this.x + this.w / 2, this.y + this.h / 2);
  }
​
  clicked() {
    return mouseX >= this.x && mouseX <= this.x + this.w && mouseY >= this.y && mouseY <= this.y + this.h;
  }
}
​
class Draggable {
  constructor(x, y, image) {
    this.dragging = false; // Is the object being dragged?
    this.rollover = false; // Is the mouse over the object?
    this.x = x;
    this.y = y;
    this.image = image;
    this.w = 30;
    this.h = 30;
    this.treeX = (width - christmasTree.width) / 2;
    this.treeY = (height - christmasTree.height) / 2;
  }
​
  over() {
    // Mouse over the object?
    if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {
      this.rollover = true;
    } else {
      this.rollover = false;
    }
  }
​
  update() {
    // Adjust location if being dragged
    if (this.dragging) {
      this.x = mouseX + this.offsetX;
      this.y = mouseY + this.offsetY;
    }
  }
​
  show() {
    // Display the ornament image
    if (this.dragging) {
      tint(255, 100); // Reduce opacity when dragging
    } else if (this.rollover) {
      tint(255, 200); // Highlight when the mouse is over it
    } else {
      noTint(); // Reset tint
    }
    image(this.image, this.x, this.y, this.w, this.h);
  }
​
  pressed() {
    // Did I click on the object?
    if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {
      this.dragging = true;
      // If so, keep track of the relative location of the click to the corner of the object
      this.offsetX = this.x - mouseX;
      this.offsetY = this.y - mouseY;
    }
  }
​
  released() {
    // Quit dragging
    this.dragging = false;
    
    // Check if the object is within the tree's boundaries
    if (
      this.x >= this.treeX &&
      this.x <= this.treeX + christmasTree.width &&
      this.y >= this.treeY &&
      this.y <= this.treeY + christmasTree.height
    ) {
      // Calculate and save the relative position to the tree
      this.savePositionRelativeToTree();
    }
  }
  
  savePositionRelativeToTree() {
    this.relativeToTreeX = this.x - this.treeX;
    this.relativeToTreeY = this.y - this.treeY;
    positionsRelativeToTree.push({ x: this.relativeToTreeX, y: this.relativeToTreeY });
    localStorage.setItem('positionsRelativeToTree', JSON.stringify(positionsRelativeToTree));
  }
}
​
Cookies

Sketch Files

Console

Preview
