https://download.csdn.net/download/xuhangsong/10579033 完整项目下载地址
几年前写的一个webSocket实现的五子棋对战功能,这次整理下分享一下,顺便以后自己也能回忆起来。
实现很简单,就一个html,一个js,再加个websocket.java和封装的传输类就能实现一个可以对战,可以发消息的五子棋功能,那是竟然还在用jdk1.7开发。。
接下来上代码,因为代码中当时写的时候加了注释,我现在回过来看很好理解各种业务设计,给我节约了很多时间。
chess.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.12.3.min.js" ></script>
<script type="text/javascript" src="../js/json2.js" ></script>
<script type="text/javascript" src="../js/rule.js" ></script>
<style type="text/css">
#background{
position: relative;
margin: 20px auto;
/*background: #EAC000;*/
}
.chessman{
border-radius: 15px;
width: 30px;
height: 30px;
margin: 0 auto;
}
.white{
background-color:white ;
}
.black{
background-color: black;
}
.grid,.b_grid{
float: left;
}
.message{
width: 320px;
height: 100px;
margin: 0 auto;
}
#messageContent{
width: 320px;
height: 80px;
}
</style>
</head>
<body>
<div id="background">
<!--<div id="back_grid"></div>-->
<div id="chess"></div>
</div>
<div class="message">
<textarea id="messageContent" disabled="disabled" readonly="readonly"></textarea>
<div><input id="message"/> <button onclick="WuZiQi.sendMessage()">发送</button></div>
</div>
</body>
</html>
rule.js,具体前端功能的实现都在这个js中了,棋盘背景是用canvas画的,上面盖着div块,用来落子><
var bout = false;//是否允许落子
var color = "";//自己落子颜色
var websocket = null;
var row = 15;
var col = 15;
var widthAndHeight = 30;//格子宽度高度
var WuZiQi = {
isEnd:function(xy,chessmanColor){//判断是否结束游戏
var id = parseInt(xy);
//竖的计算
var num = 1;
num = WuZiQi.shujia(num,id,chessmanColor);
num = WuZiQi.shujian(num,id,chessmanColor);
if(num>=5){
if(chessmanColor==color){
confirm("游戏结束!你赢了!");
}else{
confirm("游戏结束!你输了!");
}
return ;
}
num = 1;
num = WuZiQi.hengjia(num,id,chessmanColor);
num = WuZiQi.hengjian(num,id,chessmanColor);
if(num>=5){
if(chessmanColor==color){
confirm("游戏结束!你赢了!");
}else{
confirm("游戏结束!你输了!");
}
return ;
}
; num = 1;
num = WuZiQi.zuoxiejia(num,id,chessmanColor);
num = WuZiQi.zuoxiejian(num,id,chessmanColor);
if(num>=5){
if(chessmanColor==color){
confirm("游戏结束!你赢了!");
}else{
confirm("游戏结束!你输了!");
}
return ;
}
num = 1;
num = WuZiQi.youxiejia(num,id,chessmanColor);
num = WuZiQi.youxiejian(num,id,chessmanColor);
if(num>=5){
if(chessmanColor==color){
confirm("游戏结束!你赢了!");
}else{
confirm("游戏结束!你输了!");
}
return ;
}
},youxiejia:function(num,id,color){
var yu = id%row;
id