js实战-html+js实现网页五子棋

最新推荐文章于 2024-05-13 16:07:00 发布
最新推荐文章于 2024-05-13 16:07:00 发布
阅读量571 收藏 4
点赞数
文章标签： js html css 五子棋 网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41599205/article/details/98738972
版权

最终效果图：

废话不多说，上源码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>五子棋</title>
    <!--    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"/>-->
</head>
<!--css-->
<style>
    body {
        width: 800px;
    }

    #beginGameBtn {
        background: url(startImg.png);
        width: 80px;
        height: 25px;
        background-size: cover;
        float: left;
    }

    #restartGameBtn {
        background: url(restartImg.png);
        width: 80px;
        height: 25px;
        background-size: cover;
        float: right;
    }

    td {
        width: 50px;
        height: 50px;
        margin: 0px;
        padding: 0px
    }
</style>

<!--js-->
<script type="text/javascript">

    var presentChess = 1;//当前执棋方，1代表白旗，0代表黑棋
    var beginFlag = 0;//0代表未开始游戏，1代表已开始游戏
    var msg;
    var chessboard = new Array(10);//记录下棋情况
    for (var i = 0; i < 10; i++) {
        chessboard[i] = new Array(10);
        //初始化下棋情况，全为0
        for (var j = 0; j < 10; j++) {
            chessboard[i][j] = -1;
        }
    }

    window.onload = function () {
        msg = document.getElementById('msg')
    }

    //返回三者最小值
    function min(x, y, z) {
        return (x > y ? y : x) > z ? z : (x > y ? y : x)
    }

    function beginGame() {
        // beginFlag = 1;
        //绑定棋盘下棋事件
        for (var i = 0; i < 100; i++) {
            document.getElementsByTagName('td')[i].onclick = palyChess;
        }
    }

    function restartGame() {
        for (var i = 0; i < 100; i++) {
            //document.getElementsByTagName('td')[i].onclick = '';
            document.getElementsByTagName('td')[i].innerHTML = '';//清空棋子

        }

        for (var i = 0; i < 10; i++) {//清空棋盘记录
            for (var j = 0; j < 10; j++) {
                chessboard[i][j] = -1;
            }
        }
    }

    //下棋
    function palyChess() {
        //如果表格此处已经下了棋，则返回 不作操作
        text = this.innerHTML
        if (text != '') return;
        //放置棋子图片得字符串
        var bqiStr = "<img src=\"bqiImg.jpg\" width=\"100%\"  height=\"90%\"  alt=\"\"/>"
        var hqiStr = "<img src=\"hqiImg.jpg\" width=\"100%\" height=\"90%\" alt=\"\"/>"
        // console.log('1')
        if (presentChess == 1) {
            this.innerHTML = bqiStr;

            chessboard[this.parentNode.rowIndex][this.cellIndex] = 1;
            // setTimeout('', 3000);
            if (ifWin(this.parentNode.rowIndex, this.cellIndex))
                if (presentChess == 1) alert('白棋方获胜');
                else alert('黑棋方获胜');
            presentChess = 0;
            msg.innerHTML = "黑棋";

        } else {
            this.innerHTML = hqiStr;

            chessboard[this.parentNode.rowIndex][this.cellIndex] = 0;
            setTimeout('', 3000);
            if (ifWin(this.parentNode.rowIndex, this.cellIndex))
                if (presentChess == 1) alert('白棋方获胜');
                else alert('黑棋方获胜');
            presentChess = 1;
            msg.innerHTML = "白棋";
        }

    }

    //判断是否胜利,h行，l列
    function ifWin(h, l) {
        // var x = this.parentNode.rowIndex;
        // var y = this.cellIndex - 1;
        var s = 1;//记录连子个数

        //判断竖直方向
        for (var i = 1; i <= (h > 4 ? 4 : h); i++) {
            if (chessboard[h - i][l] == presentChess) {
                s++;
            } else break;
        }
        for (var i = 1; i <= ((9 - h) > 4 ? 4 : (9 - h)); i++) {
            if (chessboard[h + i][l] == presentChess) {
                s++;
            } else break;
        }
        if (s >= 5) {
            return 1;
        }

        s = 1;
        //判断水平方向
        for (var i = 1; i <= (l > 4 ? 4 : l); i++) {
            if (chessboard[h][l - i] == presentChess) {
                s++;
            } else break;
        }
        for (var i = 1; i <= ((9 - l) > 4 ? 4 : (9 - l)); i++) {
            if (chessboard[h][l + i] == presentChess) {
                s++;
            } else break;
        }
        if (s >= 5) {
            return 1;
        }

        s = 1;
        // var min=(h > 4 ? 4 : h) > l ? l : (h > 4 ? 4 : h);
        //判断左上、右下斜线方向
        for (var i = 1; i <= min(4, l, h); i++) {//取较小值作为移动半径
            if (chessboard[h - i][l - i] == presentChess) {
                s++;
            } else break;
        }
        for (var i = 1; i <= min(4, 9 - l, 9 - h); i++) {
            if (chessboard[h + i][l + i] == presentChess) {
                s++;
            } else break;
        }
        if (s >= 5) {
            return 1;
        }

        s = 1;
        //判断右上、左下斜线方向
        for (var i = 1; i <= min(4, 9 - l, h); i++) {//取较小值作为移动半径
            if (chessboard[h - i][l + i] == presentChess) {
                s++;
            } else break;
        }
        for (var i = 1; i <= min(4, l, 9 - h); i++) {
            if (chessboard[h + i][l - i] == presentChess) {
                s++;
            } else break;
        }
        if (s >= 5) {
            return 1;
        }
        return 0;
    }
</script>
<body>
<!--顶部-->
<div>
    <div style="margin:0 auto; width:165px">
        <!--开始游戏按钮-->
        <button id="beginGameBtn" name="beginGameBtn" onclick="beginGame()"></button>
        <!--重新开始游戏按钮-->
        <button id="restartGameBtn" name="restartGameBtn" onclick="restartGame()"></button>
    </div>
    <div style="margin:0 auto; width:150px">执子方：<label id="msg" name="msg">白棋</label></div>
</div>
<br>

<!--下部-->
<div>
    <div style="float:left; width:120px">

    </div>
    <div style="margin:0 auto; width:500px ">
        <!--表格构成棋盘-->
        <table border="5" style="width:500px; height:500px; border-collapse:collapse; ">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

里面用到了4张图片，开始按钮图，重新开始按钮图，白棋子图，黑棋子图。

CTGctgct
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
五子棋（网页版）
01-22
本游戏是使用纯javascript编写，代码100%原创，代码简洁，计算速率很快，希望大家给与评价、指点
对战五子棋——网页版
m0_62404808的博客
07-16 4173
实现一个网页版的五子棋对战程序，用户可以进行注册，注册完成后登录进入游戏大厅，会显示用户的天梯分数记录以及比赛场次的记录，会根据用户的天梯分数实现匹配机制，实现两个玩家在网页端进行五子棋的对战。@Data@Data@Data// 胜利玩家的 userId。
五子棋对战（网页版）
最新发布
weixin_44985964的博客
05-13 988
首先需要在数据库中创建一个新的表, 用来表示每个玩家的游戏房间编号，服务器把每一局对局, 玩家轮流落子的位置都记录下来(比如保存到一个文本文件中)，然后玩家可以选定某个曾经的比赛, 在页面上回放出对局的过程.在游戏大厅除了显示匹配按钮之外, 还能显示当前所有的对局房间，玩家可以选中某个房间, 以观众的形式加入到房间中. 同时能实时的看到选手的对局情况.在处理落子响应中要处理胜负手.在 Matcher 的构造方法中, 创建一个线程, 使用该线程扫描每个队列, 把每个队列的头两个元素取出来, 匹配到一组中.
网页版五子棋设计实现自动化测试
m0_62404808的博客
07-18 831
由于该页面需要两个用户匹配成功后才能进入，自动化测试实现相对复杂，就设计出测试用例进行了手工测试，且测试通过。首先定义start()方法和close()方法，分别测试用例之前和之后执行。首先定义好start()方法和close()方法。首先定义start()方法和close()方法。在执行测试之前首先获取到驱动。
简单的网页游戏之五子棋
Annzz123的博客
08-10 1811
你下五子棋很厉害吗？来挑战一下计算机吧！
网页五子棋对战——SSM框架
zhaozhuyue的博客
07-08 1214
用户的注册和登录管理用户的天梯分数、比赛场数、获胜场数等信息依据用户的天梯积分，实现匹配机制把两个匹配到的玩家放到一个游戏房间中，双方通过网页的形式来进行对战比赛用到的关键技术点：我们之前学习过的服务器开发，主要是这样的模型：客户端主动向服务器发起请求，服务器收到之后，返回一个响应。如果客户端不主动发起请求，服务器是不能主动联系客户端的我们是否需要，服务器主动给客户端发消息这样的场景呢？需要！！“消息推送”当前已有的知识，主要是HTTP.HTTP自身难以实现这种消息推送效果的。
自定义view实战---五子棋gobang.zip
05-12
五子棋游戏想必大家都非常熟悉，游戏规则十分简单。游戏开始后,玩家在游戏设置中选择人机对战，则系统执黑棋，玩家自己执白棋。双方轮流下一棋，先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 ...
基于html JavaScript的多功能五子棋
03-07
本文将深入探讨如何利用HTML和JavaScript来实现一个多功能的五子棋游戏，适用于课程作业或毕业设计。 首先，HTML（HyperText Markup Language）是构建网页的基本框架，用于定义页面结构。在五子棋项目的HTML部分，...
NodeJs+express+socket.io五子棋实战.7z
12-28
NodeJs+express+socket.io五子棋实战之socket.io兼容处理，演示url：http://39.96.31.43:3100/。 希望对大家有所帮助可以更好的了解socket.io。
疯狂java实战演义-第1章 控制台五子棋.doc
09-30
【疯狂java实战演义-第1章 控制台五子棋】 本章主要探讨的是如何在Java控制台环境中实现一个简单的五子棋游戏。五子棋是一种源自中国的双人对弈棋类游戏，目标是在棋盘上连成五个棋子以赢得比赛。尽管控制台版本的...
五子棋源码(js+canvas)
12-11
总结起来，这款五子棋小游戏是JavaScript和Canvas结合的典范，它的源码分析和实践将为学习者提供一个深入了解这两项技术的窗口，对于想要提升Web前端技能的开发者来说，这是一个不容错过的实战案例。
h5+css3简单实现网页端五子棋游戏1.0版
rufeike的博客
10-20 2720
H5+css3简单实现五子棋游戏 原理 主要使用H5的拖拽接口功能，通过拖拽移动棋子，目标位置通过接收拖拽棋子的拷贝元素，实现棋子摆放。 效果图如下 步骤 第一步：简单排版五子棋游戏页面，设定好棋盘排放区域，并把事先准备一张棋盘背景图片作为棋盘区域的背景图，使用background-size:contain平铺。并在棋盘上方画表格，让表格中的td内容位置刚好处于背景图片放置棋子的位置，红色虚...
web前端之五子棋网页版小游戏
FemaleHacker的博客
07-05 8599
五子棋小游戏 这个五子棋小游戏，没有写成人机模式。 但大家可以尝试下自己饰演两个角色的五子棋，嘻嘻嘻 效果图片 效果 代码 index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>简易五子棋游戏</title> <link rel="stylesheet" href="css/main.css">
网页版五子棋实时对战系统
dddddrrrzz的博客
08-25 3171
用户模块主要负责用户的注册, 登录, 分数记录功能. 使用 MySQL 数据库存储数据. 客户端提供一个登录页面+注册页面. 服务器端基于 Spring + MyBatis 来实现数据库的增删改查. 匹配模块 用户登录成功, 则进入游戏大厅页面. 游戏大厅中, 能够显示用户的名字, 天梯分数, 比赛场数和获胜场数. 同时显示一个 "匹配按钮". 点击匹配按钮则用户进入匹配队列, 并且界面上显示为 "取消匹配" . 再次点击则把用户从匹配队列中删除. 如果匹配成功, 则跳转进入到游戏房间页面
网页五子棋对战
CSDN_drh的博客
06-10 950
实现一个小项目，进行网页五子棋对战(SSM + WebSocket)
html css制作五子棋,js实现带简单Ai的网页五子棋制作（UI篇）
weixin_39759441的博客
06-22 2095
前言:最近学了html，css，js，想找个项目来练习一下，就做了一个简单的网页五子棋，主要用到了canvas画图，逻辑部分都是js来写的，很简单，在这里简单的记录一下开发流程。创建棋盘：用canvas创建一个棋盘画板，棋盘的大小设置为450px 450px，并且用css设置canvas样式，设置好了之后就有一个棋盘了，让后利用js实现棋盘上面的画线操作。canvas注意事项：:默认情况下 元素...
五子棋对战PHP网页版
idarewho的专栏
07-11 3806
This is a five chess (五子棋, gomoku) game playing website created by php and javascript. As the game is my favorite habbit, this may be my first serious project when I was still a passionate student 8 y
【项目设计】网页版五子棋游戏
在平淡的日子里寻找存在的价值
11-18 1368
一个网页版的在线五子棋对战游戏，主要支持用户数据管理、匹配对战功能与实时聊天功能。
C++项目：在线五子棋对战（网页版）
wjmhlh的博客
08-10 2894
本项⽬主要实现⼀个⽹⻚版的五⼦棋对战游戏，其主要⽀持以下核⼼功能：• 用户管理:实现用户注册，用户登录、获取用户信息、用户天梯分数记录、用户比赛场次记录等。• 匹配对战:实现两个玩家在网页端根据天梯分数匹配游戏对⼿，并进行五子棋游戏对战的功能。• 聊天功能:实现两个玩家在下棋的同时可以进⾏实时聊天的功能。
html+js实现五子棋小游戏
07-13
当然！以下是一个使用 HTML 和 JavaScript 实现的五子小游戏的示例代码： ```html <!DOCTYPE html> <html> <head> <title>五子棋小游戏</title> <style> .board { display: flex; flex-wrap: wrap; width: 400px; height: 400px; } .cell { box-sizing: border-box; width: 20%; height: 20%; border: 1px solid #000; cursor: pointer; } </style> </head> <body> <div class="board"></div> <script> const boardSize = 15; // 棋盘大小 const board = document.querySelector('.board'); let currentPlayer = 'X'; let gameOver = false; const cells = []; // 存储每个格子的状态，0 表示空，1 表示玩家 X，2 表示玩家 O for (let i = 0; i < boardSize * boardSize; i++) { const cell = document.createElement('div'); cell.classList.add('cell'); cell.addEventListener('click', () => { if (cells[i] === 0 && !gameOver) { cell.innerHTML = currentPlayer; cells[i] = currentPlayer === 'X' ? 1 : 2; if (checkWin(i)) { gameOver = true; alert(currentPlayer + '赢了！'); } currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; } }); board.appendChild(cell); cells.push(0); } function checkWin(index) { const row = Math.floor(index / boardSize); const col = index % boardSize; const directions = [ [0, 1], [1, 0], [1, 1], [1, -1] // 水平、垂直、对角线方向 ]; for (let i = 0; i < directions.length; i++) { const [dx, dy] = directions[i]; let count = 1; let x = row + dx; let y = col + dy; while (x >= 0 && x < boardSize && y >= 0 && y < boardSize && cells[x * boardSize + y] === cells[index]) { count++; x += dx; y += dy; } x = row - dx; y = col - dy; while (x >= 0 && x < boardSize && y >= 0 && y < boardSize && cells[x * boardSize + y] === cells[index]) { count++; x -= dx; y -= dy; } if (count >= 5) { return true; } } return false; } </script> </body> </html> ``` 这个示例中，棋盘由 HTML 的 `<div>` 元素组成，每个格子通过添加 `.cell` 类来表示。玩家可以通过点击格子来下棋，游戏会检测是否有玩家获胜。 希望这个示例对您有帮助！如果您有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值