$(function(){

  var title = 'Rush';
  var description = 'ドドドド！！！！';

  var style = document.createElement('style');
  style.innerText = 'html,body{overflow:hidden;cursor:crosshair;}';
  document.getElementsByTagName('head').item(0).appendChild(style);

  var tt = title + ' ' + description;
  document.title = tt;
  console.log(tt);

  var canvasH = window.innerHeight;
  var canvasW = window.innerWidth;
  var canvasZ  = 999;
  var ctx;

  var t = 99;
  var pace = 99;
  var borderLineY = canvasH*6/8;

  var imgEnemy = new Image();
  imgEnemy.src = 'waha-line.png';

  var players = [];
  var enemys = [];
  var enemySpots = [];


//********************************************
  var Player = function(){
    var that = this;

    //var randomRad = Math.random()*Math.PI*2-Math.PI;
    var randomRad = -Math.PI*2+Math.PI/3*5;
    var randomRad2 = randomRad+Math.PI/3*2;
    var randomRad3 = randomRad-Math.PI/3*2;

    var w = canvasW/48;
    var h = canvasW/48;
    var x = canvasW/2;
    var y = borderLineY;
    var ax = 0;
    var dxDefault = canvasW/80;
    var dx = 0;
    var dy = -canvasH/90;//-Math.sin(randomRad);
    var vx = Math.cos(randomRad)*w/2;
    var vy = Math.sin(randomRad)*w/2;
    var vx2 = Math.cos(randomRad2)*w/2;
    var vy2 = Math.sin(randomRad2)*w/2;
    var vx3 = Math.cos(randomRad3)*w/2;
    var vy3 = Math.sin(randomRad3)*w/2;
    var shadows = [];

    var dummyDy = -3;

    var isAction = false;
    var isDead = false;
    var isCatch = false;

    var fillColorDefault = "rgba(255,255,255,1)";

    var fillColorAction  = "rgba(255,255,255,.5)";
    var fillColorDamage  = "rgba(255,255,255,.2)";
    var color = fillColorDefault;


    that.o = function(){
      return {
        x:x,
        y:y,
        w:w,
        h:h,
        dx:dx,
        dy:dy,
        dummyDy:dummyDy,
        isCatch:isCatch,
        isDead:isDead,
      }
    }

    that.action = function(ex,ey){
      isAction = true;
      dy = -canvasH/180;
    }
    that.actionOut = function(ex,ey){
      isAction = false;
      dy = 0;
    }

    that.collision = function(){
      isGameOver = true;
    }

    that.reset = function(){
    }

    that.move = function(){
      if(isGameOver){return;}
      //x+=dx;
      //y+=dy;

      dummyRad = Math.atan2(dummyDy , -dx);
      dummyRad2 = dummyRad+Math.PI/3*2
      dummyRad3 = dummyRad-Math.PI/3*2
      //console.log(dummyRad)

      vx  = Math.cos(dummyRad)*w/2;
      vy  = Math.sin(dummyRad)*w/2;
      vx2 = Math.cos(dummyRad2)*w/2;
      vy2 = Math.sin(dummyRad2)*w/2;
      vx3 = Math.cos(dummyRad3)*w/2;
      vy3 = Math.sin(dummyRad3)*w/2;

      shadows.push({x:x,y:y});
      shadows.forEach(function(v, i){
        v.x += -dx;
        v.y += -dy;
      });
      if(shadows.length>16){
        shadows.shift();
      }
      
    }
    that.draw = function(){



      shadows.forEach(function(v, i){
        var scale = (i/shadows.length);
        var ww = w*scale;
        if(ww<1){return;}
        ctx.beginPath();
        ctx.globalAlpha = scale;
        ctx.fillStyle = color;
        ctx.arc (v.x, v.y, ww, 0, Math.PI*2, true);
        ctx.fill();
        ctx.globalAlpha = 1;
        ctx.closePath();
      });

      ctx.beginPath();
      ctx.fillStyle = color;
      ctx.arc(x,y,w,0,Math.PI*2);
      ctx.fill();
      ctx.closePath();
    }
    return that;
  }
  var player = new Player();



//********************************************
  var EnemySpot = function(cy){
    var that = this;
    var xAry = []
    var r = Math.random()*2;
    var x = -canvasW/16;
    var y = Math.floor(Math.random()*16)*canvasH/16 - canvasH;
    var cdx = canvasW/320 + Math.floor(Math.random()*canvasW/320);
    var isDead = false;

    if(cy){y=cy;}

    if(x<canvasW/2){
    } else {
      cdx = -cdx;
    }

    that.o = function(){
      return {
        x:x,
        y:y,
        isDead:isDead,
      }
    }
    that.move = function(player){
      if(isGameOver){return;}
      if(t%19===0){
        that.popEnemy();
      }
    }
    that.popEnemy = function(){
      enemys.push(new Enemy(x,y,cdx));
    }

    that.draw = function(){
      ctx.beginPath();
      ctx.fillStyle = 'rgba(255,255,255,.1)';
      ctx.arc(x,y,canvasZ/40,0,Math.PI*2);
      ctx.fill();
      ctx.closePath();
    }
    return that;
  }

//********************************************
  var Enemy = function(cx,cy,cdx){
    var that = this;
    var xAry = []
    var x = cx + Math.floor(Math.random()*90);//Math.floor(Math.random()*2)*canvasW;//canvasW/2;
    var y = cy;//Math.floor(Math.random()*32)*canvasH/40;
    var h = canvasH/64;//Math.floor(Math.random()*3+1)*20;
    var w = h * 332/64;
    var ax = 0;
    var dx = Math.random()*2+2;
    var dy = 0;
    var fillColor = "rgba(0,0,0,.8)";
    var fillColorSafe = "rgba(75, 178, 13,.8)";
    var fillColorDamage = "rgba(255,0,0,.8)";
    var isCatch =false;
    var isSafe = false;
    var isDead = false;



    var rad = Math.atan2(dy,dx);

    that.o = function(){
      return {
        x:x,
        y:y,
        w:w,
        h:h,
        dx:dx,
        dy:dy,
        isSafe:isSafe,
        isCatch:isCatch,
        isDead:isDead,
      }
    }

    that.collision = function(player){
      fillColor = fillColorDamage;
    }

    that.move = function(player){
      if(isGameOver){return;}
      x += dx;
      if(x > canvasW*2 || x< -canvasW){
        isDead = true;
      }
    }


    that.draw = function(){

      ctx.drawImage(imgEnemy,x-w,y-h*2,w*2,h*2);
    }

    return that;
  }



//********************************************
//System

  var isCollision = function(a,b){
    var ao = a.o();
    var bo = b.o();
    if(ao.isCatch || bo.isCatch){return;}
    if(ao.isDamage || bo.isDamage){return;}
    var flag = false;
    if( Math.abs(ao.x-bo.x)**2 + Math.abs(ao.y-bo.y)**2 <= (ao.w+bo.w)**2 ){
      flag = true;
      a.collision();
      b.collision(a);
    }
    
    return flag;
  }

  var reset = function(){
    isGameOver = false;
    clearCount = 0;
    enemys = [];
    enemySpots = [];
    
    for(let i = 0;i<33;i++){
      enemySpots.push(new EnemySpot(canvasH/32*i));
    }
  }



//********************************************
//Draw

  var draw = function(){
    t++;

    pace = 7;

    ctx.fillStyle = 'rgb(255,255,255)';
    ctx.fillRect(0,0,canvasW,canvasH);
  
    enemySpots.forEach(function(enemySpot, i, ar){
      enemySpot.move(player);
      if(enemySpot.o().isDead){
        delete ar[i];
      }
    });
    enemySpots  = enemySpots.filter(v => v);

    enemys.forEach(function(enemy, i, ar){
      enemy.move(player);
      if(enemy.o().isDead){
        delete ar[i];
      }
    });
    enemys  = enemys.filter(v => v);


    if(!isGameOver){
      enemys.forEach(function(enemy){
      //  isCollision(player, enemy)
      });
    }


    enemySpots.forEach(function(enemySpot){
    });
    enemys.forEach(function(enemy){
      enemy.draw();
    });
    //player.draw();


  }

  onDeviceReady =function(){
    var FPS = 60;
    setInterval(function(){
      draw();
    }, 1000/FPS);
  }


  var readyCanvas = function(_param){
    var param = _param || {};
    canvasW = param.w || canvasW;
    canvasH = param.h || canvasH;
    canvasZ = Math.min(canvasW, canvasH) || canvasW;

    canvas = document.createElement('canvas');
    canvas.setAttribute('id', 'canvas');
    ctx = canvas.getContext('2d');
    $canvas = $(canvas);

    $canvas.attr({width:canvasW,height:canvasH});
    $content = $('#content');
    $content.prependTo(document.body);
    $parent = $('<div>', {id:'parent'});
    $parent.prependTo($content);
    $canvas.prependTo($parent);
    $aImg = $('<a>');
    $img = $('<img>', {id : 'forSS', src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII='});
    $img.appendTo($aImg);
    $aImg.appendTo($parent);
    return ctx;
  }

  readyCanvas();
  onDeviceReady();
  reset()
});

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-canvas-rush/