AI game creator

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

No:10947

125

←

Prev Next

→

Canon Events
Developer User4715｜Date and time 23/8/5 23:44:34
Build time 22.072 sec｜Game capacity 2.591KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Game Canon Events</title>
    <style>
      body {
        background-color: lightblue;
        font-family: Arial, sans-serif;
      }

#game-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

#target-canon {
        position: relative;
        width: 200px;
        height: 400px;
        background-image: url('canon.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }

#target-canon #target {
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <div id="target-canon">
        <div id="target"></div>
      </div>
    </div>

// Set initial position of the target
      let position = 100;

// Handle swipe event on the target element
      target.addEventListener('touchmove', (event) => {
        // Get the swipe distance
        const { clientY } = event.touches[0];
        const difference = position - clientY;

// Update the position of the target
        position = clientY;

// Move the target element vertically
        target.style.top = `${target.offsetTop - difference}px`;

// Prevent the default swipe behavior
        event.preventDefault();
      });

// Function to check if the target is in the canon
      function checkTargetPosition() {
        const canon = document.querySelector('#target-canon');
        const canonTop = canon.offsetTop;
        const canonBottom = canonTop + canon.offsetHeight;
        const targetTop = target.offsetTop;
        const targetBottom = targetTop + target.offsetHeight;

// Check if the target is within the canon's range
        if (targetTop >= canonTop && targetTop <= canonBottom && targetBottom <= canonBottom) {
          alert('Congratulations! You hit the target!');
          resetTargetPosition();
        }
      }

// Function to reset the target position
      function resetTargetPosition() {
        target.style.top = '100px';
        position = 100;
      }

// Listen for touchend event on the target element
      target.addEventListener('touchend', checkTargetPosition);
    </script>
  </body>
</html>