自己写的一个网页版的简单五子棋

阳光穿透心脏的1/2处 2022-04-01 13:19 254阅读 0赞

根据毕老师的HTML+CSS+JavaScript教程和下载的一些文档介绍自己在手机上写出来的一个简单五子棋，很简单的功能，许多功能都没有实现，写的过程中也遇到很多问题，现在的代码中也存在一些问题，比如电脑下棋时没有下到最右边和最下边，改来改去也还没试出电脑下最右边和最下边一排的情况，但每一个字符都是自己敲出来的，清楚他们的功能，还是很有成就感的！先看下概貌吧！

![1359097563_7325.jpg][]

上代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    
    <head>
    
    <title> New Document </title>
    		
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    	
    <style type="text/css">
    	/*CSS区域*/
    table{
    		border: red 2px solid;
    		border-collapse: collapse;
    		text-align: center;
    	}
    td,th{
    		border: red 1px solid;
    		padding: 5, 10, 5, 10;
    	}
    </style>
    
    <script type="text/javascript">
    	/*javascript区域*/
    var BOARD_SIZE = 9;
    var board = new Array();
    var s = "";
    
    function play()
    {
    	if (board.length != 0)
    	{
    		alert("游戏已经开始了，点击“重新开始”开始新游戏");
    		return;
    	}
    	init();
    	show();
    }
    
    function init()
    {
    //	s = "";
    	board = new Array()
    	for (var i=0; i<BOARD_SIZE; i++)
    	{
    //		s += ((i+1)+' ');
    		board[i] = new Array();
    		for (var j=0; j<BOARD_SIZE; j++)
    		{
    			board[i][j] = "┼";
    //			s += board[i][j];
    		}
    //		s += "<br />";
    	}
    //	s += " ";
    //	for (var k=1; k<10; k++)
    	{
    //		s += " "+k;	
    	}
    	//alert(s);
    }
    
    function getBoard()
    {
    	return board;
    }
    
    //var flag = false;	//电脑没下呢  电脑调用setChess又执行了computerDo
    
    function setChess(pos, chessMan)
    {
    	if (!pos)
    	{
    		return;
    	}
    	board[pos[0]][pos[1]] = chessMan;
    	show();
    	
    	if (chessMan=='●')
    	{
    		computerDo();
    	}
    	/*
    	if (flag)
    	{
    		return;
    	}
    	flag = false;
    		if (!flag)
    	{
    		computerDo();	
    	}
    	else
    		flag = false;
    	*/
    }
    
    function computerDo()
    {
    	var x = parseInt(Math.random()*(BOARD_SIZE));
    	var y = parseInt(Math.random()*(BOARD_SIZE));
    	alert("Computer:"+x+"---"+y);
    	while (!checkPos(x+"", y+"") || hasChess(x-1,y-1))
    	{
    		x = parseInt(Math.random()*(BOARD_SIZE));
    		y = parseInt(Math.random()*(BOARD_SIZE));
    		alert("Computer:"+x+"---"+y);
    	}
    	var pos = [x-1, y-1];
    	setChess(pos, "○");
    }
    
    function show()
    {
    	s = "";
    	var node = document.getElementById("boardspan");
    	for (var i=0; i<BOARD_SIZE; i++)
    	{
    		s += ((i+1)+' ');
    		for (var j=0; j<BOARD_SIZE; j++)
    		{
    			s += board[i][j];
    		}
    		s += "<br />";
    	}
    	s += " ";
    	for (var k=1; k<10; k++)
    	{
    		s += " "+k;	
    	}
    	node.innerHTML = s;
    }
    
    function rePlay()
    {
    	init();
    	show();
    }
    
    
    function getPos()
    {
    	var pos = new Array();
    	var x = document.getElementById("posx").value;
    	var y = document.getElementById("posy").value;
    	
    	if (!checkPos(x, y))
    	{
    		alert("输入位置有误，请重新输入！");
    		return;
    	}
    
    	pos[0] = x - 1;
    	pos[1] = y - 1;
    
    	if (hasChess(pos[0], pos[1]))
    	{
    		alert("该位置已有棋子，请重新输入！");
    		return;
    	}
    	/*/防止电脑调用setChess时自动调用
    	document.getElementById("posx").value = "";
    	document.getElementById("posy").value = "";
    	*/
    	//alert(pos[0] + "::" + pos[1]);
    	return pos;
    }
    
    function hasChess(x, y)
    {
    	return (board[x][y]!='┼')?true:false;
    }
    
    function checkPos(x, y)
    {	
    	var reg = "^[1-9]{1}$";
    	return (x.match(reg)&&y.match(reg))?true:false;
    }
    </script>
    
    </head>
    
    <body>
    	
    <table>
    <th colspan=3 style="font-size:24; color:green">五子棋</th>
    <tr>
    	<td colspan=3>
    	<span id="boardspan">
    	棋盘显示区
    	</span>
    	</td>
    </tr>
    <tr>
    	<td rowspan=2>落子位置</td>
    	<td>横向：<input type="text" id="posx" size=4 /></td>
    	<td rowspan=2><input type="button" value="确定" οnclick="setChess(getPos(), '●')"</td>
    	<tr>
    		<td>竖向：<input type="text" id="posy" size=4 /></td>
    	</tr>
    </tr>
    <tr>
    	<th><input type="button" value="开始游戏" οnclick="play()" /></th>
    	<th colspan=2><input type="button" value="重新开始" οnclick="rePlay()" /></th>
    </tr>
    
    </table>
    
    
    </body>
    
    </html>

[1359097563_7325.jpg]: https://img-my.csdn.net/uploads/201301/25/1359097563_7325.jpg