カラフルなタイル termat Follow 2010-06-20 02:54:32 License: MIT License Fork4 Fav15 View2609 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 145 lines HTML 1 lines CSS 1 lines カラフルなタイル jQuery v1.4.2 var ctx var tiles=new Array(); var mark=null; var isDown=false; var mx; var my; $(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 < 14; i++) { var xx = i * 27 + (i+1) * 4; for (var j = 0; j < 14; j++) { var yy = j * 27 + (j + 1) * 4; var t = new Tile(); t.x = xx + t.W / 2; t.y = yy + t.H / 2; tiles[tiles.length]=t; } } for (i = 0; i < 14; i++) { for (j = 0; j < 14; j++) { var tt = tiles[i * 14 + j]; if (j > 0) tt.neigh[0]=tiles[i * 14 + j - 1]; if (j < 13)tt.neigh[1]=tiles[i * 14 + j + 1]; if (i > 0) tt.neigh[2]=tiles[(i-1) * 14 + j]; if (i < 13)tt.neigh[3]=tiles[(i+1) * 14 + j]; } } var timer = setInterval("update()", 10); }); var Tile=function(){ this.x=0; this.y=0; this.sel = false; this.W = 27; this.H = 27; this.deg = 0; this.d = 27; this.rot = 0; this.neigh=new Array(4); 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.rollOver=function(){ this.sel = true; this.d = 1; this.check(1, false); }; this.mouseDown=function(){ this.sel = true; this.d = 1; this.check(3, 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 (b && t.rot % 180 == 0) t.rot += 5; 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.rotate(this.rot/180*Math.PI); ctx.beginPath(); ctx.fillStyle=getColor(this.deg,0.9,1.0); ctx.fillRect(-this.W/2, -this.H/2, this.W, this.H); ctx.closePath(); if(this.sel||this.rot%180!=0){ this.rot +=5; this.sel=false; this.deg=(this.deg+1)%360; } if(this.d<this.W){ ctx.beginPath(); ctx.fillStyle=getColor(this.deg,0.5,1.0); ctx.fillRect(-this.d/2, -this.d/2, this.d, this.d); 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<tiles.length;i++){ if(tiles[i].contain(mx,my)){ if(mark!=tiles[i]){ mark=tiles[i]; mark.rollOver(); } } tiles[i].update(ctx); } } function getColor(i, s, v){ var h = i / 60; var ii = Math.floor(h); var ff = h - ii; var p1 = (v - s); var p2 = (v - s * ff); var p3 = (v - s * (v - ff)); var rv, gv, bv; switch(ii) { case 0: rv = v, gv = p3, bv = p1; break; case 1: rv = p2, gv = v, bv = p1; break; case 2: rv = p1, gv = v, bv = p3; break; case 3: rv = p1, gv = p2, bv = v; break; case 4: rv = p3, gv = p1, bv = v; break; default: rv = v, gv = p1, bv = p2; } var color = Math.max(0, Math.min(255, Math.round(rv * 255)))+","+Math.max(0, Math.min(255, Math.round(gv * 255)))+","+Math.max(0, Math.min(255, Math.round(bv * 255))); return "rgb("+color+")"; } <canvas id="world" width="440" height="440"></canvas> カラフルなタイル body { background-color: #DDDDDD; } var ctx var tiles=new Array(); var mark=null; var isDown=false; var mx; var my; $(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 < 14; i++) { var xx = i * 27 + (i+1) * 4; for (var j = 0; j < 14; j++) { var yy = j * 27 + (j + 1) * 4; var t = new Tile(); t.x = xx + t.W / 2; t.y = yy + t.H / 2; tiles[tiles.length]=t; } } for (i = 0; i < 14; i++) { for (j = 0; j < 14; j++) { var tt = tiles[i * 14 + j]; if (j > 0) tt.neigh[0]=tiles[i * 14 + j - 1]; if (j < 13)tt.neigh[1]=tiles[i * 14 + j + 1]; if (i > 0) tt.neigh[2]=tiles[(i-1) * 14 + j]; if (i < 13)tt.neigh[3]=tiles[(i+1) * 14 + j]; } } var timer = setInterval("update()", 10); }); var Tile=function(){ this.x=0; this.y=0; this.sel = false; this.W = 27; this.H = 27; this.deg = 0; this.d = 27; this.rot = 0; this.neigh=new Array(4); 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.rollOver=function(){ this.sel = true; this.d = 1; this.check(1, false); }; this.mouseDown=function(){ this.sel = true; this.d = 1; this.check(3, 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 (b && t.rot % 180 == 0) t.rot += 5; 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.rotate(this.rot/180*Math.PI); ctx.beginPath(); ctx.fillStyle=getColor(this.deg,0.9,1.0); ctx.fillRect(-this.W/2, -this.H/2, this.W, this.H); ctx.closePath(); if(this.sel||this.rot%180!=0){ this.rot +=5; this.sel=false; this.deg=(this.deg+1)%360; } if(this.d<this.W){ ctx.beginPath(); ctx.fillStyle=getColor(this.deg,0.5,1.0); ctx.fillRect(-this.d/2, -this.d/2, this.d, this.d); 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<tiles.length;i++){ if(tiles[i].contain(mx,my)){ if(mark!=tiles[i]){ mark=tiles[i]; mark.rollOver(); } } tiles[i].update(ctx); } } function getColor(i, s, v){ var h = i / 60; var ii = Math.floor(h); var ff = h - ii; var p1 = (v - s); var p2 = (v - s * ff); var p3 = (v - s * (v - ff)); var rv, gv, bv; switch(ii) { case 0: rv = v, gv = p3, bv = p1; break; case 1: rv = p2, gv = v, bv = p1; break; case 2: rv = p1, gv = v, bv = p3; break; case 3: rv = p1, gv = p2, bv = v; break; case 4: rv = p3, gv = p1, bv = v; break; default: rv = v, gv = p1, bv = p2; } var color = Math.max(0, Math.min(255, Math.round(rv * 255)))+","+Math.max(0, Math.min(255, Math.round(gv * 255)))+","+Math.max(0, Math.min(255, Math.round(bv * 255))); return "rgb("+color+")"; } <canvas id="world" width="440" height="440"></canvas> body { background-color: #DDDDDD; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/mPB1/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/termat/mPB1" title="カラフルなタイル">カラフルなタイル - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Favorite by 8th713 paq sugyan clockmaker matsu4513 kswbr_mshr matsu4512 siouxcitizen.. zamiang mumoshu os0x 5509 gakkaridesu madflash: 綺麗 m1m0r1: きゃわいい Forked sort new page view favorite forked forked from: カラフルなタイル kanan 00 203views 146/1/1 forked from: カラフルなタイルー音なしテノ○オン.. kswbr_mshr 20 2585views 181/1/1 question forked from: カラフルなタイル kswbr_mshr 26 2582views 171/1/1 TrigonometricFunction canvas jquery forked from: カラフルなタイル kazu2008 00 261views 146/1/1
