Vertical scrolling shooting game's game

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

No:1416

182

←

Prev Next

→

Vertical scrolling shooting game
Developer User3336｜Date and time 23/6/18 15:09:12
Build time 41.294 sec｜Game capacity 4.915KB｜

Script

【ゲーム概要】プレイヤーを操作して、敵を倒しながらスコアを稼ぎます。敵に当たったり、スコア100点になるとゲームオーバーです。スマホで操作できます。絵文字を多く使用しました。

←

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>シューティングゲーム</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        canvas{
            border:2px solid black;
            display:block;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="360" height="640"></canvas>
    <script>
        const canvas=document.getElementById("canvas");
        const ctx=canvas.getContext("2d");
        
        //プレイヤー
        const player={
            x:canvas.width/2,
            y:570,
            w:30,
            h:30,
            dx:0,
            speed:5
        };
        
        //弾
        const bullets=[];
        
        //敵
        const enemies=[];
        let count=0;
        const enemyInterval=50;
        
        //爆発
        const explosions=[];
        
        //スコア
        let score=0;
        
        //キー操作
        document.addEventListener("keydown",function(e){
            if(e.key==="ArrowLeft"){
                player.dx=-player.speed;
            }
            if(e.key==="ArrowRight"){
                player.dx=player.speed;
            }
            if(e.key===" "){
                bullets.push({x:player.x+player.w/2,y:player.y-10,r:5});
            }
        })
        document.addEventListener("keyup",function(e){
            if(e.key==="ArrowLeft" || e.key==="ArrowRight"){
                player.dx=0;
            }
        })
        
        //メイン処理
        function main(){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            
            //プレイヤー
            player.x+=player.dx;
            if(player.x<0 || player.x+player.w>canvas.width){
                player.x-=player.dx;
            }
            ctx.fillStyle="orange";
            ctx.fillRect(player.x,player.y,player.w,player.h);
            
            //弾
            for(let i=0;i<bullets.length;i++){
                bullets[i].y-=10;
                ctx.beginPath();
                ctx.fillStyle="yellow";
                ctx.arc(bullets[i].x,bullets[i].y,bullets[i].r,0,Math.PI*2,true);
                ctx.fill();
                ctx.closePath();
                
                //当たり判定
                for(let j=0;j<enemies.length;j++){
                    if(Math.abs(bullets[i].x-enemies[j].x)<enemies[j].r && Math.abs(bullets[i].y-enemies[j].y)<enemies[j].r){
                        explosions.push({x:enemies[j].x,y:enemies[j].y,r:1});
                        enemies.splice(j,1);
                        bullets.splice(i,1);
                        score+=10;
                        break;
                    }
                }
            }
            
            //敵
            count++;
            if(count===enemyInterval){
                enemies.push({x:Math.floor(Math.random()*canvas.width),y:0,r:20});
                count=0;
            }
            for(let i=0;i<enemies.length;i++){
                enemies[i].y+=5;
                ctx.beginPath();
                ctx.fillStyle="blue";
                ctx.arc(enemies[i].x,enemies[i].y,enemies[i].r,0,Math.PI*2,true);
                ctx.fill();
                ctx.closePath();
                
                //当たり判定
                if(Math.abs(enemies[i].x-player.x)<player.w && Math.abs(enemies[i].y-player.y)<player.h){
                    explosions.push({x:player.x,y:player.y,r:1});
                    player.x=canvas.width/2;
                    score=0;
                }
            }
            
            //爆発
            for(let i=0;i<explosions.length;i++){
                if(explosions[i].r<30){
                    ctx.beginPath();
                    ctx.fillStyle="red";
                    ctx.arc(explosions[i].x,explosions[i].y,explosions[i].r,0,Math.PI*2,true);
                    ctx.fill();
                    ctx.closePath();
                    explosions[i].r+=2;
                }else{
                    explosions.splice(i,1);
                }
            }
            
            //スコア表示
            ctx.fillStyle="black";
            ctx.font="20px Arial";
            ctx.fillText("SCORE:"+score,10,25);
            
            //ゲームオーバー判定
            if(score>=100){
                ctx.fillStyle="black";
                ctx.font="50px Arial";
                ctx.fillText("GAME OVER",canvas.width/2-120,canvas.height/2);
                return;
            }
            
            requestAnimationFrame(main);
        }
        main();
    </script>
</body>
</html>

【ゲーム概要】
プレイヤーを操作して、敵を倒しながらスコアを稼ぎます。敵に当たったり、スコア100点になるとゲームオーバーです。スマホで操作できます。絵文字を多く使用しました。