һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+
̳ WEBҳǰ뿪 ǰ̨ű

Canvas ˹

[]
23943 websjy 2016-2-26 15:07:06
| ʾȫ¥
1F
֮ǰƴͼо˹ߴ˺ܶ࣬оȽϺĵ뷨Ȱƶеķȥжܷƶ

ƶƶƶת



  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.         *{margin:0;padding:0;}
  6.         body{overflow:hidden;}
  7.         canvas{display:block;border:1px solid #ccc;margin:10px auto;}
  8.         input[type='button']{width:100px;height:30px;line-height:30px;cursor:pointer;}
  9. </style>
  10. </head>
  11. <body>
  12. <canvas id="canvas1" width="450" height="600">֧HTML5</canvas>
  13. <div style="height:50px;text-align:center;line-height:50px;">
  14.         <input id="stop" type="button" value="ʼ" >
  15.         <input id="restart" type="button" value="¿ʼ" style="display:none;float:right;margin-top:10px;" >
  16. </div>
  17. <script>
  18. window.onload = function(){
  19.         var cvs = document.getElementById('canvas1');
  20.         var ctx = cvs.getContext("2d");
  21.        
  22.         var contarr = [];//Ҫ
  23.         var nowrect = [];//˶ķ
  24.         var nextrect = [];//һ
  25.         var num = 0;//
  26.         var timeline;//ʱ
  27.         var stop = true;//Ƿͣ
  28.         var speed = 400;//ٶ /
  29.         var createRect = [[
  30.                         [0,0,0,0],
  31.                         [0,0,0,0],
  32.                         [1,1,1,1],
  33.                         [0,0,0,0]
  34.                 ],[
  35.                         [0,0,0,0],
  36.                         [0,1,1,0],
  37.                         [0,1,1,0],
  38.                         [0,0,0,0]
  39.                 ],[
  40.                         [0,0,0,0],
  41.                         [1,1,1,0],
  42.                         [0,1,0,0],
  43.                         [0,0,0,0]
  44.                 ],[
  45.                         [0,1,1,0],
  46.                         [0,1,0,0],
  47.                         [0,1,0,0],
  48.                         [0,0,0,0]
  49.                 ],[
  50.                         [0,1,1,0],
  51.                         [0,0,1,0],
  52.                         [0,0,1,0],
  53.                         [0,0,0,0]
  54.                 ],[
  55.                         [0,1,0,0],
  56.                         [0,1,1,0],
  57.                         [0,0,1,0],
  58.                         [0,0,0,0]
  59.                 ],[
  60.                         [0,0,1,0],
  61.                         [0,1,1,0],
  62.                         [0,1,0,0],
  63.                         [0,0,0,0]
  64.                 ],[
  65.                         [0,1,0,0],
  66.                         [0,1,0,0],
  67.                         [0,1,0,0],
  68.                         [0,1,0,0]
  69.                 ]];
  70.         //ʼ
  71.         init();
  72.         function init(){
  73.                 contarr = [];
  74.                 nowrect = [];
  75.                 nextrect = [];
  76.                 num = 0;
  77.                 timeline = null;
  78.                 stop = true;
  79.                 //ӱ
  80.                 ctx.fillStyle = "#000000";
  81.                 ctx.strokeStyle = "#ffffff";
  82.                 ctx.fillRect(0,0,450,600);
  83.                 ctx.clearRect(20,25,275,550);
  84.                 ctx.fillStyle = "#ffffff";
  85.                 ctx.font = "20px ";
  86.                 ctx.textAlign = "left";
  87.                 ctx.fillText("һ:",325,50,100);
  88.                 ctx.clearRect(325,70,100,100);
  89.                 ctx.fillText("÷:",325,260,100);
  90.                 ctx.fillText("0",325,300,100);
  91.                 ctx.strokeStyle = "#cccccc";
  92.                 ctx.lineWidth = 1;
  93.                 ctx.fillStyle = "#3A70A3";
  94.                 //Ҫ
  95.                 for(var i=0;i<22;i++){
  96.                         var arr = [];
  97.                         for(var j=0;j<11;j++){arr.push(0);};
  98.                         contarr.push(arr);
  99.                 }
  100.                 contdraw();
  101.                 rectdraw();
  102.                 //ͣ
  103.                 document.getElementById("stop").onclick = function(){
  104.                         document.getElementById("restart").style.display = 'block';
  105.                         if(stop){
  106.                                 timeline = setInterval(function(){move(0,1);},speed);
  107.                                 this.value = "ͣ";
  108.                         }else{
  109.                                 clearInterval(timeline);
  110.                                 this.value = "ʼ";
  111.                         }
  112.                         stop = !stop;
  113.                 }
  114.                 //¿ʼ
  115.                 document.getElementById("restart").onclick = function(){
  116.                         clearInterval(timeline);
  117.                         document.getElementById("stop").value = "ʼ";
  118.                         init();
  119.                 }
  120.                 //¼
  121.                 document.onkeyup=function(event){
  122.                         var e = event || window.event || arguments.callee.caller.arguments[0];
  123.                         if(e && e.keyCode==37){//left
  124.                                 move(-1,0);
  125.                         }else if(e && e.keyCode == 39){//right
  126.                                 move(1,0);
  127.                         }else if(e && e.keyCode == 40){//down
  128.                                 move(0,1);
  129.                         }else if(e && e.keyCode == 38){//upת
  130.                                 rotate();
  131.                         }
  132.         };
  133.         };
  134.         //ת
  135.         function rotate(){
  136.                 //
  137.                 for(var i=0;i<nowrect.length;i++){
  138.                         for(var j=0;j<nowrect[i].length;j++){
  139.                                 if(nowrect[i][j]){
  140.                                         var px = 20+(j+nowrect.left)*25;
  141.                                         var py = 25+(i+nowrect.top)*25;
  142.                                         if(!(i+nowrect.top<0)){
  143.                                                 contarr[i+nowrect.top][j+nowrect.left] = 0;
  144.                                         };                                               
  145.                                 }
  146.                         }
  147.                 }
  148.                 //ת״
  149.                 var rot = [];
  150.                 var saver;
  151.                 for(var i=0;i<nowrect.length;i++){rot.unshift([]);}
  152.                 for(i=0;i<nowrect.length;i++){
  153.                         for(var j=0;j<nowrect[i].length;j++){
  154.                                 rot[j].unshift(nowrect[i][j]);
  155.                         }
  156.                 }
  157.                 rot.left = nowrect.left;
  158.                 rot.top = nowrect.top;
  159.                 saver = nowrect;
  160.                 nowrect = rot;
  161.                 //תnowrect
  162.                 if(ifmove(0,0)!=1){nowrect = saver;}
  163.                 for(i=0;i<nowrect.length;i++){
  164.                         for(j=0;j<nowrect[i].length;j++){
  165.                                 if(i+nowrect.top<0){continue;}
  166.                                 if(nowrect[i][j]){
  167.                                         contarr[i+nowrect.top][j+nowrect.left] = 1;
  168.                                 }
  169.                         }
  170.                 }
  171.                 contdraw();
  172.         }
  173.         //ƶ
  174.         function move(mx,my){
  175.                 //еĵǰ
  176.                 for(var i=0;i<nowrect.length;i++){
  177.                         for(var j=0;j<nowrect[i].length;j++){
  178.                                 if(nowrect[i][j]){
  179.                                         var px = 20+(j+nowrect.left)*25;
  180.                                         var py = 25+(i+nowrect.top)*25;
  181.                                         if(!(i+nowrect.top<0)){
  182.                                                 contarr[i+nowrect.top][j+nowrect.left] = 0;
  183.                                         };                                       
  184.                                 }
  185.                         }
  186.                 }
  187.                 var state = ifmove(mx,my);
  188.                 if(state){//ƶ top,left += my,mx
  189.                         if(state !=2){
  190.                                 nowrect.top += my;
  191.                                 nowrect.left += mx;
  192.                         }
  193.                         for(i=0;i<nowrect.length;i++){
  194.                                 for(j=0;j<nowrect[i].length;j++){
  195.                                         if(i+nowrect.top<0){continue;}
  196.                                         if(nowrect[i][j]){
  197.                                                 contarr[i+nowrect.top][j+nowrect.left] = 1;
  198.                                         }
  199.                                 }
  200.                         }
  201.                 }else{//ԭλ÷飬жͽ
  202.                         for(i=0;i<nowrect.length;i++){
  203.                                 for(j=0;j<nowrect[i].length;j++){
  204.                                         if(i+nowrect.top<0){continue;}
  205.                                         if(nowrect[i][j]){
  206.                                                 contarr[i+nowrect.top][j+nowrect.left] = 1;
  207.                                         }
  208.                                 }
  209.                         }
  210.                         var clr = [];
  211.                         for(i=0;i<contarr.length;i++){
  212.                                 var boo = 0;
  213.                                 for(j=0;j<contarr[i].length;j++){
  214.                                         if(contarr[i][j]){boo++}
  215.                                 }
  216.                                 if(boo==11){
  217.                                         num += 100;fraction(num);
  218.                                         clr.push(i);
  219.                                 }
  220.                         }
  221.                         //
  222.                         for(i=0;i<clr.length;i++){
  223.                                 var id = clr.length-i-1;
  224.                                 contarr.splice(clr[id],1);
  225.                         }
  226.                         for(i=0;i<clr.length;i++){
  227.                                 var n = [];
  228.                                 for(j=0;j<contarr[0].length;j++){n.push(0);}
  229.                                 contarr.unshift(n);
  230.                         }
  231.                         //Ϸ
  232.                         for(i=0;i<contarr[0].length;i++){if(contarr[0][i]){alert("Ϸ");clearInterval(timeline);return false;}}
  233.                         rectdraw();
  234.                 }
  235.                 contdraw();
  236.         }
  237.         //жǷƶ
  238.         function ifmove(mx,my){
  239.                 var boo = 1;
  240.                 for(var i=0;i<nowrect.length;i++){
  241.                         for(var j=0;j<nowrect[i].length;j++){
  242.                                 if(nowrect[i][j]){
  243.                                         var px = j+nowrect.left+mx;
  244.                                         var py = i+nowrect.top+my;
  245.                                         if(px<0){return 2;}
  246.                                         if(px>10){return 2;}
  247.                                         if(py<0){continue;}
  248.                                         if(py>21){return 0;}
  249.                                         var fr = contarr[py][px];
  250.                                         if(fr!=0){
  251.                                                 if(mx==0){return 0;}
  252.                                                 if(my==0){return 2;}
  253.                                         }
  254.                                 }
  255.                         }
  256.                 }
  257.                 // 0²ƶ1ƶ2Ҳƶ
  258.                 return boo;
  259.         }
  260.         //ƴ
  261.         function rectdraw(){
  262.                 if(nextrect.length == 0){
  263.                         nowrect = Box();
  264.                 }else{
  265.                         nowrect = nextrect;
  266.                 }
  267.                 nowrect.top = -4;
  268.                 nowrect.left = 4;
  269.                 nextrect = Box();
  270.                 for(var i=0;i<nextrect.length;i++){
  271.                         for(var j=0;j<nextrect[i].length;j++){
  272.                                 var wx = 325+(j*25);
  273.                                 var wy = 70+(i*25);
  274.                                 ctx.clearRect(wx,wy,25,25);
  275.                                 if(nextrect[i][j]){
  276.                                         ctx.strokeRect(wx,wy,25,25);
  277.                                         ctx.fillRect(wx+1,wy+1,23,23);
  278.                                 }else{
  279.                                         ctx.strokeRect(wx,wy,25,25);
  280.                                 }
  281.                         }
  282.                 }
  283.         }
  284.         //
  285.         function contdraw(){
  286.                 for(var i=0;i<contarr.length;i++){
  287.                         for(var j=0;j<contarr[i].length;j++){
  288.                                 var wx = 20+(j*25);
  289.                                 var wy = 25+(i*25);
  290.                                 ctx.clearRect(wx,wy,25,25);
  291.                                 if(contarr[i][j]){
  292.                                         ctx.fillRect(wx+1,wy+1,23,23);
  293.                                 }else{
  294.                                         ctx.strokeRect(wx,wy,25,25);
  295.                                 }
  296.                         }
  297.                 }
  298.         };
  299.         //޸ķ
  300.         function fraction(num){
  301.                 var fillcolor = ctx.fillStyle;
  302.                 ctx.fillStyle = "#000000";
  303.                 ctx.fillRect(325,280,100,20);
  304.                 ctx.fillStyle = "#ffffff";
  305.                 ctx.fillText(num,325,300,100);
  306.                 ctx.fillStyle = fillcolor;
  307.         };
  308.         //״
  309.         function Box(){
  310.                 var len = createRect.length;
  311.                 var rtvalue = createRect[parseInt(Math.random()*len)];
  312.                 return rtvalue;
  313.         }
  314. }
  315. </script>
  316. </body>
  317. </html>
ƴ

ƴ뵽пʾhttp://www.websjy.com/bbs/html.html

аԴ

Ҫ ¼ ſػ鿴ûʺţע  

x
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
fhuj3d96 2016-12-27 09:37:28
| ʾȫ¥
2F
Ҫ֧£~~
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
fhuj3d96 2017-1-8 10:48:42
| ʾȫ¥
3F
һ°~ ټĺ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
sanyu789 2017-11-3 17:44:59
| ʾȫ¥
4F
www   kmpmb  com
ս

ֱȫֻһֻԴӪרҵ󳡿AN8192ǿ. 9220ǿ6140 785 ǿ ˫ڿ˾ӪйܵǰԤƷ֧ᣬޣ١Ҫ߿ɵ13129739899΢ͬ

ڿ;200MH/s (ETH )  2500Sol/s (Zcash )  5890H/s( XMR )
й:
ETH 1150W
ZEC 1100W
XMR 1120W
ԴЧ:ս1600W (93%תʣ25'C¶)
ѹ;12.4-12.6V
Կ;NVIDIANP106 X9
Դ:ÿ̨76PinڶҪӣƼʹöԴ
ϵͳߴ;530L*320W* 165H mm
ϵͳ;9.1kg
;10xFan
'C to 50'C
ʪ:5%-95% RH
CPU:intel Celeron 3215U @1.70GHz
ڴ:4GB
Ӳ:64GB SSD
ϵͳ:win10 64bit
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2017-11-22 22:47

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б