Elevator Panel 2 floors's game

Click here for free DL of the app version that can save data.

No:13978

236

←

Prev Next

→

Elevator Panel 2 floors
Developer User6030｜Date and time 23/8/30 20:03:14
Build time 16.893 sec｜Game capacity 2.127KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="200" height="400" style="border:1px solid #000000;"></canvas>

// Define the floor variables and initial floor
    var floors = ["1", "2"];
    var currentFloor = 1;

// Define the pictogram coordinates
    var pictogramCoords = {
      "1": { x: 50, y: 150 },
      "2": { x: 50, y: 250 },
    };

// Function to draw the elevator panel
    function drawPanel() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the floor buttons
      floors.forEach(function(floor) {
        ctx.beginPath();
        ctx.arc(pictogramCoords[floor].x, pictogramCoords[floor].y, 20, 0, 2 * Math.PI);
        ctx.fillStyle = currentFloor === parseInt(floor) ? "green" : "red";
        ctx.fill();
        ctx.fillStyle = "white";
        ctx.font = "bold 16px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(floor, pictogramCoords[floor].x, pictogramCoords[floor].y);
        ctx.closePath();
      });
    }

// Function to handle button clicks
    function buttonClick(event) {
      // Get the click coordinates
      var rect = canvas.getBoundingClientRect();
      var clickX = event.clientX - rect.left;
      var clickY = event.clientY - rect.top;

// Check if any floor button was clicked
      floors.forEach(function(floor) {
        if (
          clickX >= pictogramCoords[floor].x - 20 &&
          clickX <= pictogramCoords[floor].x + 20 &&
          clickY >= pictogramCoords[floor].y - 20 &&
          clickY <= pictogramCoords[floor].y + 20
        ) {
          currentFloor = parseInt(floor);
        }
      });

// Redraw the elevator panel based on the current floor
      drawPanel();
    }

// Register the button click event listener
    canvas.addEventListener("click", buttonClick);

// Initial draw of the elevator panel
    drawPanel();
  </script>
</body>
</html>