AI game creator

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

No:7266

2009

←

Prev Next

→

Siege Cannon
Developer User3996｜Date and time 23/7/6 18:17:45
Build time 23.853 sec｜Game capacity 4.25KB｜

Script

以下はJavaScriptを使用して攻城砲をゲーム化した例です。

このゲームでは、プレイヤーが左右に移動することができ、スペースキーを押すと攻城砲から弾が発射されます。目標の四角形に弾が当たると、弾は消えます。ゲームは10ミリ秒ごとに更新され、描画されます。

←

Prev　Next

→ 　

Back　

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

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

以下はJavaScriptを使用して攻城砲をゲーム化した例です。

```html
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>攻城砲ゲーム</title>
</head>
<body>
   <canvas id="gameCanvas" width="400" height="400"></canvas>
   <script>
       // ゲームオブジェクト
       let game = {
           canvas: document.getElementById("gameCanvas"),
           ctx: null,
           cannon: { x: 200, y: 350, width: 50, height: 20, color: "#000" },
           bullet: { x: 225, y: 330, width: 10, height: 20, color: "#f00" },
           target: { x: 175, y: 50, width: 50, height: 50, color: "#00f" },
           moveLeft: false,
           moveRight: false,
           
           // ゲーム初期化
           initialize: function() {
               this.ctx = this.canvas.getContext("2d");
               this.draw();
               this.start();
           },
           
           // ゲーム描画
           draw: function() {
               this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
               
               this.ctx.fillStyle = this.cannon.color;
               this.ctx.fillRect(this.cannon.x, this.cannon.y, this.cannon.width, this.cannon.height);
               
               this.ctx.fillStyle = this.bullet.color;
               this.ctx.fillRect(this.bullet.x, this.bullet.y, this.bullet.width, this.bullet.height);
               
               this.ctx.fillStyle = this.target.color;
               this.ctx.fillRect(this.target.x, this.target.y, this.target.width, this.target.height);
           },
           
           // ゲーム開始
           start: function() {
               document.addEventListener("keydown", this.handleKeyDown.bind(this));
               document.addEventListener("keyup", this.handleKeyUp.bind(this));
               setInterval(this.update.bind(this), 10);
           },
           
           // キー操作
           handleKeyDown: function(e) {
               if (e.key === "ArrowLeft") {
                   this.moveLeft = true;
               } else if (e.key === "ArrowRight") {
                   this.moveRight = true;
               } else if (e.key === "Space") {
                   this.fireBullet();
               }
           },
           
           handleKeyUp: function(e) {
               if (e.key === "ArrowLeft") {
                   this.moveLeft = false;
               } else if (e.key === "ArrowRight") {
                   this.moveRight = false;
               }
           },
           
           // プレイヤーの移動
           movePlayer: function() {
               if (this.moveLeft && this.cannon.x > 0) {
                   this.cannon.x -= 3;
               } else if (this.moveRight && this.cannon.x < this.canvas.width - this.cannon.width) {
                   this.cannon.x += 3;
               }
           },
           
           // 弾の発射
           fireBullet: function() {
               let bullet = Object.assign({}, this.bullet);
               bullet.ySpeed = -3;
               this.bullets.push(bullet);
           },
           
           // 弾の移動
           moveBullets: function() {
               for (let i = 0; i < this.bullets.length; i++) {
                   let bullet = this.bullets[i];
                   bullet.y += bullet.ySpeed;
                   
                   if (bullet.y < this.target.y + this.target.height && bullet.y + bullet.height > this.target.y && bullet.x + bullet.width > this.target.x && bullet.x < this.target.x + this.target.width) {
                       this.bullets.splice(i, 1);
                   }
               }
           },
           
           // ゲーム更新
           update: function() {
               this.movePlayer();
               this.moveBullets();
               this.draw();
           }
       };
       
       // ゲーム初期化
       game.initialize();
   </script>
</body>
</html>
```