A just war and an unjust peace.'s game

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

No:3401

4687

←

Prev Next

→

A just war and an unjust peace.
Developer User3694｜Date and time 23/6/25 0:28:35
Build time 57.213 sec｜Game capacity 7.172KB｜

Script

がテーマのゲームを作成しました。

GAME OVER

Tap to restart

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

がテーマのゲームを作成しました。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正義の戦争 vs 不正義の平和</title>
        <style>
            body{
                margin: 0;
                padding: 0;
                background-color: #333;
                color: #fff;
                font-family: Arial, sans-serif;
            }
            canvas{
                display: block;
                margin: 0 auto;
            }
            #gameover{
                display: none;
                width: 100%;
                font-size: 5em;
                text-align: center;
                margin-top: 20%;
            }
            #restart{
                display: none;
                width: 100%;
                font-size: 2em;
                text-align: center;
            }
            #score{
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 2em;
            }
        </style>
    </head>
    <body>
        <canvas id="gameCanvas" width="400" height="500"></canvas>
        <div id="gameover">GAME OVER</div>
        <div id="restart">Tap to restart</div>
        <div id="score">Score: 0</div>
    </body>
    <script>
        //キャンバスの取得
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

//画像の取得
        const heroImg = new Image();
        heroImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/superhero_1f9b8.png";
        const enemyImg = new Image();
        enemyImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/skull-and-crossbones_2620.png";
        const explosionImg = new Image();
        explosionImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/fire_1f525.png";

//オブジェクトの定義
        class Hero{
            constructor(x,y,w,h){
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
            }
            draw(){
                ctx.drawImage(heroImg, this.x, this.y, this.w, this.h);
            }
        }

class Enemy{
            constructor(x,y,w,h, speed){
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
                this.speed = speed;
            }
            draw(){
                ctx.drawImage(enemyImg, this.x, this.y, this.w, this.h);
            }
            update(){
                this.y += this.speed;
            }
        }

class Bullet{
            constructor(x,y,w,h, speed){
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
                this.speed = speed;
            }
            draw(){
                ctx.fillStyle = "white";
                ctx.fillRect(this.x, this.y, this.w, this.h);
            }
            update(){
                this.y -= this.speed;
            }
        }

class Explosion{
            constructor(x,y,w,h){
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
                this.timer = 30;
            }
            draw(){
                ctx.drawImage(explosionImg, this.x, this.y, this.w, this.h);
            }
            update(){
                this.timer--;
            }
        }

//変数の初期化
        let hero = new Hero(canvas.width/2-20, canvas.height-80, 40, 80);
        let enemies = [];
        let bullets = [];
        let explosions = [];
        let speed = 1;
        let score = 0;
        let gameover = false;

//オブジェクトの描画
        function draw(){
            ctx.clearRect(0,0,canvas.width,canvas.height);

if(!gameover){
                hero.draw();
                bullets.forEach(bullet=>bullet.draw());
                enemies.forEach(enemy=>enemy.draw());
                explosions.forEach(explosion=>explosion.draw());
            }else{
                document.getElementById("gameover").style.display = "block";
                document.getElementById("restart").style.display = "block";
            }
            document.getElementById("score").textContent = `Score: ${score}`;
        }

//オブジェクトの更新
        function update(){
            bullets.forEach(bullet=>{
                bullet.update();
                if(bullet.y < 0){
                    bullets.splice(bullets.indexOf(bullet),1);
                }
            });

enemies.forEach(enemy=>{
                enemy.update();
                if(enemy.y > canvas.height){
                    enemies.splice(enemies.indexOf(enemy),1);
                }
            });

explosions.forEach(explosion=>{
                explosion.update();
                if(explosion.timer == 0){
                    explosions.splice(explosions.indexOf(explosion),1);
                }
            });

if(!gameover){
                for(let i=0;i<enemies.length;i++){
                    let enemy = enemies[i];
                    if(checkCollision(hero, enemy)){
                        gameover = true;
                    }

for(let j=0;j<bullets.length;j++){
                        let bullet = bullets[j];
                        if(checkCollision(bullet, enemy)){
                            explosions.push(new Explosion(enemy.x,enemy.y,50,50));
                            enemies.splice(enemies.indexOf(enemy),1);
                            bullets.splice(bullets.indexOf(bullet),1);
                            score++;
                        }
                    }
                }

enemies.forEach(enemy=>{
                    if(Math.random() < 0.01){
                        bullets.push(new Bullet(enemy.x+enemy.w/2-2,enemy.y+enemy.h,4,15,5));
                    }
                });

speed = 1 + score/10;

if(Math.random() < 0.05){
                    enemies.push(new Enemy(Math.random()*(canvas.width-30),-30,30,30,speed));
                }
            }
        }

//衝突判定
        function checkCollision(obj1, obj2){
            let left1 = obj1.x;
            let right1 = obj1.x + obj1.w;
            let top1 = obj1.y;
            let bottom1 = obj1.y + obj1.h;
            let left2 = obj2.x;
            let right2 = obj2.x + obj2.w;
            let top2= obj2.y;
            let bottom2 = obj2.y + obj2.h;

if(left1<right2 && right1>left2 && top1<bottom2 && bottom1>top2){
                return true;
            }else{
                return false;
            }
        }

//ゲームのループ処理
        setInterval(()=>{
            draw();
            update();
        },16);

//再スタート
        document.addEventListener("click", ()=>{
            if(gameover){
                location.reload();
            }
        });
    </script>
</html>