jQuery實現(xiàn)簡單五子棋游戲
更新時間:2022年05月09日 10:52:43 作者:zhumengstyle
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單五子棋游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)五子棋游戲的具體代碼,供大家參考,具體內(nèi)容如下
五子棋小游戲?qū)崿F(xiàn)的基本思路:
以15*15標準面板為棋盤布局,黑白棋子交替下棋。每落下一枚棋子就判斷橫向,豎向,左斜向,右斜向這四種方向上是否存在和該子顏色相同并且組成了連續(xù)五子的情況,如果存在,則提示贏棋,否則繼續(xù)下棋。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <style> ?? ?td{ ?? ??? ?border:1px solid #ccc; ?? ??? ?width:60px; ?? ??? ?height:60px; ?? ?} </style> </head> <body> <table style="border:1px solid #2e6377;background-color:#868686;text-align:center" border="1px"> ?? ?<tr> ?? ??? ?<td weizhi="1-15"></td> ?? ??? ?<td weizhi="2-15"></td> ?? ??? ?<td weizhi="3-15"></td> ?? ??? ?<td weizhi="4-15"></td> ?? ??? ?<td weizhi="5-15"></td> ?? ??? ?<td weizhi="6-15"></td> ?? ??? ?<td weizhi="7-15"></td> ?? ??? ?<td weizhi="8-15"></td> ?? ??? ?<td weizhi="9-15"></td> ?? ??? ?<td weizhi="10-15"></td> ?? ??? ?<td weizhi="11-15"></td> ?? ??? ?<td weizhi="12-15"></td> ?? ??? ?<td weizhi="13-15"></td> ?? ??? ?<td weizhi="14-15"></td> ?? ??? ?<td weizhi="15-15"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-14"></td> ?? ??? ?<td weizhi="2-14"></td> ?? ??? ?<td weizhi="3-14"></td> ?? ??? ?<td weizhi="4-14"></td> ?? ??? ?<td weizhi="5-14"></td> ?? ??? ?<td weizhi="6-14"></td> ?? ??? ?<td weizhi="7-14"></td> ?? ??? ?<td weizhi="8-14"></td> ?? ??? ?<td weizhi="9-14"></td> ?? ??? ?<td weizhi="10-14"></td> ?? ??? ?<td weizhi="11-14"></td> ?? ??? ?<td weizhi="12-14"></td> ?? ??? ?<td weizhi="13-14"></td> ?? ??? ?<td weizhi="14-14"></td> ?? ??? ?<td weizhi="15-14"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-13"></td> ?? ??? ?<td weizhi="2-13"></td> ?? ??? ?<td weizhi="3-13"></td> ?? ??? ?<td weizhi="4-13"></td> ?? ??? ?<td weizhi="5-13"></td> ?? ??? ?<td weizhi="6-13"></td> ?? ??? ?<td weizhi="7-13"></td> ?? ??? ?<td weizhi="8-13"></td> ?? ??? ?<td weizhi="9-13"></td> ?? ??? ?<td weizhi="10-13"></td> ?? ??? ?<td weizhi="11-13"></td> ?? ??? ?<td weizhi="12-13"></td> ?? ??? ?<td weizhi="13-13"></td> ?? ??? ?<td weizhi="14-13"></td> ?? ??? ?<td weizhi="15-13"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-12"></td> ?? ??? ?<td weizhi="2-12"></td> ?? ??? ?<td weizhi="3-12"></td> ?? ??? ?<td weizhi="4-12"></td> ?? ??? ?<td weizhi="5-12"></td> ?? ??? ?<td weizhi="6-12"></td> ?? ??? ?<td weizhi="7-12"></td> ?? ??? ?<td weizhi="8-12"></td> ?? ??? ?<td weizhi="9-12"></td> ?? ??? ?<td weizhi="10-12"></td> ?? ??? ?<td weizhi="11-12"></td> ?? ??? ?<td weizhi="12-12"></td> ?? ??? ?<td weizhi="13-12"></td> ?? ??? ?<td weizhi="14-12"></td> ?? ??? ?<td weizhi="15-12"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-11"></td> ?? ??? ?<td weizhi="2-11"></td> ?? ??? ?<td weizhi="3-11"></td> ?? ??? ?<td weizhi="4-11"></td> ?? ??? ?<td weizhi="5-11"></td> ?? ??? ?<td weizhi="6-11"></td> ?? ??? ?<td weizhi="7-11"></td> ?? ??? ?<td weizhi="8-11"></td> ?? ??? ?<td weizhi="9-11"></td> ?? ??? ?<td weizhi="10-11"></td> ?? ??? ?<td weizhi="11-11"></td> ?? ??? ?<td weizhi="12-11"></td> ?? ??? ?<td weizhi="13-11"></td> ?? ??? ?<td weizhi="14-11"></td> ?? ??? ?<td weizhi="15-11"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-10"></td> ?? ??? ?<td weizhi="2-10"></td> ?? ??? ?<td weizhi="3-10"></td> ?? ??? ?<td weizhi="4-10"></td> ?? ??? ?<td weizhi="5-10"></td> ?? ??? ?<td weizhi="6-10"></td> ?? ??? ?<td weizhi="7-10"></td> ?? ??? ?<td weizhi="8-10"></td> ?? ??? ?<td weizhi="9-10"></td> ?? ??? ?<td weizhi="10-10"></td> ?? ??? ?<td weizhi="11-10"></td> ?? ??? ?<td weizhi="12-10"></td> ?? ??? ?<td weizhi="13-10"></td> ?? ??? ?<td weizhi="14-10"></td> ?? ??? ?<td weizhi="15-10"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-9"></td> ?? ??? ?<td weizhi="2-9"></td> ?? ??? ?<td weizhi="3-9"></td> ?? ??? ?<td weizhi="4-9"></td> ?? ??? ?<td weizhi="5-9"></td> ?? ??? ?<td weizhi="6-9"></td> ?? ??? ?<td weizhi="7-9"></td> ?? ??? ?<td weizhi="8-9"></td> ?? ??? ?<td weizhi="9-9"></td> ?? ??? ?<td weizhi="10-9"></td> ?? ??? ?<td weizhi="11-9"></td> ?? ??? ?<td weizhi="12-9"></td> ?? ??? ?<td weizhi="13-9"></td> ?? ??? ?<td weizhi="14-9"></td> ?? ??? ?<td weizhi="15-9"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-8"></td> ?? ??? ?<td weizhi="2-8"></td> ?? ??? ?<td weizhi="3-8"></td> ?? ??? ?<td weizhi="4-8"></td> ?? ??? ?<td weizhi="5-8"></td> ?? ??? ?<td weizhi="6-8"></td> ?? ??? ?<td weizhi="7-8"></td> ?? ??? ?<td weizhi="8-8"></td> ?? ??? ?<td weizhi="9-8"></td> ?? ??? ?<td weizhi="10-8"></td> ?? ??? ?<td weizhi="11-8"></td> ?? ??? ?<td weizhi="12-8"></td> ?? ??? ?<td weizhi="13-8"></td> ?? ??? ?<td weizhi="14-8"></td> ?? ??? ?<td weizhi="15-8"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-7"></td> ?? ??? ?<td weizhi="2-7"></td> ?? ??? ?<td weizhi="3-7"></td> ?? ??? ?<td weizhi="4-7"></td> ?? ??? ?<td weizhi="5-7"></td> ?? ??? ?<td weizhi="6-7"></td> ?? ??? ?<td weizhi="7-7"></td> ?? ??? ?<td weizhi="8-7"></td> ?? ??? ?<td weizhi="9-7"></td> ?? ??? ?<td weizhi="10-7"></td> ?? ??? ?<td weizhi="11-7"></td> ?? ??? ?<td weizhi="12-7"></td> ?? ??? ?<td weizhi="13-7"></td> ?? ??? ?<td weizhi="14-7"></td> ?? ??? ?<td weizhi="15-7"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-6"></td> ?? ??? ?<td weizhi="2-6"></td> ?? ??? ?<td weizhi="3-6"></td> ?? ??? ?<td weizhi="4-6"></td> ?? ??? ?<td weizhi="5-6"></td> ?? ??? ?<td weizhi="6-6"></td> ?? ??? ?<td weizhi="7-6"></td> ?? ??? ?<td weizhi="8-6"></td> ?? ??? ?<td weizhi="9-6"></td> ?? ??? ?<td weizhi="10-6"></td> ?? ??? ?<td weizhi="11-6"></td> ?? ??? ?<td weizhi="12-6"></td> ?? ??? ?<td weizhi="13-6"></td> ?? ??? ?<td weizhi="14-6"></td> ?? ??? ?<td weizhi="15-6"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-5"></td> ?? ??? ?<td weizhi="2-5"></td> ?? ??? ?<td weizhi="3-5"></td> ?? ??? ?<td weizhi="4-5"></td> ?? ??? ?<td weizhi="5-5"></td> ?? ??? ?<td weizhi="6-5"></td> ?? ??? ?<td weizhi="7-5"></td> ?? ??? ?<td weizhi="8-5"></td> ?? ??? ?<td weizhi="9-5"></td> ?? ??? ?<td weizhi="10-5"></td> ?? ??? ?<td weizhi="11-5"></td> ?? ??? ?<td weizhi="12-5"></td> ?? ??? ?<td weizhi="13-5"></td> ?? ??? ?<td weizhi="14-5"></td> ?? ??? ?<td weizhi="15-5"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-4"></td> ?? ??? ?<td weizhi="2-4"></td> ?? ??? ?<td weizhi="3-4"></td> ?? ??? ?<td weizhi="4-4"></td> ?? ??? ?<td weizhi="5-4"></td> ?? ??? ?<td weizhi="6-4"></td> ?? ??? ?<td weizhi="7-4"></td> ?? ??? ?<td weizhi="8-4"></td> ?? ??? ?<td weizhi="9-4"></td> ?? ??? ?<td weizhi="10-4"></td> ?? ??? ?<td weizhi="11-4"></td> ?? ??? ?<td weizhi="12-4"></td> ?? ??? ?<td weizhi="13-4"></td> ?? ??? ?<td weizhi="14-4"></td> ?? ??? ?<td weizhi="15-4"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-3"></td> ?? ??? ?<td weizhi="2-3"></td> ?? ??? ?<td weizhi="3-3"></td> ?? ??? ?<td weizhi="4-3"></td> ?? ??? ?<td weizhi="5-3"></td> ?? ??? ?<td weizhi="6-3"></td> ?? ??? ?<td weizhi="7-3"></td> ?? ??? ?<td weizhi="8-3"></td> ?? ??? ?<td weizhi="9-3"></td> ?? ??? ?<td weizhi="10-3"></td> ?? ??? ?<td weizhi="11-3"></td> ?? ??? ?<td weizhi="12-3"></td> ?? ??? ?<td weizhi="13-3"></td> ?? ??? ?<td weizhi="14-3"></td> ?? ??? ?<td weizhi="15-3"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-2"></td> ?? ??? ?<td weizhi="2-2"></td> ?? ??? ?<td weizhi="3-2"></td> ?? ??? ?<td weizhi="4-2"></td> ?? ??? ?<td weizhi="5-2"></td> ?? ??? ?<td weizhi="6-2"></td> ?? ??? ?<td weizhi="7-2"></td> ?? ??? ?<td weizhi="8-2"></td> ?? ??? ?<td weizhi="9-2"></td> ?? ??? ?<td weizhi="10-2"></td> ?? ??? ?<td weizhi="11-2"></td> ?? ??? ?<td weizhi="12-2"></td> ?? ??? ?<td weizhi="13-2"></td> ?? ??? ?<td weizhi="14-2"></td> ?? ??? ?<td weizhi="15-2"></td> ?? ?</tr> ?? ?<tr> ?? ??? ?<td weizhi="1-1"></td> ?? ??? ?<td weizhi="2-1"></td> ?? ??? ?<td weizhi="3-1"></td> ?? ??? ?<td weizhi="4-1"></td> ?? ??? ?<td weizhi="5-1"></td> ?? ??? ?<td weizhi="6-1"></td> ?? ??? ?<td weizhi="7-1"></td> ?? ??? ?<td weizhi="8-1"></td> ?? ??? ?<td weizhi="9-1"></td> ?? ??? ?<td weizhi="10-1"></td> ?? ??? ?<td weizhi="11-1"></td> ?? ??? ?<td weizhi="12-1"></td> ?? ??? ?<td weizhi="13-1"></td> ?? ??? ?<td weizhi="14-1"></td> ?? ??? ?<td weizhi="15-1"></td> ?? ?</tr> </table> <!--JS部分--> <script> $(document).ready(function(){ ?? ?var state_toggle=1; ?? ?$("td").click(function(){ ?? ??? ?if($(this).css("background-color")=="rgb(255, 255, 255)"){ ?? ??? ??? ?//該位置已經(jīng)下了白棋子 ?? ??? ??? ?//$(this).css({"background-color":"#868686","border-radius":"0px 0px 0px 0px"}); ?? ??? ??? ?return false; ?? ??? ?} ?? ??? ?if($(this).css("background-color")=="rgb(0, 0, 0)"){ ?? ??? ??? ?//該位置已經(jīng)下了黑棋子 ?? ??? ??? ?return false; ?? ??? ?} ?? ??? ?state_toggle++; ?? ??? ?if(state_toggle%2==1){ ?? ??? ??? ?//奇數(shù)(黑棋) ?? ??? ??? ?$(this).css({"background-color":"black","border-radius":"50px 50px 50px 50px"}); ?? ??? ??? ?$(this).html('-'); ?? ??? ?}else{ ?? ??? ??? ?//偶數(shù)(白棋) ?? ??? ??? ?$(this).css({"background-color":"white","border-radius":"50px 50px 50px 50px"}); ?? ??? ??? ?$(this).html('+'); ?? ??? ?} ?? ??? ?checkWinOrNot(this); ?? ?}) }) //判斷是否有同色的五子相連 function checkWinOrNot(obj){ ?? ?var self=obj; ?? ?var current_weizhi=$(self).attr('weizhi'); ?? ?var arr_weizhi=new Array(),checked_weizhi=new Array(); ?? ?//橫向判斷 ?? ?//---取前后4個位置,連同自身位置,一共9個位置 ?? ?var weizhi_a=current_weizhi.split('-'); ?? ?for(var a=4;a>=-4;a--){ ?? ??? ?if(weizhi_a[0]-a>0 && weizhi_a[0]-a<=15){ ?? ??? ??? ?arr_weizhi.push(weizhi_a[0]-a+'-'+weizhi_a[1]); ?? ??? ?} ?? ?} ?? ?$.each(arr_weizhi,function(index,value){ ?? ??? ?//console.log($('td[weizhi="'+value+'"]').html()); ?? ??? ?if($('td[weizhi="'+value+'"]').html() && $('td[weizhi="'+value+'"]').html()==$(self).html()){ ?? ??? ??? ?var aa=value.split('-'); ?? ??? ??? ?checked_weizhi.push(aa[0]); ?? ??? ?} ?? ?}); ?? ? ?? ?//---判斷是否為5個連續(xù)的位置 ?? ?//console.log(checked_weizhi.length==5&& parseInt(checked_weizhi[0])+1==checked_weizhi[1] && parseInt(checked_weizhi[1])+1==checked_weizhi[2] && parseInt(checked_weizhi[2])+1==checked_weizhi[3] && parseInt(checked_weizhi[3])+1==checked_weizhi[4]); ?? ?checkQiZi(checked_weizhi.length==5&& parseInt(checked_weizhi[0])+1==checked_weizhi[1] && parseInt(checked_weizhi[1])+1==checked_weizhi[2] && parseInt(checked_weizhi[2])+1==checked_weizhi[3] && parseInt(checked_weizhi[3])+1==checked_weizhi[4],$(self).html()); ?? ?//豎向判斷 ?? ?var arr_weizhi_bb=new Array(),checked_weizhi_bb=new Array(); ?? ?//---豎向取前后4個位置,連同自身位置,一共9個位置 ?? ? ?? ?for(var a=4;a>=-4;a--){ ?? ??? ?if(weizhi_a[1]-a>0 && weizhi_a[1]-a<=15){ ?? ??? ??? ?arr_weizhi_bb.push(weizhi_a[0]+'-'+(weizhi_a[1]-a)); ?? ??? ?} ?? ?} ?? ?//console.log(arr_weizhi_bb); ?? ?$.each(arr_weizhi_bb,function(index,value){ ?? ??? ?if($('td[weizhi="'+value+'"]').html() && $('td[weizhi="'+value+'"]').html()==$(self).html()){ ?? ??? ??? ?var aa=value.split('-'); ?? ??? ??? ?checked_weizhi_bb.push(aa[1]); ?? ??? ?} ?? ?}); ?? ?//console.log(checked_weizhi_bb); ?? ?//---判斷是否為5個連續(xù)的位置 ?? ?checkQiZi(checked_weizhi_bb.length==5 && parseInt(checked_weizhi_bb[0])+1==checked_weizhi_bb[1] && parseInt(checked_weizhi_bb[1])+1==checked_weizhi_bb[2] && parseInt(checked_weizhi_bb[2])+1==checked_weizhi_bb[3] && parseInt(checked_weizhi_bb[3])+1==checked_weizhi_bb[4],$(self).html()); ?? ?//左斜線判斷 ?? ?var arr_weizhi_aabb=new Array(),checked_weizhi_aabb=new Array(); ?? ?//---左斜線取前后4個位置,連同自身位置,一共9個位置 ?? ? ?? ?for(var a=4;a>=-4;a--){ ?? ??? ?if(weizhi_a[1]-a>0 && weizhi_a[1]-a<=15 && weizhi_a[0]-a>0 && weizhi_a[0]-a<=15){ ?? ??? ??? ?arr_weizhi_aabb.push((weizhi_a[0]-a)+'-'+(parseInt(weizhi_a[1])+a)); ?? ??? ?} ?? ?} ?? ?//console.log(arr_weizhi_aabb); ?? ?$.each(arr_weizhi_aabb,function(index,value){ ?? ??? ?if($('td[weizhi="'+value+'"]').html() && $('td[weizhi="'+value+'"]').html()==$(self).html()){ ?? ??? ??? ?var aa=value.split('-'); ?? ??? ??? ?checked_weizhi_aabb.push(aa[0]); ?? ??? ?} ?? ?}); ?? ?//console.log(checked_weizhi_aabb); ?? ?//---判斷是否為5個連續(xù)的位置 ?? ?checkQiZi(checked_weizhi_aabb.length==5 && parseInt(checked_weizhi_aabb[0])+1==checked_weizhi_aabb[1] && parseInt(checked_weizhi_aabb[1])+1==checked_weizhi_aabb[2] && parseInt(checked_weizhi_aabb[2])+1==checked_weizhi_aabb[3] && parseInt(checked_weizhi_aabb[3])+1==checked_weizhi_aabb[4],$(self).html()); ?? ? ?? ?//右斜線判斷 ?? ?var arr_weizhi_bbaa=new Array(),checked_weizhi_bbaa=new Array(); ?? ?//---右斜線取前后4個位置,連同自身位置,一共9個位置 ?? ?for(var a=4;a>=-4;a--){ ?? ??? ?if(weizhi_a[1]-a>0 && weizhi_a[1]-a<=15 && weizhi_a[0]-a>0 && weizhi_a[0]-a<=15){ ?? ??? ??? ?arr_weizhi_bbaa.push((weizhi_a[0]-a)+'-'+(parseInt(weizhi_a[1])-a)); ?? ??? ?} ?? ?} ?? ?//console.log(arr_weizhi_bbaa); ?? ?$.each(arr_weizhi_bbaa,function(index,value){ ?? ??? ?if($('td[weizhi="'+value+'"]').html() && $('td[weizhi="'+value+'"]').html()==$(self).html()){ ?? ??? ??? ?var aa=value.split('-'); ?? ??? ??? ?checked_weizhi_bbaa.push(aa[0]); ?? ??? ?} ?? ?}); ?? ?console.log(checked_weizhi_bbaa); ?? ?//---判斷是否為5個連續(xù)的位置 ?? ?checkQiZi(checked_weizhi_bbaa.length==5 && parseInt(checked_weizhi_bbaa[0])+1==checked_weizhi_bbaa[1] && parseInt(checked_weizhi_bbaa[1])+1==checked_weizhi_bbaa[2] && parseInt(checked_weizhi_bbaa[2])+1==checked_weizhi_bbaa[3] && parseInt(checked_weizhi_bbaa[3])+1==checked_weizhi_bbaa[4],$(self).html()); ?? ? } //驗證是否是連續(xù)的五子 function checkQiZi(conditions,type_val){ ?? ?if(conditions){ ?? ??? ?if(type_val=='+'){ ?? ??? ??? ?var who='白棋'; ?? ??? ?}else{ ?? ??? ??? ?var who='黑棋'; ?? ??? ?} ?? ??? ?alert(who+'勝了!'); ?? ??? ?if(confirm('重新開始游戲?')){ ?? ??? ??? ?window.location.reload(); ?? ??? ?} ?? ?} } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery中extend函數(shù)的實現(xiàn)原理詳解
這篇文章主要介紹了jQuery中extend函數(shù)的實現(xiàn)原理詳解,extend()函數(shù)用于jQuery插件的開發(fā),本文主要分析它的實現(xiàn)原理,需要的朋友可以參考下2015-02-02運用jquery實現(xiàn)table單雙行不同顯示并能單行選中
(該方法是對《運用jquery實現(xiàn)(table)單雙行不同顯示并能多行選中》的改進,適合于單行選擇)2009-07-07