HTML5¼¼Êõ

×Ô¼ºÐ´µÄHTML5 Canvas + JavascriptÎå×ÓÆå - Ç⺤

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£ºH5Ö®¼Ò 2016-10-31 13:00 ÎÒÒªÆÀÂÛ( )

¿´µ½Ò»Ð©Ôø¾­Ö»»á¹àË®µÄÍøÓÑ£¬ÔÚѧϰÁËÇ°¶ËÖ®ºó£¬ÒѾ­ÄÜд³öÏÂÔØÁ¿¼¸Ç§¼¸ÍòµÄ½Å±¾¡¢Ñùʽ£¬°ïÖú´óÖÚ£¬³ÉΪÊÜ»¶Ó­µÄÈË£¬¸Ð¾õÂúÏÛĽµÄ¡£ÎÒÒ²Ïëѧ»áÇ°¶Ë¼¼Êõ£¬±äµÃÊÜ»¶Ó­Ñ½¡£ÓÚÊÇÐÄѪÀ´³±£¬¿ªÊ¼Ñ§Ï°Ç°¶Ë֪ʶ£¬²¢Ð´ÏÂÁËÕâ¸öСÁ·Ï°¡£ »ù±¾Ë¼Â·ÊÇÕâÑùµÄ£º Ч¹ûͼ£º

¿´µ½Ò»Ð©Ôø¾­Ö»»á¹àË®µÄÍøÓÑ£¬ÔÚѧϰÁËÇ°¶ËÖ®ºó£¬ÒѾ­ÄÜд³öÏÂÔØÁ¿¼¸Ç§¼¸ÍòµÄ½Å±¾¡¢Ñùʽ£¬°ïÖú´óÖÚ£¬³ÉΪÊÜ»¶Ó­µÄÈË£¬¸Ð¾õÂúÏÛĽµÄ¡£ÎÒÒ²Ïëѧ»áÇ°¶Ë¼¼Êõ£¬±äµÃÊÜ»¶Ó­Ñ½¡£ÓÚÊÇÐÄѪÀ´³±£¬¿ªÊ¼Ñ§Ï°Ç°¶Ë֪ʶ£¬²¢Ð´ÏÂÁËÕâ¸öСÁ·Ï°¡£

»ù±¾Ë¼Â·ÊÇÕâÑùµÄ£º

¡¡¡¡Ð§¹ûͼ£º

¡¡¡¡

 

´úÂëÈçÏ£º

Îå×ÓÆåÄúµÄä¯ÀÀÆ÷²»Ö§³Ö HTML5 canvas ±êÇ©¡£ÖØÖà { , , Array(), Array(), , , , (){ .round; .round){ ; .blackTable) ; 25 } 26 else{ ; .whiteTable) ; 30 } 31 }, (table){ Array(); Array(); Array(); Array(); ; ) { ) 40 { n; n; n; n; .col){ table[x][y]; 47 } .row){ table[x][y]; 50 } 51 } .inBounds(y2)){ table[x1][y2]; 54 } .inBounds(y1)){ table[x1][y1]; 57 } .inBounds(y1)){ table[x2][y1]; 60 } .inBounds(y2)){ table[x2][y2]; 63 } ; 65 } .row); .col); .row); .row); 70 }, (i){ ){ ; 74 } 75 else{ ; 77 } 78 }, (array, pos){ ; ; ){ .inBounds(pos)){ ; ; 86 } 87 else{ 88 break; 89 } 90 } ){ .inBounds(pos)){ ; ; 95 } 96 else{ 97 break; 98 } 99 } ){ ; 102 this.gameOver(); 103 } 104 }, (x, y){ ratio; ratio; .col]; ){ ; 111 } 112 else{ ; 114 } 115 }, (){ ; ; .round){ ); 121 } 122 else{ ); 124 } 125 }, (){ ; ; ; 130 this.drawBoard(); ) { Array(); Array(); ) { ; ; 137 } 138 } 139 }, (){ 141 ctx.beginPath(); ,width,width); ; ,width,width); ){ ); ratio, width); 148 ctx.stroke(); ratio); ratio); 151 ctx.stroke(); 152 } 153 }, (posX, posY){ 155 ctx.beginPath(); .color; 158 ctx.fill(); 159 ctx.stroke(); 160 } 161 }; getMousePos(canvas, evt) { canvas.getBoundingClientRect(); 165 return { rect.width), rect.height) 168 } 169 } getNode(pos){ } ); ); ; ; ratio; 180 181 controller.init(); (evt) { getMousePos(canvas, evt); getNode(mousePos.x); getNode(mousePos.y); controller.ifExsit(mousePos.x, mousePos.y); controller.over){ 189 controller.drawPiece(mousePos.x, mousePos.y); 190 controller.trans(); 191 } );

 

µãÎÒ½øÈëÔÚÏß°æ

 

ÕâËãÊÇ×Ô¼ºÑ§Ï°JavascriptµÄÒ»¸ö¿ª¶Ë£¬Î´À´µÄ»°£¬¿ÉÄÜÒ²ÒªÒÔÕâ¸öÀý×ÓΪ»ù´¡£¬ÀûÓÃѧµ½µÄ֪ʶ£¬½øÒ»²½Ôö¼ÓÆäËü¹¦ÄÜ£¬ÓÅ»¯´úÂë¡£

 

±¾ÎÄÁ´½Ó£º 

¡¡

1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

Ïà¹ØÎÄÕÂ
  • html5 ÊÖ·çÇٲ˵¥ - ÖÜÉ­

    html5 ÊÖ·çÇٲ˵¥ - ÖÜÉ­

    2016-10-29 17:00

  • HTML5ѧϰ - СÐܼªÃ×

    HTML5ѧϰ - СÐܼªÃ×

    2016-10-28 18:01

  • MVCϵÁСª¡ªMVCÔ´Âëѧϰ£º´òÔì×Ô¼ºµÄMVC¿ò¼Ü£¨Ò»£© - ÀÁµÃ°²·Ö

    MVCϵÁСª¡ªMVCÔ´Âëѧϰ£º´òÔì×Ô¼ºµÄMVC¿ò¼Ü£¨Ò»£© - ÀÁµÃ°²·Ö

    2016-10-27 13:00

  • HTML5 WebSocket - Roberter

    HTML5 WebSocket - Roberter

    2016-10-25 16:00

ÍøÓѵãÆÀ
â