JavaScript实现网页版的五子棋游戏
本文实例为大家分享了JavaScript实现网页版五子棋游戏的具体代码，供大家参考，具体内容如下
根据毕老师的HTML+CSS+JavaScript教程和下载的一些文档介绍自己在手机上写出来的一个简单五子棋，很简单的功能，许多功能都没有实现，写的过程中也遇到很多问题，现在的代码中也存在一些问题，比如电脑下棋时没有下到最右边和最下边，改来改去也还没试出电脑下最右边和最下边一排的情况，但每一个字符都是自己敲出来的，清楚他们的功能，还是很有成就感的！先看下概貌吧！
上代码
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五
-
js实现简单五子棋游戏
本文实例为大家分享了js实现五子棋游戏的具体代码,供大家参考,具体内容如下 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" href="css/style.css" /> </head> <b
-
JS+canvas实现的五子棋游戏【人机大战版】
本文实例讲述了JS+canvas实现的五子棋游戏.分享给大家供大家参考,具体如下: 运行效果图: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css
-
JS canvas绘制五子棋的棋盘
本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow blur spread color inset: h-shadow: (必须)阴影的水平偏移量,如果是正值,则阴影在元素块右边:如果是负值,则阴影在元素块左边. v-shadow: (必须)阴影的垂直偏移量,如果是正值,则阴影在元素块底部:如果是负值,则阴影在元素块顶部. blur: (可选)阴影
-
基于JavaScript实现五子棋游戏
本文实例为大家分享了js实现五子棋的具体代码,供大家参考,具体内容如下 思路: 1.先用canvas画五子棋的棋盘 2.获取鼠标点击的位置 3.根据鼠标点击的位置判断,并画棋子 4.根据下的棋子判断是否赢了 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>
-
javascript 初学教程及五子棋小程序的简单实现
一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 二.hbulider工具的使用 1) hbulider的特点: 1.飞快的编码速度 2.HBuilder直接创建移动App,打包为ios或Android原生安装包 3.HTML5语法.HTML5+
-
原生JS+Canvas实现五子棋游戏实例
一.功能模块 先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能 二.代码详解 2.1 人机对战功能实现 从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *
-
H5+C3+JS实现双人对战五子棋游戏（UI篇）
本篇文章实现的是双人对战模式,主要是实现除人机AI算法和判断输赢之外的其他功能,下一篇将会发布AI 框架搭建 <!Doctype html> <html> <head> <!-- 百度爬虫优化 --> <meta http-equiv="author" content="成兮,缘分五月" /> <meta http-equiv="Keywords" cotent="五子棋
-
H5+C3+JS实现五子棋游戏（AI篇）
本文实例为大家分享了H5+C3+JS实现五子棋游戏的具体代码,供大家参考,具体内容如下 新增全局变量 <script> //所有赢法总和 var count = 0; //容纳所有赢法的三维数组 var allWin = []; for(var i =0; i <15; i++){ allWin[i] = []; for(var j=0; j <15; j++){ allWin[i][j] = []; } } //横线赢法 for(var i =0; i <15; i++){
-
纯JS实现五子棋游戏兼容各浏览器(附源码)
纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/