forked: forked from: カラフルなタイルー音なしテノ○オン

Readme
JavaScript 182 lines
HTML 1 lines
CSS 1 lines

forked: forked from: カラフルなタイルー音なしテノ○オン
jQuery v1.4.2

//定数------------------------
//フィールド上のボタン数(w,h同じ)
var c_fieldt = 16;
//ボタン毎の間隔
var c_tpadding = 2;
//タイルの幅・高さ
var c_twh = 16;
//更新間隔
var c_uptime = 5;
//円周率*2
var PI = Math.PI*2;
//LEDラインのスピード
var c_LED_sp = 500;

//------------------------------

$(document).ready(function() {
  var canvas = document.getElementById('world');
  ctx=canvas.getContext('2d');
  $('canvas').mousemove(function(event) {
    mx=event.pageX;
    my=event.pageY;
  });
  $('canvas').click(function(event) {
    if(mark!=null){
       mark.mouseDown();
    }
  });
  for (var i = 0; i < c_fieldt; i++) {
    var xx = i * c_twh + (i+1) * c_tpadding;
    for (var j = 0; j < c_fieldt; j++) {
      var yy = j * c_twh + (j + 1) * c_tpadding;
      //ボタン毎にオブジェクト作成
    var t = new Btn();
      //ボタン毎のXY座標設定
    t.x = xx + t.W / 2;
      t.y = yy + t.H / 2;
      //テーブルにオブジェクト格納
    t_btn[t_btn.length]=t;
    }
  }
  for (i = 0; i < c_fieldt; i++) {
    for (j = 0; j < c_fieldt; j++) {
      var tt = t_btn[i * c_fieldt + j];
      //ボタン毎のエフェクト範囲を設定
    if (j > 0             ) tt.neigh[0]=t_btn[i * c_fieldt + j - 1];
      if (j < (c_fieldt - 1)) tt.neigh[1]=t_btn[i * c_fieldt + j + 1];
      if (i > 0             ) tt.neigh[2]=t_btn[(i-1) * c_fieldt + j];
      if (i < (c_fieldt - 1)) tt.neigh[3]=t_btn[(i+1) * c_fieldt + j];
    }
  } 
  var timer = setInterval("LED_rotation()", c_LED_sp);
  var timer2 = setInterval("update()", c_uptime);
});

var LED_rotation=function(){
  line = (line + 1) % c_fieldt;
}

this.mouseDown=function(){
  this.stats = this.cnt % 2;
    this.sel = true;
    this.d = 1;
  this.cnt++;
    this.check(2, true);
  };
  this.check=function(n,b){
    for(var i=0;i<this.neigh.length;i++) {
      var t=this.neigh[i];
      if(t==null)continue;
      if (t.d == t.W) t.d = 1;
      if (n > 0) t.check(n - 1,b);
    }
  };
  this.update=function(ctx){
  ctx.setTransform(1,0,0,1,0,0);
    ctx.translate(this.x, this.y);
    ctx.beginPath();
    ctx.fillStyle=getColor(this.stats);
  ctx.arc(this.W/4, this.H/4, this.W/2, 0, PI, false);
  ctx.fill();
    ctx.closePath();
    if((this.d<this.W) && (this.d != 0))
  {
      ctx.beginPath();
    ctx.fillStyle=getColor(1);
      ctx.arc(this.W/4, this.H/4, this.d/2, 0, PI, false);
    ctx.fill();
      this.d++;
      ctx.closePath();
    }
  };
};

function getColor(status){
  var str_corlor = [
          "220,220,220,0.5",
            "250,250,210,1.0",
            "250,250,210,1.0"
           ];
  
  return "rgba("+str_corlor[status]+")";
}

forked: forked from: カラフルなタイルー音なしテノ○オン

// forked from kswbr_mshr's "forked from: カラフルなタイルー音なしテノ○オン" http://jsdo.it/kswbr_mshr/2tki // forked from termat's "カラフルなタイル" http://jsdo.it/termat/mPB1 //音なしテノ○オン、本物のように音を出したいです。 //どなたか素敵な音源で色付していただけませんか？ //TENORI-ON http://www.yamaha.co.jp/design/tenori-on/ var ctx; var t_btn=new Array(); var mark=null; var isDown=false; var mx; var my; var line = 0; var t_line_after=[15,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]; //定数------------------------ //フィールド上のボタン数(w,h同じ) var c_fieldt = 16; //ボタン毎の間隔 var c_tpadding = 2; //タイルの幅・高さ var c_twh = 16; //更新間隔 var c_uptime = 5; //円周率*2 var PI = Math.PI*2; //LEDラインのスピード var c_LED_sp = 500; //------------------------------ $(document).ready(function() { var canvas = document.getElementById('world'); ctx=canvas.getContext('2d'); $('canvas').mousemove(function(event) { mx=event.pageX; my=event.pageY; }); $('canvas').click(function(event) { if(mark!=null){ mark.mouseDown(); } }); for (var i = 0; i < c_fieldt; i++) { var xx = i * c_twh + (i+1) * c_tpadding; for (var j = 0; j < c_fieldt; j++) { var yy = j * c_twh + (j + 1) * c_tpadding; //ボタン毎にオブジェクト作成 var t = new Btn(); //ボタン毎のXY座標設定 t.x = xx + t.W / 2; t.y = yy + t.H / 2; //テーブルにオブジェクト格納 t_btn[t_btn.length]=t; } } for (i = 0; i < c_fieldt; i++) { for (j = 0; j < c_fieldt; j++) { var tt = t_btn[i * c_fieldt + j]; //ボタン毎のエフェクト範囲を設定 if (j > 0 ) tt.neigh[0]=t_btn[i * c_fieldt + j - 1]; if (j < (c_fieldt - 1)) tt.neigh[1]=t_btn[i * c_fieldt + j + 1]; if (i > 0 ) tt.neigh[2]=t_btn[(i-1) * c_fieldt + j]; if (i < (c_fieldt - 1)) tt.neigh[3]=t_btn[(i+1) * c_fieldt + j]; } } var timer = setInterval("LED_rotation()", c_LED_sp); var timer2 = setInterval("update()", c_uptime); }); var LED_rotation=function(){ line = (line + 1) % c_fieldt; } var Btn=function(){ this.x=0; this.y=0; this.sel = false; this.W = c_twh; this.H = c_twh; this.deg = 0; this.stats = 0; this.d = c_twh; this.cnt = 1; this.neigh=new Array(4); this.stats_tmp = 0; //neigh初期化 for(var i=0;i<this.neigh.length;i++)this.neigh[i]=null; //マウス座標判定 this.contain=function(_x,_y){ if(this.x<=_x&&_x<=this.x+this.W&&this.y<=_y&&_y<=this.y+this.H){ return true; }else{ return false; } } this.LED_line=function(i){ if (line == Math.floor(i / c_fieldt)) { this.d = 1; if (this.stats == 1) { this.check(1, true); } else { this.stats = 2; } this.sel = true; } if (this.stats == 1) { return; } else if(t_line_after[line] == Math.floor(i / c_fieldt)) { this.stats = 0; this.sel = false; } } this.mouseDown=function(){ this.stats = this.cnt % 2; this.sel = true; this.d = 1; this.cnt++; this.check(2, true); }; this.check=function(n,b){ for(var i=0;i<this.neigh.length;i++) { var t=this.neigh[i]; if(t==null)continue; if (t.d == t.W) t.d = 1; if (n > 0) t.check(n - 1,b); } }; this.update=function(ctx){ ctx.setTransform(1,0,0,1,0,0); ctx.translate(this.x, this.y); ctx.beginPath(); ctx.fillStyle=getColor(this.stats); ctx.arc(this.W/4, this.H/4, this.W/2, 0, PI, false); ctx.fill(); ctx.closePath(); if((this.d<this.W) && (this.d != 0)) { ctx.beginPath(); ctx.fillStyle=getColor(1); ctx.arc(this.W/4, this.H/4, this.d/2, 0, PI, false); ctx.fill(); this.d++; ctx.closePath(); } }; }; function update(){ ctx.setTransform(1,0,0,1,0,0); //初期化 ctx.clearRect(0, 0, 450, 450); for(var i=0;i<t_btn.length;i++){ if(t_btn[i].contain(mx,my)){ if(mark!=t_btn[i]){ mark=t_btn[i]; } } t_btn[i].LED_line(i); t_btn[i].update(ctx); } } function getColor(status){ var str_corlor = [ "220,220,220,0.5", "250,250,210,1.0", "250,250,210,1.0" ]; return "rgba("+str_corlor[status]+")"; } <canvas id="world" width="440" height="440"></canvas>body { background-color: #000000; }