Make your game! description: there are still 25 blocks and 12 objects, and a nice cartesian plane to create, contains a button to test the game.'s game

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

No:21860

←

Prev Next

→

Make your game! description: there are still 25 bl..ALL
Developer User10038｜Date and time 23/10/18 22:04:46
Build time 74.371 sec｜Game capacity 2.915KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Jogo dos Blocos</title>
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }
  
  #game-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #cartesian-plane {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
  }
  
  .block {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #555;
  }
  
  .object {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #ff6384;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
  }
  
  #start-game {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
</style>
</head>
<body>
  <div id="game-container">
    <div id="cartesian-plane"></div>
  </div>
  
  <div id="start-game">
    <button onclick="startGame()">Iniciar Jogo</button>
  </div>
  
  <script>
    function startGame() {
      var blocks = 25;
      var objects = 12;
      
      createCartesianPlane();
      createBlocks(blocks);
      createObjects(objects);
    }
    
    function createCartesianPlane() {
      var plane = document.getElementById("cartesian-plane");
      
      for (var i = 0; i <= 10; i++) {
        var row = document.createElement("div");
        row.style.width = "100%";
        row.style.height = "10%";
        row.style.borderBottom = "1px solid #ccc";
        plane.appendChild(row);
        
        for (var j = 0; j <= 10; j++) {
          var column = document.createElement("div");
          column.style.width = "10%";
          column.style.height = "100%";
          column.style.borderRight = "1px solid #ccc";
          row.appendChild(column);
        }
      }
    }
    
    function createBlocks(numBlocks) {
      var plane = document.getElementById("cartesian-plane");
      
      for (var i = 0; i < numBlocks; i++) {
        var block = document.createElement("div");
        block.className = "block";
        block.style.top = getRandomCoordinate() + "px";
        block.style.left = getRandomCoordinate() + "px";
        plane.appendChild(block);
      }
    }
    
    function createObjects(numObjects) {
      var plane = document.getElementById("cartesian-plane");
      
      for (var i = 0; i < numObjects; i++) {
        var object = document.createElement("div");
        object.className = "object";
        object.style.top = getRandomCoordinate() + "px";
        object.style.left = getRandomCoordinate() + "px";
        object.innerText = i + 1;
        plane.appendChild(object);
      }
    }
    
    function getRandomCoordinate() {
      return Math.floor(Math.random() * 380) + 10;
    }
  </script>
</body>
</html>