懐かしきツインビーを再現してみたのソースを表示

== 詳細 ==
 [[File:Desktop 2021.07.23 - 03.16.08.04-small.mp4|600px]]
*ボス戦は無いです。

== コード ==
<syntaxhighlight lang="html">
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
  <title>シューティングゲーム</title>
  <link rel="shortcut icon" href="#!">
  <style>
    #button:hover{
      opacity:0.6
    }
    canvas{
      background-image:url("assets/bac.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: cover;
      color: #7fffd4;
    }
  </style>

</head>
<body style="background-color: rgb(35, 35, 65);color: white;">
  <div id="log" style="display: block;border-radius: 30px;border-style: solid;border-color: rgba(255, 0, 0, 0.776);border-width: 3px;position:absolute;margin: 15% 10% 15% 10%;width: 50%;text-align: center;min-height: 150px;">
    <p>ボタンを押すと始まるよ</p>
    <button onclick="startInit()" id="button" style="background-color: orange;border-radius: 30px;border-width: 3px;
    border-style: solid;width: 150px;font-size: 40px;color: white;cursor:pointer;">開始!!</button>
    <p>雲を打つとアイテムで得点増加！！さらにベルコンボでパワーアップアイテムに！！<br>青(5HIT)：500、赤(10HIT):パワーアップ</p>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.10/pixi.min.js"></script>

<script src="https://cdn.rawgit.com/sbfkcel/pixi-apngAndGif/master/dist/PixiApngAndGif.js"></script>
  <script>

    //先読込 Chormエラー回避
    let useMusic;
    var backgroundMusic1 = new Audio("sounds/bac2.mp3");
    var Nomalmusic = new Audio('sounds/01.mp3');
    var Powermusic = new Audio('sounds/04.mp3');
    var Hitmusic = new Audio('sounds/02.mp3');
    var Initmusics = new Audio("sounds/start1.mp3");
    var backgroundMusic2 = new Audio("sounds/power1.mp3");
    var Overmusic = new Audio('sounds/over.mp3');
    var KillsMusic = new Audio('sounds/out.mp3');
    var BELLmusic = new Audio('sounds/BELL.mp3');

  function startInit(){
    document.getElementById("button").disabled = true;
    var music = new Audio("sounds/button0.mp3");
    music.volume = 0.5;
    music.play();
    setTimeout(function(){
      start();
    },1500);

  }

  function start(){
    const app = new PIXI.Application({transparent : true,
      width: 960, height: window.innerHeight -20 });//backgroundColor: 0x0000ff window.innerWidth width: 960, height: 540 width: window.innerWidth, height: window.innerHeight
      document.getElementById("log").style.display = "none";
      document.body.appendChild(app.view);
      backsounds(backgroundMusic1,0);
      const pumpkins = [];
      const balls = [];
      const ballsL = [];
      const ballsR = [];
      let count = 0;
      let score = 0;
      const STAGE_W = app.screen.width;
      const STAGE_H = app.screen.height;
      const SIZE = 20;
      const SIZE2 = 2 * SIZE;
      const texture = PIXI.Texture.from('assets/pumpkin.png');
      let powerUpIs = false;
          
      const witch = PIXI.Sprite.from('assets/player.gif');
      const cloudimg = PIXI.Texture.from('assets/cloud.png');
      const itemImg = PIXI.Texture.from('assets/tbee_007.gif');
      witch.anchor.set(0.5);
      witch.x = STAGE_W - (SIZE + 10);
      witch.y = STAGE_H / 2;
      app.stage.addChild(witch);
      const style = new PIXI.TextStyle({fontSize: 34,fill:0xffffff});
      const scoreT = new PIXI.Text('', style);
      app.stage.addChild(scoreT);
      var musics;
      //icons = ["big.png","mikan.png","pumpkin.png","ringo.png","witchB.png"];
      icons = ["storm.gif","been.gif","bimacc.gif","dakkon.gif","houtyo.gif","kyupa.gif","fock.gif","takoran.gif",
               "donbei.gif","nabekko.gif","nappi.gif"];

      let speed = [];
      let ySpeed = [];

      function rondomsIcon(){
        var textured = PIXI.Texture.from(`assets/${icons[ Math.floor( Math.random() * icons.length ) ]}`);
        return textured;
      }

      

      
      function backsounds(val,isSound){
        useMusic = val;
        stopsounds();
        switch(isSound){
          case (0): 
                    Initmusics.volume = 0.5;
                    Initmusics.play();
                    setTimeout(function(){
                        if(!GameOverIs){
                          val.loop = true;
                          val.volume = 0.5;
                          val.play();
                        }else{
                          stopsounds();
                        }
                    },7000);
                    break;
          case (1): 
                    val.loop = true;
                    val.volume = 0.5;
                    val.play();
                    break;
          default: break;
        }
      }

      function stopsounds(){
        try{
          useMusic.pause();
          useMusic.currentTime = 0;
        }catch{
          ;
        }
      }
      let clickCount = 0;
      app.stage.interactive = true;
      app.stage.on('pointertap', () => {
        const ball = new PIXI.Graphics();
        ball.lineStyle(0);
        ball.beginFill(0xff99ff);//666666
        ball.drawRect(0, 0, 8,8);
        ball.rotation = 0.75;
        ball.x = witch.x ;
        ball.y = witch.y - SIZE;
        if(!powerUpIs){
          Nomalmusic.volume = 0.5;
          Nomalmusic.play();
        }else{
          Powermusic.volume = 0.5;
          Powermusic.play();
        }
        app.stage.addChild(ball);
        balls.push(ball);  

        const ball2 = new PIXI.Graphics();
        ball2.lineStyle(0);
        ball2.beginFill(0xff99ff);//666666
        ball2.drawRect(0, 0, 8,8);
        ball2.rotation = 0.75;
        ball2.x = witch.x;
        ball2.y = witch.y - SIZE;
        const ball3 = new PIXI.Graphics();
        ball3.lineStyle(0);
        ball3.beginFill(0xff99ff);//666666
        ball3.drawRect(0, 0, 8,8);
        ball3.rotation = 0.75;
        ball3.x = witch.x;
        ball3.y = witch.y - SIZE;
        clickCount++;

        if(powerUpIs && (clickCount%2 == 0)){
          clickCount=0;
          //右
          app.stage.addChild(ball2);
          ballsL.push(ball2);  

          //左
          app.stage.addChild(ball3);
          ballsR.push(ball3);  

        }
      });

      function addItem(cloudP){
        const item = new PIXI.Sprite(itemImg);
        item.y = cloudP.y;
        item.x = cloudP.x;
        app.stage.addChild(item);
        items.push(item);
        itemSpeed.push(3);
        itemHits.push(0);
      }

      function belltype(i){
        
        try{
          if((itemHits[i] >= 5) && (itemHits[i] <= 7)){
            itemHits[i] = 0;
            score += 500;
            scoreT.text = String(score);
          }else if((itemHits[i] >= 10) && (itemHits[i] <= 13)){
            itemHits[i] = 0;
            powerUp(1);
          }else{
            itemHits[i] = 0;
            score += 200;
            scoreT.text = String(score);
          }
        }catch{
          itemHits[i] = 0;
          score += 200;
          scoreT.text = String(score);
        }
      }

      function bellIcons(i){
        //console.log(itemHits[i]);
        try{
          if((itemHits[i] >= 5) && (itemHits[i] <= 7)){
            const bellI = PIXI.Texture.from('assets/tbee_008.gif');
            const item = new PIXI.Sprite(bellI);
            item.y = items[i].y;
            item.x = items[i].x;
            app.stage.addChild(item);
            app.stage.removeChild(items[i]);
            items[i] = item;
            
          }else if((itemHits[i] >= 10) && (itemHits[i] <= 13)){
            const bellI = PIXI.Texture.from('assets/tbee_010.gif');
            const item = new PIXI.Sprite(bellI);
            item.y = items[i].y;
            item.x = items[i].x;
            app.stage.addChild(item);
            app.stage.removeChild(items[i]);
            items[i] = item;
          }else if((itemHits[i] >= 14)){
            const bellI = PIXI.Texture.from('assets/tbee_007.gif');
            const item = new PIXI.Sprite(bellI);
            item.y = items[i].y;
            item.x = items[i].x;
            app.stage.addChild(item);
            app.stage.removeChild(items[i]);
            items[i] = item;
            itemHits[i] = 0;
          }
        }catch{
          ;
        }
      }

      /*  ITEM 制御  */
      let items = [];
      let itemSpeed = [];
      let itemHits = [];
      app.ticker.add(Items);
      function Items(delta) {
        for (let i = 0; i < items.length; i++) {
          const itemP = items[i];
          try{
            if (items[i].y > STAGE_H - SIZE2 +50) {
              //showGameOver();
              app.stage.removeChild(itemP);
              items.splice(i, 1);
              itemSpeed.splice(i, 1);
              //return;
            }else{
              if (items[i].x > STAGE_W - 35){
                itemSpeed[i] *= -1;
              }
              if (items[i].x < 0){ //+ SIZE2
                itemSpeed[i] *= -1;
              }
              items[i].y += 3;
                
              items[i].x += itemSpeed[i];
              
              if(hitTest(witch,itemP)){
                app.stage.removeChild(itemP);
                items.splice(i, 1);
                itemSpeed.splice(i, 1);
                belltype(i);
              }
            }
          }catch(er){
            console.log(er);
          }
        }
      }
      let clouds = [];
      /* cloud */
      app.ticker.add(cloud);
      function cloud(){
        for (let i = 0; i < clouds.length; i++) {
          const cloudP = clouds[i];
          if (clouds[i].y > STAGE_H - SIZE2 +50) {
            
            app.stage.removeChild(cloudP);
            clouds.splice(i, 1);
            
          }else{
            clouds[i].y += 2;
          }
          if(GameOverIs){
            break;
          }
          
        }
      }


      app.ticker.add(cloudSettingPower);
          function cloudSettingPower(){
            for (let j = 0; j < clouds.length; j++) {
            if(powerUpIs){
              for (let i = 0; i < ballsR.length; i++) {
                try{
                  const ball = ballsR[i];
                  const ball2 = ballsL[i];
                  const cloudP = clouds[j];
                  if (hitTest(ball, cloudP)) {
                    app.stage.removeChild(ball);
                    ballsR.splice(i, 1);
                    app.stage.removeChild(cloudP);
                    clouds.splice(j, 1);

                    // Item Drop
                    addItem(cloudP);
                    break;
                  }
                  if (hitTest(ball2, cloudP)) {
                    app.stage.removeChild(ball2);
                    ballsL.splice(i, 1);
                    app.stage.removeChild(cloudP);
                    clouds.splice(j, 1);

                    // Item Drop
                    addItem(cloudP);
                    break;
                  }
                }catch(e){
                  console.log(e);
                }
              }
            }
          }
        }



        function ballPowerL(){
            if(powerUpIs){
              for (let i = 0; i < ballsL.length; i++) {
                try{
                  ballsL[i].y -= 10;
                  ballsL[i].x -= 10;
                  
                  if (ballsL[i].y < 0) {
                    app.stage.removeChild(ballsL[i]);
                    ballsL.splice(i, 1);
                  }
                }catch{
                  ;
                }
              }
            }
        }
        function ballPowerR(){
            if(powerUpIs){
              for (let i = 0; i < ballsR.length; i++) {
                try{
                  ballsR[i].y -= 10;
                  ballsR[i].x += 10;
                  if (ballsR[i].y < 0) {
                    app.stage.removeChild(ballsR[i]);
                    ballsR.splice(i, 1);
                  }
                }catch{
                  ;
                }
              }
            }
        }
        /* E N D */


        function hitsPowerR(){
            if(powerUpIs){
              for (let j = 0; j < pumpkins.length; j++) {
              for (let i = 0; i < ballsR.length; i++) {
                try{
                  const ball = ballsR[i];
                  const pumpkin = pumpkins[j];
                  if (hitTest(ball, pumpkin)) {
                    app.stage.removeChild(ball);
                    
                    Hitmusic.volume = 0.5;
                    Hitmusic.play();
                    ballsR.splice(i, 1);
                    app.stage.removeChild(pumpkin);
                    EnemyCrush(pumpkins,j);
                    speed.splice(j, 1);
                    ySpeed.splice(j,1);
                    pumpkins.splice(j, 1);
                    score += 100;
                    scoreT.text = String(score);
                    break;
                  }
                }catch{
                  ;
                }
              }
            }
          }
        }
        

        function hitsPowerL(){
            if(powerUpIs){
              for (let j = 0; j < pumpkins.length; j++) {
              for (let i = 0; i < ballsL.length; i++) {
                try{
                  const ball = ballsL[i];
                  const pumpkin = pumpkins[j];
                  if (hitTest(ball, pumpkin)) {
                    app.stage.removeChild(ball);
                    Hitmusic.volume = 0.5;
                    Hitmusic.play();
                    ballsL.splice(i, 1);
                    app.stage.removeChild(pumpkin);
                    EnemyCrush(pumpkins,j);
                    speed.splice(j, 1);
                    ySpeed.splice(j,1);
                    pumpkins.splice(j, 1);
                    score += 100;
                    scoreT.text = String(score);
                    break;
                  }
                }catch{
                  ;
                }
              }
            }
          }
        }
        
        function EnemyCrush(mob,val){
          try{
            const effectE = PIXI.Texture.from('assets/down.png');
            const effect = new PIXI.Sprite(effectE);
            effect.x = mob[val].x;
            effect.y = mob[val].y;
            app.stage.addChild(effect);
            setTimeout(function(){
              app.stage.removeChild(effect);
            },200);
          }catch{
            ;
          }
        }

        /*  E N D  */

        /* cloud 制御 */
        app.ticker.add(cloudSetting);
        function cloudSetting(){
          for (let j = 0; j < clouds.length; j++) {
            for (let i = 0; i < balls.length; i++) {
              try{
                const ball = balls[i];
                const cloudP = clouds[j];
                if (hitTest(ball, cloudP)) {
                  app.stage.removeChild(ball);
                  balls.splice(i, 1);
                  app.stage.removeChild(cloudP);
                  clouds.splice(j, 1);

                  // Item Drop
                  addItem(cloudP);
                  break;
                }
              }catch{
                ;
              }
            }
          }
        }
        

        /* E N D */
        app.ticker.add(ItemSetting);
        function ItemSetting(){
        /* Item 制御 */
          for (let j = 0; j < items.length; j++) {
            for (let i = 0; i < balls.length; i++) {
              try{
                const ball = balls[i];
                const itemP = items[j];
                if (hitTest(ball, itemP)) {
                  BELLmusic.volume = 0.5;
                  BELLmusic.play();
                  itemHits[j] += 1;
                    items[j].x += 20;
                    //items[j].y += ((0-(items[j].x)**2)+items[j].x)+items[j].y;
                    items[j].y -= 150;
                    bellIcons(j);
                  
                }
              }catch{
                ;
              }
            }
            if(powerUpIs){
              for (let i = 0; i < ballsR.length; i++) {
                try{
                  const ball = ballsR[i];
                  const ball2 = ballsL[i];
                  const itemP = items[j];
                  if (hitTest(ball, itemP)) {
                    BELLmusic.volume = 0.5;
                    BELLmusic.play();
                    itemHits[j] += 1;
                      items[j].x += 20;
                      items[j].y -= 150;
                      bellIcons(j);
                    
                  }
                  if (hitTest(ball2, itemP)) {
                    BELLmusic.volume = 0.5;
                    BELLmusic.play();
                    itemHits[j] += 1;
                      items[j].x -= 20;
                      items[j].y -= 150;
                      bellIcons(j);
                    
                  }
                }catch{
                  ;
                }
              }
            }
          }
        }

          
      app.ticker.add(animate);
      function animate(delta) {
        for (let i = 0; i < pumpkins.length; i++) {
          try{
            const pumpkinP = pumpkins[i];
            if (pumpkins[i].y > STAGE_H - SIZE2 +50) {
              //showGameOver();
              app.stage.removeChild(pumpkinP);
              speed.splice(i, 1);
              ySpeed.splice(i,1);
              pumpkins.splice(i, 1);
              //return;
            }
            if (pumpkins[i].x > STAGE_W - 35){
              ySpeed[i] *= -1;
            }
            if (pumpkins[i].x < 0){
              ySpeed[i] *= -1;
            }
            speeds = speed[i];
            if(speeds){
              pumpkins[i].y += speeds;
              yspeeds = ySpeed[i];
              if(yspeeds){
                pumpkins[i].x += yspeeds;
              }
            }else{
              pumpkins[i].y += 2;
            }
            if(hitTest(witch,pumpkinP)){
              stopsounds();
              KillsMusic.volume = 0.5;
              KillsMusic.play();
              showGameOver();
              return;
            }
          }catch{
            ;
          }
        }

      
        
      const position = app.renderer.plugins.interaction.mouse.getLocalPosition(app.stage);
      if (position.y != -999999) {  
        witch.x += (position.x - witch.x) * 0.1;
        witch.y += (position.y - witch.y) * 0.1;
      }
      count += delta;
      if (count >= 60) {
        count = 0;
        const pumpkin = new PIXI.Sprite(rondomsIcon());
        pumpkin.y = 0 - SIZE2;
        pumpkin.x = (STAGE_W - SIZE2) * Math.random();
        app.stage.addChild(pumpkin);
        pumpkins.push(pumpkin);
        speed.push(Math.floor( Math.random() * (3 + 1 - 1) ) + 1 );
        //speed.push(2);
        ySpeed.push(Math.floor( Math.random() * (5 + 1 - 0) ) + 0 * 0.1);
        if((Math.floor( Math.random() * (3 + 1 - 0) ) + 0 == 2) && score >= 500){
          const cloudPs = new PIXI.Sprite(cloudimg);
          cloudPs.y = 0 - SIZE2;
          cloudPs.x = (STAGE_W - 50) * Math.random();
          app.stage.addChild(cloudPs);
          clouds.push(cloudPs);
        }
      }


        //####################
        //
        //
        //   BALL 制御
        //
        //
        //####################



        /*  範囲外はボールは消える  */
        for (let i = 0; i < balls.length; i++) {
          balls[i].y -= 30;
          if (balls[i].y < 0) {
            app.stage.removeChild(balls[i]);
            balls.splice(i, 1);
          }
        }
        
        

        /*  雑魚敵制御  */
        for (let j = 0; j < pumpkins.length; j++) {
          for (let i = 0; i < balls.length; i++) {
            try{
              const ball = balls[i];
              const pumpkin = pumpkins[j];
              if (hitTest(ball, pumpkin)) {
                app.stage.removeChild(ball);
                Hitmusic.volume = 0.5;
                Hitmusic.play();
                balls.splice(i, 1);
                app.stage.removeChild(pumpkin);
                EnemyCrush(pumpkins,j);
                speed.splice(j, 1);
                ySpeed.splice(j,1);
                pumpkins.splice(j, 1);
                score += 100;
                scoreT.text = String(score);
                scoreT.x = 500;
                scoreT.y = 10;
                break;
              }
            }catch{
              ;
            }
          }
        }
        
        
        
    };
        powerUpCount = 0;
        function powerUp(val){
        stopsounds();
        
        switch(val){
          case(0):powerUpIs = false;
          powerUpCount = 0;
          backsounds(backgroundMusic1,0);
          break;
          case(1):
            
            powerUpIs = true;
            if(powerUpCount == 0){
              app.ticker.add(hitsPowerL);
              app.ticker.add(hitsPowerR);
              app.ticker.add(ballPowerL);
              app.ticker.add(ballPowerR);
            }
            powerUpCount += 1;
            //console.log(`PowerUP!!${powerUpIs}`)
          
            backsounds(backgroundMusic2,1);
          break;
        }
      }
      function hitTest(ball, pumpkin) {
        try{
          if (ball.x > pumpkin.x && ball.x < pumpkin.x + SIZE2
            && ball.y > pumpkin.y && ball.y < pumpkin.y + SIZE2) {
            return true;
          } else {
            return false;
          }
        }catch{
          return false;
        }
      }
      let GameOverIs = false;
      function showGameOver() {
        GameOverIs = true;
        stopsounds();
        
        Overmusic.volume = 0.5;
        Overmusic.play();
        message(`ゲームオーバー！ あなたのスコアは ${score} でした。<button onclick="location.href=''">リセット</button>`,"pink");
        app.ticker.remove(animate);
        if(powerUpIs){
          app.ticker.remove(hitsPowerL);
          app.ticker.remove(hitsPowerR);
          app.ticker.remove(ballPowerL);
          app.ticker.remove(ballPowerR);
          }
          app.ticker.remove(cloud);
          app.ticker.remove(Items);
          app.ticker.remove(cloudSetting);
          app.ticker.remove(ItemSetting);
        app.stage.off('pointertap');
        app.stage.off('pointertap2');

      }
      


      function message(msg,color){
        var logs = document.getElementById("log");
        logs.style.display = "block";
        logs.style.backgroundColor = color;
        logs.innerHTML = msg;
      }
    }
  </script>
</body>
</html>
</syntaxhighlight>