トーナメント表 | ひまあそび-ミニゲーム


  view source
  JavaScript
  document.title = 'トーナメント表';

var canvas = document.createElement('canvas');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var min = Math.min(w,h);
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
let demo = document.getElementById('demo');
demo.appendChild(canvas);

var ctx = canvas.getContext('2d');
var cx = w/2;
var cy = h/2;
var t = 0;
var max = 16;
var jMax = 4;
var iw = min/max;
var ih = min/max;
var margin = (w- max*iw) / 2;
var ary = [...Array(max)].map((_, i) => 0);


var FPS = 10;

window.addEventListener('click', function(e) {
  if(e.touches) {
    ex = e.changedTouches[0].pageX;
    ey = e.changedTouches[0].pageY;
  }else{
    var rect = e.target.getBoundingClientRect();
    ex = e.clientX - rect.x;
    ey = e.clientY - rect.y;
  }
  enemys.forEach(function(enemy, i, ar){
    enemy.action(ex,ey);
  });
});

//********************************************
  var Enemy = function(i,j,dir){

    var that = this;
    var jj = (2**j);
    var hh = h/8;
    var ww = jj * iw;
    var x = (i * jj )  *iw + margin;
    var y = h-h/8 - j*hh;
    var fillColor = "rgba(0,0,0,1)";
    var fillColorRed = "rgba(255,0,0,1)";
    var isRed = false;
    console.log([x,y,i,j]);
    that.action = function(ex,ey){
      console.log([i, isRed]);
      if(ex>x && ex<x+ww && ey<y && ey>y-hh){
        isRed = !isRed;
        
      }
    }

    that.draw = function(){
      ctx.lineJoin = 'round';
      if(isRed){
        ctx.strokeStyle = fillColorRed;
        ctx.lineWidth = 4;
      } else {
        ctx.strokeStyle = fillColor;
        ctx.lineWidth = 1;
      }

      ctx.beginPath();
      ctx.moveTo(x+ww/2, y);
      ctx.lineTo(x+ww/2, y-hh);
      ctx.lineTo(x+ww/2+ww/2*dir, y-hh);
      ctx.lineTo(x+ww/2+ww/2*dir, y-hh*2);
      ctx.stroke();
      ctx.closePath();
    }
    return that;
  }
//********************************************


function draw() {
  ctx.clearRect(0, 0, w, h);
  enemys.forEach(function(enemy){
    enemy.draw();
  });
}

enemys = [];
for(let j=0;j<4;j++){
  for(let i=0;i<max/(2**j);i++){
    let dir = 1;
    if(i%2===1){
      dir = -1;
    }
    enemys.push(new Enemy(i,j,dir));
  }
}

setInterval(function(){
  draw();
}, 1000/FPS);
draw();


  CSS
  
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-tournament/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。