jQuery实现简单五子棋游戏
作者：zhumengstyle
这篇文章主要为大家详细介绍了jQuery实现简单五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现五子棋游戏的具体代码，供大家参考，具体内容如下
五子棋小游戏实现的基本思路：
以15*15标准面板为棋盘布局，黑白棋子交替下棋。每落下一枚棋子就判断横向，竖向，左斜向，右斜向这四种方向上是否存在和该子颜色相同并且组成了连续五子的情况，如果存在，则提示赢棋，否则继续下棋。
<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)"){
//该位置已经下了白棋子
//$(this).css({"background-color":"#868686","border-radius":"0px 0px 0px 0px"});
return false;
}
if($(this).css("background-color")=="rgb(0, 0, 0)"){
//该位置已经下了黑棋子
return false;
}
state_toggle++;
if(state_toggle%2==1){
//奇数(黑棋)
$(this).css({"background-color":"black","border-radius":"50px 50px 50px 50px"});
$(this).html('－');
}else{
//偶数(白棋)
$(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个连续的位置
//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个连续的位置
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个连续的位置
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个连续的位置
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());
}
//验证是否是连续的五子
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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。