这个博客介绍了如何使用HTML和JavaScript实现一个简单的井字棋游戏。通过表格元素构造棋盘，结合JavaScript处理鼠标事件，实现玩家与电脑的交互。随着游戏进程，更新棋盘状态并实现初步的人机交互功能，包括用户选择先手或后手，以及机器智能选择位置的逻辑。
IE网页学游戏-井字棋
井字棋实现交互的简单小游戏，学习使用表格，理解javascript函数。
1.构造棋盘
用table元素的行列构造三行三列的表格。设置好120像素的井字棋背景，三个小图表示方格内背景、黑棋、白棋。
设置鼠标事件的相应函数，来生成点击的行列号。在相应方格内根据点击顺序NO，分黑白显示小图标。
<html>
<title>井字棋</title>
<script type="text/javascript">
var no=0
function show_coords(event)
{
if(no<=9)
{
no=no+1
x=parseInt(event.clientX/40)+1
y=parseInt(event.clientY/40)+1
var x1=document.getElementById('myTable').rows[y-1].cells
if(no%2==1) x1[x-1].innerHTML="<img src='1.jpg'>"
else
x1[x-1].innerHTML="<img src='0.jpg'>"
}
}
</script>
<body >
<table id="myTable" οnmοusedοwn="show_coords(event)" border="1" width="120" background="jing.jpg">
<tr height="40"><td><img src='b.jpg'></td><td><img src='b.jpg'></td><td><img src='b.jpg'></td></tr>
<tr height="40"><td><img src='b.jpg'></td><td><img src='b.jpg'></td><td><img src='b.jpg'></td></tr>
<tr height="40"><td><img src='b.jpg'></td><td><img src='b.jpg'></td><td><img src='b.jpg'></td></tr>
</table >
<p>表格和鼠标和相应事件</p>
</body>
</html>
2.为人机交互准备
用输入元素的文本输入0或1表示机器计选择还是人先选择。按钮设置游戏开始，开始后，按钮失效，对应函数begin()中代码：
document.getElementById('but1').disabled="disabled"
设置user记录人操作还是机器，1表示人，0表示机器，交替的实现采用加1取2的余数。先实现测试人单独点击所有方格。条件no<=9&&user==1表示人的合法性判断。
<html>
<title>井字棋</title>
<script type="text/javascript">
var no=0
var user=0
function show_coords(event)
{
if(no<=9&&user==1)
{
x=parseInt(event.clientX/40)+1
y=parseInt(event.clientY/40)+1
no=no+1
var x1=document.getElementById('myTable').rows[y-1].cells
if(no%2==1) x1[x-1].innerHTML="<img src='1.jpg'>"
else x1[x-1].innerHTML="<img src='0.jpg'>"
}
}
function begin()
{
document.getElementById('but1').disabled="disabled"
if(document.getElementById('sele1').value==1)
user=1
else
user=0
}
</scr
最低0.47元/天 解锁文章
扫一扫
653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
