AI game creator

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

No:2080

1580

←

Prev Next

→

duel
Developer User3025｜Date and time 23/6/20 1:43:00
Build time 75.433 sec｜Game capacity 5.839KB｜

Script

デュエルは、プレイヤーが操作する四角形が敵から発射される弾丸を回避しつつ、敵を撃破するゲームです。プレイヤーは左右に移動し、スペースキーを押すことで弾を発射することができます。敵はランダムに生成され、一定時間ごとに弾丸を発射します。プレイヤーの弾丸が敵に当たると、新しい敵が生成されます。敵の弾丸がプレイヤーに当たるとゲームオーバーになります。リセットボタンを押すことで、ゲームをリセットすることができます。

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
<title>デュエル</title>
<style>
body {
  background-color: #383838;
  color: white;
  text-align: center;
  font-family: "Arial", sans-serif;
}
canvas {
  width: 100%;
  height: 100%;
}
button {
  margin-top: 20px;
  background-color: white;
  color: #383838;
  border-radius: 5px;
  padding: 10px;
  font-size: 20px;
  border: none;
  outline: none;
  cursor: pointer;
}
</style>
<script>
// プレイヤー
var player = {
  x: 0,
  y: 0,
  size: 40,
  color: "#f44336",
  bulletSpeed: 10,
  bullets: [],
  shoot: function() {
    var bullet = {
      x: this.x + this.size / 2,
      y: this.y - this.size / 2,
      size: 10,
      speed: this.bulletSpeed,
      color: "white"
    };
    this.bullets.push(bullet);
  }
};

// 敵
var enemy = {
  x: 0,
  y: 0,
  size: 40,
  color: "#2196f3",
  bulletSpeed: 5,
  bullets: [],
  shoot: function() {
    var bullet = {
      x: this.x + this.size / 2,
      y: this.y + this.size / 2,
      size: 10,
      speed: this.bulletSpeed,
      color: "white"
    };
    this.bullets.push(bullet);
  }
};

// 弾丸
function Bullet(x, y, size, speed, color) {
  this.x = x;
  this.y = y;
  this.size = size;
  this.speed = speed;
  this.color = color;
}

// 描画
function drawPlayer(ctx) {
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.size, player.size);

for (var i = 0; i < player.bullets.length; i++) {
    var bullet = player.bullets[i];
    ctx.fillStyle = bullet.color;
    ctx.fillRect(bullet.x, bullet.y, bullet.size, bullet.size);
  }
}

function drawEnemy(ctx) {
  ctx.fillStyle = enemy.color;
  ctx.fillRect(enemy.x, enemy.y, enemy.size, enemy.size);

for (var i = 0; i < enemy.bullets.length; i++) {
    var bullet = enemy.bullets[i];
    ctx.fillStyle = bullet.color;
    ctx.fillRect(bullet.x, bullet.y, bullet.size, bullet.size);
  }
}

// 更新
function updatePlayer() {
  // 弾丸
  for (var i = player.bullets.length - 1; i >= 0; i--) {
    var bullet = player.bullets[i];
    bullet.y -= bullet.speed;

if (bullet.y < 0) {
      player.bullets.splice(i, 1);
    }
  }
}

function updateEnemy() {
  // 弾丸
  for (var i = enemy.bullets.length - 1; i >= 0; i--) {
    var bullet = enemy.bullets[i];
    bullet.y += bullet.speed;

if (bullet.y > canvas.height) {
      enemy.bullets.splice(i, 1);
    }
  }
}

// 当たり判定
function checkCollision() {
  // プレイヤーの弾丸と敵
  for (var i = player.bullets.length - 1; i >= 0; i--) {
    var bullet = player.bullets[i];
    if (
      bullet.x < enemy.x + enemy.size &&
      bullet.x + bullet.size > enemy.x &&
      bullet.y < enemy.y + enemy.size &&
      bullet.y + bullet.size > enemy.y
    ) {
      player.bullets.splice(i, 1);
      enemy = getRandomEnemy();
    }
  }

// 敵の弾丸とプレイヤー
  for (var i = enemy.bullets.length - 1; i >= 0; i--) {
    var bullet = enemy.bullets[i];
    if (
      bullet.x < player.x + player.size &&
      bullet.x + bullet.size > player.x &&
      bullet.y < player.y + player.size &&
      bullet.y + bullet.size > player.y
    ) {
      enemy.bullets.splice(i, 1);
      alert("ゲームオーバー");
      resetGame();
    }
  }
}

// ランダムな敵を生成
function getRandomEnemy() {
  var newEnemy = {
    x: Math.floor(Math.random() * (canvas.width - 40)),
    y: Math.floor(Math.random() * (canvas.height / 2 - 40)),
    size: 40,
    color: "#2196f3",
    bulletSpeed: 5,
    bullets: [],
    shoot: function() {
      var bullet = {
        x: this.x + this.size / 2,
        y: this.y + this.size / 2,
        size: 10,
        speed: this.bulletSpeed,
        color: "white"
      };
      this.bullets.push(bullet);
    }
  };

return newEnemy;
}

// ゲームリセット
function resetGame() {
  player.x = canvas.width / 2 - player.size / 2;
  player.y = canvas.height - player.size - 20;
  player.bullets = [];

enemy = getRandomEnemy();
}

// キーボード操作
function handleKeyDown(event) {
  if (event.key === "ArrowLeft") {
    player.x -= 10;
    if (player.x < 0) {
      player.x = 0;
    }
  } else if (event.key === "ArrowRight") {
    player.x += 10;
    if (player.x + player.size > canvas.width) {
      player.x = canvas.width - player.size;
    }
  } else if (event.key === " ") {
    player.shoot();
  }
}

// 初期化
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext("2d");

player.x = canvas.width / 2 - player.size / 2;
player.y = canvas.height - player.size - 20;

enemy = getRandomEnemy();

// ゲームループ
function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

// 描画
  drawPlayer(ctx);
  drawEnemy(ctx);

// 更新
  updatePlayer();
  updateEnemy();

// 当たり判定
  checkCollision();

requestAnimationFrame(gameLoop);
}

gameLoop();

// ボタン
var resetButton = document.getElementById("resetButton");
resetButton.addEventListener("click", function() {
  resetGame();
});

// イベントリスナー
document.addEventListener("keydown", handleKeyDown);
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<br>
<button id="resetButton">リセット</button>
</body>
</html>