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

No:42121

←

Prev Next

→

Playing LEGO
Developer User18785｜Date and time 24/2/10 19:36:26
Build time 11.264 sec｜Game capacity 3.614KB｜

Script

เกม LEGO

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>LEGO Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    
    #game-container {
      margin: auto;
      height: 400px;
      width: 400px;
      border: 2px solid #ccc;
      position: relative;
    }
    
    .brick {
      position: absolute;
      height: 50px;
      width: 50px;
      background-color: #ffab40;
    }

.character {
      position: absolute;
      height: 50px;
      width: 50px;
      background-image: url('character.png');
      background-size: cover;
    }
  </style>
</head>
<body>
  <h1>เกม LEGO</h1>
  <div id="game-container">
    <div id="brick-1" class="brick" style="top: 100px; left: 100px;"></div>
    <div id="brick-2" class="brick" style="top: 100px; left: 180px;"></div>
    <div id="brick-3" class="brick" style="top: 100px; left: 260px;"></div>
    <div id="brick-4" class="brick" style="top: 180px; left: 100px;"></div>
    <div id="brick-5" class="brick" style="top: 180px; left: 180px;"></div>
    <div id="brick-6" class="brick" style="top: 180px; left: 260px;"></div>
    <div id="brick-7" class="brick" style="top: 260px; left: 100px;"></div>
    <div id="brick-8" class="brick" style="top: 260px; left: 180px;"></div>
    <div id="brick-9" class="brick" style="top: 260px; left: 260px;"></div>
    <div id="character"></div>
  </div>

// Add event listener to handle key presses on smartphone
    document.addEventListener('keydown', function(event) {
      var keyName = event.key;
      moveCharacter(keyName);
    });

function moveCharacter(direction) {
      var character = document.getElementById('character');
      var newPosition = {
        top: characterPosition.top,
        left: characterPosition.left,
      };

switch (direction) {
        case 'ArrowUp':
          newPosition.top -= 50;
          break;
        case 'ArrowDown':
          newPosition.top += 50;
          break;
        case 'ArrowLeft':
          newPosition.left -= 50;
          break;
        case 'ArrowRight':
          newPosition.left += 50;
          break;
      }

if (isValidMove(newPosition)) {
        character.style.top = newPosition.top + 'px';
        character.style.left = newPosition.left + 'px';
        characterPosition = newPosition;
      }
    }

function isValidMove(position) {
      var character = document.getElementById('character');
      var gameContainer = document.getElementById('game-container');
      var bricks = document.getElementsByClassName('brick');

var characterRect = character.getBoundingClientRect();
      var gameContainerRect = gameContainer.getBoundingClientRect();

if (
        position.top < gameContainerRect.top ||
        position.left < gameContainerRect.left ||
        position.top + characterRect.height > gameContainerRect.top + gameContainerRect.height ||
        position.left + characterRect.width > gameContainerRect.left + gameContainerRect.width
      ) {
        return false;
      }

for (var i = 0; i < bricks.length; i++) {
        var brickRect = bricks[i].getBoundingClientRect();

if (
          position.top >= brickRect.top - characterRect.height &&
          position.top <= brickRect.bottom &&
          position.left >= brickRect.left - characterRect.width &&
          position.left <= brickRect.right
        ) {
          return false;
        }
      }

return true;
    }
  </script>
</body>
</html>