Forked from: kswbr_mshr's forked from: カラフルなタイルー音なしテノ○オン View Diff (1) forked: forked from: カラフルなタイルー音なしテノ○オン iijima11828 Follow 2017-01-28 19:50:33 License: MIT License Fork0 Fav0 View3461 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 182 lines HTML 1 lines CSS 1 lines forked: forked from: カラフルなタイルー音なしテノ○オン jQuery v1.4.2 // 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> forked: forked from: カラフルなタイルー音なしテノ○オン body { background-color: #000000; } // 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author iijima11828 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/e4Pj/js"></script> question Discussion Questions on this code? Tags question