Wizard footballers that use their magic to defeat the defenders so they can attempt to score a goal's game

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

No:12771

102

←

Prev Next

→

Wizard footballers that use their magic to defeat ..ALL
Developer User5529｜Date and time 23/8/23 0:02:10
Build time 23.995 sec｜Game capacity 3.77KB｜

Script

Sure! Here's a simple game that fits your requirements:

Score: 0

In this game, the player controls a wizard (represented by the pictogram) who uses their magic to move the ball towards the goal. The defenders (also represented by pictograms) try to stop the wizard from scoring a goal. The player's objective is to score as many goals as possible by successfully moving the ball past the defenders. To play the game on a smartphone, the player can touch and hold on the wizard pictogram to initiate ball movement towards the tapped position. The ball will then move gradually towards the touched position. If the ball reaches the goal position (represented by the coordinates of the touch), the player scores a goal and the score increases by one. Please note that you will need to provide actual pictogram images (`emozi_all/pictogram.png` and `emozi_chicken.png`) and adjust the image paths accordingly in the CSS code.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game that fits your requirements:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #pitch {
      width: 300px;
      height: 500px;
      border: 2px solid black;
      position: relative;
    }
    #ball {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      top: 0;
    }
    .defender {
      width: 50px;
      height: 50px;
      background-image: url('defender.png');
      background-size: cover;
      position: absolute;
    }
    .wizard {
      width: 50px;
      height: 50px;
      background-image: url('wizard.png');
      background-size: cover;
      position: absolute;
    }
    #score {
      text-align: center;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div id="pitch">
    <div id="ball"></div>
    <div class="defender" style="top: 200px; left: 125px;"></div>
    <div class="defender" style="top: 300px; left: 75px;"></div>
    <div class="defender" style="top: 400px; left: 125px;"></div>
    <div class="wizard" style="top: 450px; left: 125px;"></div>
  </div>
  <div id="score">Score: <span id="scoreValue">0</span></div>

// Set initial values
    let score = 0;
    let isMoving = false;

// Function to handle ball movement
    function moveBall(event) {
      if (!isMoving) {
        isMoving = true;
        const startX = ball.offsetLeft + ball.offsetWidth / 2;
        const startY = ball.offsetTop + ball.offsetHeight / 2;

const distanceX = event.touches[0].clientX - startX;
        const distanceY = event.touches[0].clientY - startY;

const incrementX = distanceX / 100;
        const incrementY = distanceY / 100;
        let currentX = startX;
        let currentY = startY;

// Event listener for touch start
    wizard.addEventListener('touchstart', moveBall);
  </script>
</body>
</html>
```

To play the game on a smartphone, the player can touch and hold on the wizard pictogram to initiate ball movement towards the tapped position. The ball will then move gradually towards the touched position. If the ball reaches the goal position (represented by the coordinates of the touch), the player scores a goal and the score increases by one.

Please note that you will need to provide actual pictogram images (`defender.png` and `wizard.png`) and adjust the image paths accordingly in the CSS code.