HTA+VBScript构建五子棋交互界面：动态棋盘生成与落子交互

脚本专家 发表于 2026-6-9 10:10:19

HTA（HTML Application）是微软提供的一种允许将HTML、脚本语言（VBScript/JScript）和ActiveX组件打包成独立应用程序的技术。本文基于一个经典的HTA五子棋界面实例，拆解其核心实现：如何利用VBScript动态生成19×19棋盘，并实现鼠标悬停预览与点击落子交互。无需任何框架，仅用纯前端脚本即可快速制作一个可用的五子棋界面原型。

一、HTA应用配置
创建文件保存为 .hta 后缀，通过 <HTA:APPLICATION> 标签定义窗口行为，例如：

<HTA:APPLICATION
ID="MyhyliApp"
APPLICATIONNAME="五子棋界面 - zh159"
BORDER="thin"
BORDERSTYLE=""
VERSION="1.0"
SCROLL="no"
ICON="C:\WINDOWS\System32\wuauclt.exe"
INNERBORDER="no"
CONTEXTMENU="no"
CAPTION="yes"
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="normal"
NAVIGABLE="yes"
/>

关键参数说明：SCROLL="no" 禁用滚动条；CAPTION="yes" 保留标题栏；MAXIMIZEBUTTON="no" 禁止最大化；SINGLEINSTANCE="yes" 保证只运行一个实例。ICON可以指定任意EXE路径，此处使用了系统自带的wuauclt.exe。

二、动态棋盘生成逻辑
棋盘共19行19列，对应传统五子棋规格。原文使用VBScript循环，借助字符串 "ABCDEFGHIJKLMNOPQRS"（19个字母）标记行列，通过MID函数取出坐标。核心技巧是使用多个条件判断，在边界位置绘制不同的制表符（┌ ┬ ┐ ├ ┼ ┤ └ ┴ ┘），内部格子统一使用“┼”。生成的每个TD都包含一个SPAN元素，初始显示“┼”。

For i = 1 To Len(str)
with document
.write "<tr align='center'>"
For n = 1 To Len(str)
   stri = MID(str,i,1)
   strn = MID(str,n,1)
   tdstr = "<td id='GUI_" & strn & stri & "' class='GUIwh'><span onclick='Test(this)' onMouseOver='innerText=""●"";style.color=""blue""' onMouseOut='innerText=""┼"";style.color=""""'>┼</span></td>"
   s = "┼"
   If (stri = "A" and strn = "A") Then .write Replace(tdstr,s,"┌")
   ' … 其他边界判断省略 …
Next
.write "</tr>"
end with
Next

这种写法虽然繁琐但非常直观：通过行列首尾字母判断所在位置是否在边界，进而替换对应的制表符。对于不需要图形库的环境，这是纯文本绘制棋盘的最简方案。

三、交互事件与落子处理
每个SPAN绑定了三个事件：
onclick 触发 Test 函数（VBScript）：

Sub Test(this)
this.parentNode.style.cursor = "default"
this.parentNode.innerHtml = "●"
PC.style.display = "none"
End Sub

点击后将父节点（TD）内容替换为实心圆“●”，并隐藏右侧的“电脑先下”按钮。注意此版本只有界面，未实现AI或胜负判定，因此“电脑先下”按钮仅做展示。
onMouseOver 和 onMouseOut 实现鼠标悬停时显示蓝色圆点预览，移出恢复为“┼”。

四、窗口居中与标题动态更新
在页面底部添加VBScript代码，调整窗口大小并居中：

width = 660
height = 550
window.resizeTo width, height
ileft=(window.screen.width-width)/2
itop=(window.screen.height-height)/2
window.moveTo ileft,itop

同时通过 setInterval 每秒更新一次文档标题，显示当前日期和星期：

Sub Title
Document.title = "五子棋 - zh159 - " & FormatDateTime(Now, 1) & " " & WeekdayName(WeekDay(now)) & " " & FormatDateTime(Now, 3)
End Sub
Title:setInterval "Title()",500

这一细节体现了HTA对系统时间与脚本的灵活调用能力。

五、适用场景与扩展建议
本示例适合作为HTA入门教学、VBScript动态生成表格的演示，或者快速搭建一个带棋盘的交互原型。如需完善为完整五子棋游戏，可在此基础上添加：
- 二维数组记录落子状态
- 胜负判定算法（连五检测）
- 简单AI（如评分法）
- 悔棋与重启功能
注意：HTA只能运行在Windows系统，且现代浏览器已不再支持ActiveX，因此仅适用于企业内部工具或旧系统维护场景。对于Web应用，建议改用Canvas+JavaScript实现。

附完整代码（保存为 .hta 运行）：

<html>
<title>五子棋界面 - zh159</title>
<hrad>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<HTA:APPLICATION
ID="MyhyliApp"
APPLICATIONNAME="五子棋界面 - zh159"
BORDER="thin"
BORDERSTYLE=""
VERSION="1.0"
SCROLL="no"
ICON="C:\WINDOWS\System32\wuauclt.exe"
INNERBORDER="no"
CONTEXTMENU="no"
CAPTION="yes"
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="normal"
NAVIGABLE="yes"
/>
</hrad>
<script language="javascript"></script>
<script language="VBScript"></script>
<style>
.GUIwh {width:24;height:24;cursor:hand;}
</style>
<body background="bg.gif" scroll="no" style="background: SteelBlue ;color:#ffffff;">
<table align="center" width="630" border="1" cellspacing="0" cellpadding="10" borderColor="#ffffff" style="font: 13px 宋体;border-collapse:collapse;">
<tr align="center">
<td width="450" height="450">
<table border="0" cellspacing="0" cellpadding="0" borderColor="#ffffff" style="font: 21px 宋体;border:2px solid #ffffff;">
<script language="VBScript">
str = "ABCDEFGHIJKLMNOPQRS"
For i = 1 To Len(str)
with document
.write "<tr align='center'>"
For n = 1 To Len(str)
stri = MID(str,i,1)
strn = MID(str,n,1)
tdstr = "<td id='GUI_" & strn & stri & "' class='GUIwh'><span onclick='Test(this)' onMouseOver='innerText=""●"";style.color=""blue""' onMouseOut='innerText=""┼"";style.color=""""'>┼</span></td>"
s = "┼"
If (stri = "A" and strn = "A") Then .write Replace(tdstr,s,"┌")
If stri = "A" Then If not (strn = "A" or strn = "S") Then .write Replace(tdstr,s,"┬")
If (stri = "A" and strn = "S") Then .write Replace(tdstr,s,"┐")
If not (stri = "A" or stri = "S") Then If strn = "A" Then .write Replace(tdstr,s,"├")
If not (stri = "A" or stri = "S" or strn = "A" or strn = "S") Then .write tdstr
If not (stri = "A" or stri = "S") Then If strn = "S" Then .write Replace(tdstr,s,"┤")
If (stri = "S" and strn = "A") Then .write Replace(tdstr,s,"└")
If stri = "S" Then If not (strn = "A" or strn = "S") Then .write Replace(tdstr,s,"┴")
If (stri = "S" and strn = "S") Then .write Replace(tdstr,s,"┘")
Next
.write "</tr>"
end with
Next
</script>
</table>
</td>
<td>
<span id="PC"><button>电脑先下</button><br><br>直接点击为玩家先下</span>
</td>
</tr>
</table>
</body>
<script language="VBScript">
width = 660
height = 550
window.resizeTo width, height
ileft=(window.screen.width-width)/2
itop=(window.screen.height-height)/2
window.moveTo ileft,itop
Sub Test(this)
this.parentNode.style.cursor = "default"
this.parentNode.innerHtml = "●"
PC.style.display = "none"
End Sub
Sub Title
Document.title = "五子棋 - zh159 - " & FormatDateTime(Now, 1) & " " & WeekdayName(WeekDay(now)) & " " & FormatDateTime(Now, 3)
End Sub
Title:setInterval "Title()",500
</script>
</html>

热心网友6 发表于 2026-6-9 10:20:00

Re: HTA+VBScript构建五子棋交互界面：动态棋盘生成与落子交互

感谢分享！之前一直觉得HTA是古董技术，但看你这篇拆解才发现用来做桌面小工具的原型真的挺顺手。那个用字母坐标判断边界画棋盘制表符的思路很巧妙，虽然是硬编码但胜在直观。我比较好奇的是，如果想把棋盘改成15×15（常见五子棋标准），是不是只需要改一下那个字母字符串长度和对应的判断条件就行？另外“电脑先下”按钮实际触发什么逻辑，只是显示隐藏吗？希望能展开讲讲后续的AI设计思路。

热心网友3 发表于 2026-6-22 21:00:04

Re: HTA+VBScript构建五子棋交互界面：动态棋盘生成与落子交互

楼主这个HTA五子棋界面的实现非常经典，从配置到棋盘生成再到交互事件，逻辑清晰，很适合用来学习VBScript和HTA的配合。动态生成棋盘的制表符边界判断虽然看起来繁琐，但确实是纯文本方案里最直观的一种，而且不用依赖任何外部库，对新手很友好。我比较好奇的是，如果后续要添加落子状态记录和胜负判定，用VBScript的二维数组来维护棋盘状态的话，性能上会不会有瓶颈？另外，鼠标悬停预览的蓝色圆点颜色能不能也做成可配置的，比如用变量控制？期待楼主能继续分享AI或完整游戏逻辑的实现思路。

热心网友3 发表于 2026-6-22 21:10:04

Re: HTA+VBScript构建五子棋交互界面：动态棋盘生成与落子交互

看到这个HTA+VBScript的五子棋界面实现，感觉非常复古又实用。纯文本绘制19×19棋盘用边界制表符替换的思路很巧妙，虽然判断条件写起来会有点重复，但在不需要图形库的环境下确实是最高效的方案。鼠标悬停蓝色圆点预览这种交互细节也做得挺到位，能让用户提前确认落子位置。想请教一下，那个边界制表符的判断你是把19条边的所有组合都写全了，还是用某种规律简化了判断？另外，如果后续要添加AI，这个基于表格的棋盘结构在刷新和更新棋子状态时会不会遇到性能或重绘方面的问题？

页: [1]

红客联盟 - 由08小组运营's Archiver