JavaScript五子棋小游戏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五子棋</title>

<style type="text/css">
h1{
width: 700px;
height: 100px;
margin: 0 auto;
text-align: center;
line-height: 100px;
color: #FFF;
background-color: royalblue;
font-size: 50px;
}
#gobang{
width: 702px;
height: 702px;
margin: 0 auto;
background-color: #CCCCCC;
position: relative;
}
.heng{
width: 702px;
height: 1px;
background-color: red;
position: absolute;
left: 0;
}
.shu{
width: 1px;
height: 702px;
background-color: red;
position: absolute;
top: 0;
}
.blackchess{
width: 46px;
height: 46px;
background-color: #000000;
border: 2px solid #FFF;
border-radius: 50%;
position: absolute;
}
.whitechess{
width: 46px;
height: 46px;
background-color: #FFF;
border: 2px solid #000;
border-radius: 50%;
position: absolute;
}
.reset{
width: 200px;
height: 50px;
margin: 20px auto 0;
display: inherit;
font-size: 24px;
}
</style>

<script type="text/javascript">
//创建一个数组存放所有的棋子
var chesses = new Array();
//初始化函数
function ini(){
//画棋谱
chessboard();
//下棋子
document.getElementById("gobang").onclick=playchess;

}

//画棋谱
function chessboard(){
var chessboard = document.getElementById("gobang");
//画横向的线条
for(i=0;i<15;i++){
var h = document.createElement("div");
h.className="heng";
h.style.top=i*50+"px";
chessboard.appendChild(h);
//阻止事件冒泡
h.onclick=function(e){
if (e && e.stopPropagation)
{
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
}

//画竖向的线条
for(j=0;j<15;j++){
var s = document.createElement("div");
s.className="shu";
s.style.left=j*50+"px";
chessboard.appendChild(s);
//阻止事件冒泡
s.onclick=function(e){
if (e && e.stopPropagation)
{
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
}

}

//下棋子
var flag = 0;
function playchess(){
var chessboard = document.getElementById("gobang");
var chess = document.createElement("div");

//判断下黑棋还是白棋
if(flag==0){
chess.className="blackchess";
flag=1;
}else{
chess.className="whitechess";
flag=0;
}

//获取X轴坐标
var x = window.event.offsetX;
if(x%50<25){
x=x-x%50;
}else{
x=x+(50-x%50);
}
x=x-25;
//获取Y轴坐标
var y = window.event.offsetY;
if(y%50<25){
y=y-y%50;
}else{
y=y+(50-y%50);
}
y=y-25;

chess.style.left=x+"px";
chess.style.top=y+"px";

//创建数组存储棋子颜色、x轴坐标、y轴坐标
var mychess = new Array(flag,x,y);
//把棋子统一添加到一个数组中
chesses.push(mychess);

chessboard.appendChild(chess);
//阻止事件冒泡
chess.onclick=function(e){
if (e && e.stopPropagation)
{
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
//每下一个棋子就要判断一次输赢
iswin(mychess);

}

//判断输赢

function iswin(mychess){

var k=k1=k2=k3=0;

//判断左边的输赢
for(var i=1;i<5;i++){
var flag = mychess[0]; //棋子颜色
var x = mychess[1]-i*50; //x轴坐标
var y = mychess[2]; //y轴坐标

for(var j=0;j<chesses.length;j++){
if(flag==chesses[j][0]&&x==chesses[j][1]&&y==chesses[j][2]){
k++;
}
}
}
//判断右边的输赢
for(var i=1;i<5;i++){
var flag = mychess[0]; //棋子颜色
var x = mychess[1]+i*50; //x轴坐标
var y = mychess[2]; //y轴坐标

for(var j=0;j<chesses.length;j++){
if(flag==chesses[j][0]&&x==chesses[j][1]&&y==chesses[j][2]){
k++;
}
}
}

//判断上边的输赢
for(var i=1;i<5;i++){
var flag = mychess[0]; //棋子颜色
var x = mychess[1]; //x轴坐标
var y = mychess[2]-i*50; //y轴坐标

for(var j=0;j<chesses.length;j++){
if(flag==chesses[j][0]&&x==chesses[j][1]&&y==chesses[j][2]){
k1++;
}
}
}

//判断下边的输赢
for(var i=1;i<5;i++){
var flag = mychess[0]; //棋子颜色
var x = mychess[1]; //x轴坐标
var y = mychess[2]+i*50; //y轴坐标

for(var j=0;j<chesses.length;j++){
if(flag==chesses[j][0]&&x==chesses[j][1]&&y==chesses[j][2]){
k1++;
}
}
}

//判断左上边的输赢
for(var i=1;i<5;i++){
var flag = mychess[0]; //棋子颜色
var x = mychess[1]-i*50; //x轴坐标
var y = mychess[2]-i*50; //y轴坐标

for(var j=0;j<chesses.length;j++){
if(flag==chesses[j][0]&&x==chesses[j][1]&&y==chesses[j][2]){
k2++;
}
}
}

//判断右下边的输赢
for(var i=1;i<5;i++){
var flag = mychess[0]; //棋子颜色
var x = mychess[1]+i*50; //x轴坐标
var y = mychess[2]+i*50; //y轴坐标

for(var j=0;j<chesses.length;j++){
if(flag==chesses[j][0]&&x==chesses[j][1]&&y==chesses[j][2]){
k2++;
}
}
}

//判断右上边的输赢
for(var i=1;i<5;i++){
var flag = mychess[0]; //棋子颜色
var x = mychess[1]+i*50; //x轴坐标
var y = mychess[2]-i*50; //y轴坐标

for(var j=0;j<chesses.length;j++){
if(flag==chesses[j][0]&&x==chesses[j][1]&&y==chesses[j][2]){
k3++;
}
}
}

//判断左下边的输赢
for(var i=1;i<5;i++){
var flag = mychess[0]; //棋子颜色
var x = mychess[1]-i*50; //x轴坐标
var y = mychess[2]+i*50; //y轴坐标

for(var j=0;j<chesses.length;j++){
if(flag==chesses[j][0]&&x==chesses[j][1]&&y==chesses[j][2]){
k3++;
}
}
}

if(k>=4||k1>=4||k2>=4||k3>=4){
if(flag==1){
alert("黑棋赢了");
}else{
alert("白棋赢了");
}

}

}

//重新开始
function reseted(){
window.location.reload();
}

</script>

</head>
<body onload="ini()">
<h1>五子棋</h1>
<div id="gobang"></div>
<input class="reset" type="button" value="重新开始" onclick="reseted()" />
</body>
</html>

JavaScript五子棋小游戏

猜你喜欢