iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery实现简单五子棋游戏
  • 467

0
分享到

jQuery实现简单五子棋游戏

2024-04-02 19:04:59 467人浏览 安东尼
摘要

本文实例为大家分享了Jquery实现五子棋游戏的具体代码，供大家参考，具体内容如下 五子棋小游戏实现的基本思路： 以15*15标准面板为棋盘布局，黑白棋子交替下棋。每落下一枚棋子就判

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jQuery实现简单五子棋游戏

本文链接: https://www.lsjlt.com/news/148286.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • jQuery实现简单五子棋游戏
    本文实例为大家分享了jQuery实现五子棋游戏的具体代码，供大家参考，具体内容如下 五子棋小游戏实现的基本思路： 以15*15标准面板为棋盘布局，黑白棋子交替下棋。每落下一枚棋子就判...
    99+
    2024-04-02
  • QT实现简单五子棋游戏
    本文实例为大家分享了QT实现简单五子棋游戏的具体代码，供大家参考，具体内容如下 FIR.pro #----------------------------------------...
    99+
    2024-04-02
  • pygame实现简单五子棋游戏
    本文实例为大家分享了pygame实现简单五子棋游戏的具体代码，供大家参考，具体内容如下 看代码： ①Gomuku2.py： import sys import random impo...
    99+
    2024-04-02
  • java实现简单的五子棋游戏
    目录一、主要界面二、功能概况三、代码部分四、部分效果展示本文实例为大家分享了java实现简单五子棋游戏的具体代码，供大家参考，具体内容如下 一、主要界面 1、登录界面；2、游戏选择界...
    99+
    2024-04-02
  • python实现简单五子棋小游戏
    用python实现五子棋简单人机模式的练习过程，供大家参考，具体内容如下 最近在初学python，今天就用自己的一些粗浅理解，来记录一下这几天的python简单人机五子棋游戏的练习，...
    99+
    2024-04-02
  • C语言实现简单五子棋游戏
    在生活中五子棋是一个十分普遍的一款游戏，今天让我们一起来实现这款游戏。 1.初始化棋盘 char ret; //数据存储在一个二维数组中,玩家下去*，电脑下去#. char ...
    99+
    2024-04-02
  • java实现简单五子棋小游戏(2)
    本文实例为大家分享了java实现简单五子棋小游戏游戏的具体代码，供大家参考，具体内容如下 讲解 在第一步实现的基础上，添加游戏结束条件。五子棋游戏中的相同棋子如果同时有五个连接成一条...
    99+
    2024-04-02
  • java实现简单五子棋小游戏(1)
    本文实例为大家分享了java实现简单五子棋小游戏的具体代码，供大家参考，具体内容如下 讲解 五子棋，实际上就是用一个数组来实现的。没有其他很复杂的结构。首先我们制作五子棋，先要有一个...
    99+
    2024-04-02
  • 原生JavaScript实现简单五子棋游戏
    本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码，供大家参考，具体内容如下 HTML页面 注释都很明确了，大家好好学习。 <!DOCTYPE html&...
    99+
    2024-04-02
  • 基于jquery实现五子棋游戏
    本文实例为大家分享了jquery实现五子棋游戏的具体代码，供大家参考，具体内容如下 花了一天时间完成一个简单五子棋游戏（非人机） html： <!DOCTYPE html>...
    99+
    2024-04-02
  • java怎么实现简单五子棋小游戏
    本篇文章为大家展示了java怎么实现简单五子棋小游戏，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。讲解五子棋，实际上就是用一个数组来实现的。没有其他很复杂的结构。首先我们制作五子棋，先要有一个棋盘。...
    99+
    2023-06-26
  • JavaScript实现简单五子棋游戏的方法
    本篇内容介绍了“JavaScript实现简单五子棋游戏的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！本文实例为大家分享了JavaScr...
    99+
    2023-06-20
  • C语言实现简单的五子棋游戏
    本文实例为大家分享了c语言实现简单五子棋游戏的具体代码，供大家参考，具体内容如下 环境vs2017 一、游戏设计思想 1.该代码设置为 玩家1（*） vs 玩家2（O） 2.选择玩游...
    99+
    2024-04-02
  • Java怎么实现简单的五子棋游戏
    本文小编为大家详细介绍“Java怎么实现简单的五子棋游戏”，内容详细，步骤清晰，细节处理妥当，希望这篇“Java怎么实现简单的五子棋游戏”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。项目结构这个是在网上找的资源，...
    99+
    2023-06-30
  • Python实现简易五子棋游戏
    本文实例为大家分享了Python实现五子棋游戏的具体代码，供大家参考，具体内容如下 class CheckerBoard():     '''棋盘类'''     def __ini...
    99+
    2024-04-02
  • 用C语言实现简单五子棋小游戏
    本文实例为大家分享了C语言实现简单五子棋小游戏的具体代码，供大家参考，具体内容如下 在vs2019创建新项目，然后添加两个源文件test.c和game.c，接着创建一个头文件game...
    99+
    2024-04-02
  • 基于C语言实现简单五子棋游戏
    本文实例为大家分享了C语言实现简单五子棋游戏的具体代码，供大家参考，具体内容如下 五子棋大家都玩儿过，所以规则就不介绍了 今天遇到一个学弟在实现的时候遇到一些问题，所以将实现的过程记...
    99+
    2024-04-02
  • 如何使用pygame实现简单五子棋游戏
    小编给大家分享一下如何使用pygame实现简单五子棋游戏，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体内容如下看代码：①Gomuku2.py：import&n...
    99+
    2023-06-28
  • C语言实现简单的五子棋小游戏
    本文实例为大家分享了C语言实现五子棋小游戏的具体代码，供大家参考，具体内容如下 我们需要一个二维数组去储存当前的棋盘状态，然后打印出来。 我们游戏的逻辑是初始化棋盘，打印棋盘，人下棋...
    99+
    2024-04-02
  • android自定义View实现简单五子棋游戏
    做一个五子棋练练手，没什么特别的，再复习一下自定义View的知识，onMeasure，MeasureSpec , onDraw以及OnTouchEvent方法等。 效果图 代码如下...
    99+
    2024-04-02
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作