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

No:16920

A game where you got to Drag the Guy that's on you..ALL
Developer User7456｜Date and time 23/9/21 21:24:35
Build time 37.259 sec｜Game capacity 3.45KB｜

Script

Sure! Here's a simple game where you can drag a character to make him hit different objects. The character in the game is Venom, and you can drag him around to make him hit objects with his head. The game is designed for smartphone operation and uses pictograms for a more visual experience. The game starts automatically when you open the HTML file.

Drag Venom's Head

This code sets up a simple game where you can drag the Venom character around the screen. There are three blue objects on the screen, and if Venom's head collides with any of them, the object turns red. The game uses JavaScript to handle dragging, collision detection, and updating the object colors. It is contained within the script tags and enclosed in a single HTML file. The pictogram for Venom is specified using an image tag with the src attribute. You can replace "emozi_all/game.png" with the actual pictogram image file to see Venom in the game.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Drag Venom's Head</title>
  <style>
    #venom {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: move;
    }
    
    .object {
      width: 50px;
      height: 50px;
      position: absolute;
      background-color: blue;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <h1>Drag Venom's Head</h1>

function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        document.onmousemove = elementDrag;
      }

function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
      }

function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }

// Get the Venom element by id
    var venom = document.get.ElementById("venom");
    
    // Make Venom draggable
    dragElement(venom);

// Collision detection on every movement
    venom.addEventListener("mousemove", function() {
      var venomRect = venom.getBoundingClientRect();
      var objects = document.getElementsByClassName("object");
      for (var i = 0; i < objects.length; i++) {
        var objectRect = objects[i].getBoundingClientRect();
        if (isColliding(venomRect, objectRect)) {
          objects[i].style.backgroundColor = "red";
        } else {
          objects[i].style.backgroundColor = "blue";
        }
      }
    });

// Function to check collision between Venom and an object
    function isColliding(rect1, rect2) {
      return (
        rect1.left < rect2.right &&
        rect1.right > rect2.left &&
        rect1.top < rect2.bottom &&
        rect1.bottom > rect2.top
      );
    }
  </script>
</body>
</html>
```

This code sets up a simple game where you can drag the Venom character around the screen. There are three blue objects on the screen, and if Venom's head collides with any of them, the object turns red. The game uses JavaScript to handle dragging, collision detection, and updating the object colors. It is contained within the script tags and enclosed in a single HTML file. The pictogram for Venom is specified using an image tag with the src attribute. You can replace "venom.png" with the actual pictogram image file to see Venom in the game.