AI game creator

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

No:8948

173

←

Prev Next

→

shooting
Developer User4271｜Date and time 23/7/19 21:17:14
Build time 42.548 sec｜Game capacity 4.409KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>どうやってもバーコードができるゲーム</title>
<style>
  #game-board {
    width: 300px;
    height: 400px;
    border: 1px solid black;
    background-color: lightgray;
  }
  #player {
    position: absolute;
    left: 140px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
  }
  .bullet {
    position: absolute;
    width: 2px;
    height: 10px;
    background-color: black;
  }
  .enemy {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 5px;
    background-color: green;
  }
</style>
</head>
<body>
<div id="game-board">
  <div id="player"></div>
</div>

// Bullets
  var bullets = [];

// Enemies
  var enemies = [];

// Game loop
  setInterval(function() {
    drawPlayer();
    drawBullets();
    drawEnemies();
    moveBullets();
    moveEnemies();
    checkCollision();
  }, 30);

// Player movements
  function movePlayer(direction) {
    if (direction === "left" && playerPosition.x > 0) {
      playerPosition.x -= 5;
    } else if (direction === "right" && playerPosition.x < 280) {
      playerPosition.x += 5;
    }
  }

// Shoot bullets
  function shoot() {
    var bullet = document.createElement("div");
    bullet.classList.add("bullet");
    bullet.style.left = (playerPosition.x + 8) + "px";
    bullet.style.bottom = "30px";
    bullets.push({ element: bullet, x: playerPosition.x + 8, y: 30 });
    document.getElementById("game-board").appendChild(bullet);
  }

// Move bullets
  function moveBullets() {
    for (var i = 0; i < bullets.length; i++) {
      var bullet = bullets[i];
      bullet.y += 10;
      bullet.element.style.bottom = bullet.y + "px";
      if (bullet.y > 400) {
        bullets.splice(i, 1);
        bullet.element.remove();
      }
    }
  }

// Draw player
  function drawPlayer() {
    player.style.left = playerPosition.x + "px";
  }

// Create enemies randomly
  function createEnemy() {
    var enemy = document.createElement("div");
    enemy.classList.add("enemy");
    enemy.style.left = getRandomPosition(0, 280) + "px";
    enemy.style.top = "0px";
    enemies.push({ element: enemy, x: parseInt(enemy.style.left), y: 0 });
    document.getElementById("game-board").appendChild(enemy);
  }

// Move enemies
  function moveEnemies() {
    for (var i = 0; i < enemies.length; i++) {
      var enemy = enemies[i];
      enemy.y += 3;
      enemy.element.style.top = enemy.y + "px";
      if (enemy.y > 400) {
        enemies.splice(i, 1);
        enemy.element.remove();
      }
    }
  }

// Draw enemies
  function drawEnemies() {
    var gameBoard = document.getElementById("game-board");
    while (gameBoard.firstChild) {
      gameBoard.removeChild(gameBoard.firstChild);
    }
    gameBoard.appendChild(player);
    for (var i = 0; i < bullets.length; i++) {
      gameBoard.appendChild(bullets[i].element);
    }
    for (var j = 0; j < enemies.length; j++) {
      gameBoard.appendChild(enemies[j].element);
    }
  }

// Check collision between bullets and enemies
  function checkCollision() {
    for (var i = 0; i < bullets.length; i++) {
      for (var j = 0; j < enemies.length; j++) {
        if (isColliding(bullets[i].x, bullets[i].y, enemies[j].x, enemies[j].y)) {
          bullets[i].element.remove();
          bullets.splice(i, 1);
          enemies[j].element.remove();
          enemies.splice(j, 1);
        }
      }
    }
  }

// Util functions
  function getRandomPosition(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

function isColliding(x1, y1, x2, y2) {
    return Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2) < 12;
  }

// Keyboard event listeners
  window.addEventListener("keydown", function(event) {
    if (event.key === "ArrowLeft") {
      movePlayer("left");
    } else if (event.key === "ArrowRight") {
      movePlayer("right");
    } else if (event.key === " ") {
      shoot();
    }
  });

// Enemy creation loop
  setInterval(function() {
    createEnemy();
  }, 1000);
</script>
</body>
</html>