Etta: Mushrooms

by whelkaholism

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Move the Duck</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }

      #gameArea {
        position: relative;
        width: 100vw;
        height: 110vh;
        background-color: #87ceeb; /* Light sky blue */
      }

      #duck {
        position: absolute;
        width: 100px;
        height: 115px;
        background-image: url('https://cfront.co.uk/images/mushroomai.png');
        background-size: cover;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: transform 0.1s ease;
      }

      .flip {
        /*transform: scaleX(-1) !important; *//* Flip the duck horizontally */
      }
    </style>
  </head>
  <body>
    <div id="gameArea">
      <div id="duck"></div>
    </div>

    <script>
      const duck = document.getElementById("duck")
      let positionX = window.innerWidth / 2 - 50 // Initial X position (centered)
      let positionY = window.innerHeight / 2 - 50 // Initial Y position (centered)
      const speed = 10 // Movement speed
      let facingRight = true // Tracks duck's facing direction

      document.addEventListener("keydown", (event) => {
        switch (event.key) {
          case "ArrowUp":
            positionY = Math.max(0, positionY - speed)
            break
          case "ArrowDown":
            positionY = Math.min(window.innerHeight - 100, positionY + speed)
            break
          case "ArrowLeft":
            positionX = Math.max(0, positionX - speed)
            if (facingRight) {
              duck.classList.add("flip")
              facingRight = false
            }
            break
          case "ArrowRight":
            positionX = Math.min(window.innerWidth - 100, positionX + speed)
            if (!facingRight) {
              duck.classList.remove("flip")
             ...