中国象棋
【中国象棋】是一款历史悠久、深受人们喜爱的策略类游戏。在Web前端技术中，我们可以使用HTML、CSS和JavaScript等语言来制作一款中国象棋游戏。玩家使用棋子（帅/相/士/炮/马/车/炮/卒）在棋盘上相互对弈，将对手的"帅"棋子吃掉即为胜利。
运行效果：
HTML源码：
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>中国象棋</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="box" id="box">
<div class="chess_left">
<canvas id="chess">对不起，您的浏览器不支持HTML5，请升级浏览器至IE9、firefox或者谷歌浏览器！</canvas>
<audio src="audio/click.wav" id="clickAudio" preload="auto"></audio>
<audio src="audio/select.wav" id="selectAudio" preload="auto"></audio>
<div>
<div class="bn_box" id="bnBox">
<input type="button" name="offensivePlay" id="tyroPlay" value="新手水平" />
<input type="button" name="offensivePlay" id="superPlay" value="中级水平" />
<input type="button" name="button" id="" value="大师水平" disabled />
<input type="button" name="regret" id="regretBn" value="悔棋" />
<input type="button" name="billBn" id="billBn" value="棋谱" class="bn_box" />
<input type="button" name="stypeBn" id="stypeBn" value="换肤" />
</div>
</div>
</div>
<div class="chess_right" id="chessRight">
<select name="billList" id="billList">
</select>
<ol id="billBox" class="bill_box">
</ol>
</div>
<div id="moveInfo" class="move_info"> </div>
</div>
<script src="js/common.js"></script>
<script src="js/play.js"></script>
<script src="js/AI.js"></script>
<script src="js/bill.js"></script>
<script src="js/gambit.js"></script>
<div style="text-align:center;clear:both">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>CSS源码：
css
@charset "gb2312";
body {
font-size: 12px;
line-height: 150%;
}
.box {
margin:0 auto;
width:460px;
position: relative;
}
.chess_left {
float:left;
text-align:center
}
.chess_right {
float:left;
display:none
}
.move_info {
float:left;
margin-top:20px
}
.bill_box {
height: 320px;
width: 80px;
overflow:auto;
}
.bill_box li {
cursor:pointer;
text-align:left
}
.bill_box li:hover {
cursor:pointer;
background: #C6A577;
}
.bill_box li:active {
cursor:pointer;
background: #fff;
}
#billList {
margin-top:20px
}
.bn_box {
display:none
}JS文件：
（1）AI.js
js
var AI = AI||{};
AI.historyTable = {};
AI.init = function(pace){
var bill = AI.historyBill || com.gambit;
if (bill.length){
var len=pace.length;
var arr=[];
for (var i=0;i< bill.length;i++){
if (bill[i].slice(0,len)==pace) {
arr.push(bill[i]);
}
}
if (arr.length){
var inx=Math.floor( Math.random() * arr.length );
AI.historyBill = arr ;
return arr[inx].slice(len,len+4).split("");
}else{
AI.historyBill = [] ;
}
}
var initTime = new Date().getTime();
AI.treeDepth=play.depth;
AI.number=0;
AI.setHistoryTable.lenght = 0
var val=AI.getAlphaBeta(-99999 ,99999, AI.treeDepth, com.arr2Clone(play.map),play.my);
if (!val||val.value==-8888) {
AI.treeDepth=2;
val=AI.getAlphaBeta(-99999 ,99999, AI.treeDepth, com.arr2Clone(play.map),play.my);
}
if (val&&val.value!=-8888) {
var man = play.mans[val.key];
var nowTime= new Date().getTime();
return [man.x,man.y,val.x,val.y]
}else {
return false;
}
}
AI.iterativeSearch = function (map, my){
var timeOut=100;
var initDepth = 1;
var maxDepth = 8;
AI.treeDepth=0;
var initTime = new Date().getTime();
var val = {};
for (var i=initDepth; i<=maxDepth; i++){
var nowTime= new Date().getTime();
AI.treeDepth=i;
AI.aotuDepth=i;
var val = AI.getAlphaBeta(-99999, 99999, AI.treeDepth , map ,my)
if (nowTime-initTime > timeOut){
return val;
}
}
return false;
}
AI.getMapAllMan = function (map, my){
var mans=[];
for (var i=0; i<map.length; i++){
for (var n=0; n<map[i].length; n++){
var key = map[i][n];
if (key && play.mans[key].my == my){
play.mans[key].x = n;
play.mans[key].y = i;
mans.push(play.mans[key])
}
}
}
return mans;
}
AI.getMoves = function (map, my){
var manArr = AI.getMapAllMan (map, my);
var moves = [];
var foul=play.isFoul;
for (var i=0; i<manArr.length; i++){
var man = manArr[i];
var val=man.bl(map);
for (var n=0; n<val.length; n++){
var x=man.x;
var y=man.y;
var newX=val[n][0];
var newY=val[n][1];
if (foul[0]!=x || foul[1]!=y || foul[2]!=newX || foul[3]!=newY ){
moves.push([x,y,newX,newY,man.key])
}
}
}
return moves;
}
AI.getAlphaBeta = function (A, B, depth, map ,my) {
if (depth == 0) {
return {"value":AI.evaluate(map , my)};
}
var moves = AI.getMoves(map , my );
for (var i=0; i < moves.length; i++) {
var move= moves[i];
var key = move[4];
var oldX= move[0];
var oldY= move[1];
var newX= move[2];
var newY= move[3];
var clearKey = map[ newY ][ newX ]||"";
map[ newY ][ newX ] = key;
delete map[ oldY ][ oldX ];
play.mans[key].x = newX;
play.mans[key].y = newY;
if (clearKey=="j0"||clearKey=="J0") {
play.mans[key] .x = oldX;
play.mans[key] .y = oldY;
map[ oldY ][ oldX ] = key;
delete map[ newY ][ newX ];
if (clearKey){
map[ newY ][ newX ] = clearKey;
}
return {"key":key,"x":newX,"y":newY,"value":8888};
}else {
var val = -AI.getAlphaBeta(-B, -A, depth - 1, map , -my).value;
play.mans[key] .x = oldX;
play.mans[key] .y = oldY;
map[ oldY ][ oldX ] = key;
delete map[ newY ][ newX ];
if (clearKey){
map[ newY ][ newX ] = clearKey;
}
if (val >= B) {
return {"key":key,"x":newX,"y":newY,"value":B};
}
if (val > A) {
A = val;
if (AI.treeDepth == depth) var rootKey={"key":key,"x":newX,"y":newY,"value":A};
}
}
}
if (AI.treeDepth == depth) {
if (!rootKey){
return false;
}else{
return rootKey;
}
}
return {"key":key,"x":newX,"y":newY,"value":A};
}
AI.setHistoryTable = function (txtMap,depth,value,my){
AI.setHistoryTable.lenght ++;
AI.historyTable[txtMap] = {depth:depth,value:value}
}
AI.evaluate = function (map,my){
var val=0;
for (var i=0; i<map.length; i++){
for (var n=0; n<map[i].length; n++){
var key = map[i][n];
if (key){
val += play.mans[key].value[i][n] * play.mans[key].my;
}
}
}
AI.number++;
return val*my;
}
AI.evaluate1 = function (map,my){
var val=0;
for (var i in play.mans){
var man=play.mans[i];
if (man.isShow){
val += man.value[man.y][man.x] * man.my;
}
}
AI.number++;
return val*my;
}（2）bill.js
js
var bill = bill || {};
bill.init = function (){
if (com.store){
clearInterval(bill.timer);
bill.setBillList(com.arr2Clone(com.initMap));
play.isPlay=false;
com.show();
}else {
bill.timer = setInterval("bill.init()",300);
}
}
bill.setBillList = function (map){
var list=com.get("billList")
for (var i=0; i < com.store.length ; i++){
var option = document.createElement('option');
option.text='����'+(i+1);
option.value=i;
list.add(option , null);
}
list.addEventListener("change", function(e) {
bill.setBox (com.store[this.value], map)
})
bill.setBox (com.store[0], map)
}
bill.setMove = function (bl,inx,map){
var map = com.arr2Clone(map);
for (var i=0; i<map.length; i++){
for (var n=0; n<map[i].length; n++){
var key = map[i][n];
if (key){
com.mans[key].x=n;
com.mans[key].y=i;
com.mans[key].isShow = true;
}
}
}
for (var i=0; i<= inx ; i++){
var n = i*4
var y = bl[n+1]
var newX = bl[n+2]
var x = bl[n+0]
var newY = bl[n+3]
if (com.mans[map[newY][newX]]) {
com.mans[map[newY][newX]].isShow = false;
}
com.mans[map[y][x]].x = newX;
com.mans[map[y][x]].y = newY;
if (i == inx) {
com.showPane(x ,y,newX,newY);
}
map[newY][newX] = map[y][x];
delete map[y][x];
}
return map;
}
bill.setBox = function (bl,initMap){
var map = com.arr2Clone(initMap);
var bl= bl.split("");
var h='';
for (var i=0; i< bl.length ; i+=4){
h +='<li id="move_'+(i/4)+'">';
var x = bl[i+0];
var y = bl[i+1];
var newX = bl[i+2];
var newY = bl[i+3];
h += com.createMove(map,x,y,newX,newY);
h +='</li>\n\r';
}
com.get("billBox").innerHTML = h;
var doms=com.get("billBox").getElementsByTagName("li");
for (var i=0; i<doms.length; i++){
doms[i].addEventListener("click", function(e) {
var inx = this.getAttribute("id").split("_")[1];
bill.setMove (bl , inx , initMap)
com.show();
})
}
}（3）common.js
js
var com = com||{};
com.init = function (stype){
com.nowStype= stype || com.getCookie("stype") ||"stype1";
var stype = com.stype[com.nowStype];
com.width = stype.width;
com.height = stype.height;
com.spaceX = stype.spaceX;
com.spaceY = stype.spaceY;
com.pointStartX = stype.pointStartX;
com.pointStartY = stype.pointStartY;
com.page = stype.page;
com.get("box").style.width = com.width+130+"px";
com.canvas = document.getElementById("chess");
com.ct = com.canvas.getContext("2d") ;
com.canvas.width = com.width;
com.canvas.height = com.height;
com.childList = com.childList||[];
com.loadImages(com.page);
}
com.stype = {
stype1:{
width:325,
height:402,
spaceX:35,
spaceY:36,
pointStartX:5,
pointStartY:19,
page:"stype_1"
},
stype2:{
width:530,
height:567,
spaceX:57,
spaceY:57,
pointStartX:-2,
pointStartY:0,
page:"stype_2"
}
}
com.get = function (id){
return document.getElementById(id)
}
window.onload = function(){
com.bg=new com.class.Bg();
com.dot = new com.class.Dot();
com.pane=new com.class.Pane();
com.pane.isShow=false;
com.childList=[com.bg,com.dot,com.pane];
com.mans ={};
com.createMans(com.initMap)
com.bg.show();
com.get("bnBox").style.display = "block";
//play.init();
com.get("billBn").addEventListener("click", function(e) {
if (confirm("�Ƿ�����Ծ֣���ʼ����о���")){
com.init();
com.get("chessRight").style.display = "block";
com.get("moveInfo").style.display = "none";
bill.init();
}
})
com.get("superPlay").addEventListener("click", function(e) {
if (confirm("ȷ�Ͽ�ʼ��ʦ�����ģ�")){
play.isPlay=true ;
com.get("chessRight").style.display = "none";
com.get("moveInfo").style.display = "block";
com.get("moveInfo").innerHTML="";
play.depth = 4;
play.init();
}
})
com.get("tyroPlay").addEventListener("click", function(e) {
if (confirm("ȷ�Ͽ�ʼ���ּ����ģ�")){
play.isPlay=true ;
com.get("chessRight").style.display = "none";
com.get("moveInfo").style.display = "block";
com.get("moveInfo").innerHTML="";
play.depth = 3;
play.init();
}
})
com.get("stypeBn").addEventListener("click", function(e) {
var stype =com.nowStype;
if (stype=="stype1") stype="stype2";
else if (stype=="stype2") stype="stype1";
com.init(stype);
com.show();
play.depth = 4;
play.init();
document.cookie="stype=" +stype;
clearInterval(timer);
var i=0;
var timer = setInterval(function (){
com.show();
if (i++>=5) clearInterval(timer);
},2000);
})
com.getData("js/gambit.all.js",
function(data){
com.gambit=data.split(" ");
AI.historyBill = com.gambit;
})
com.getData("js/store.js",
function(data){
com.store=data.split(" ");
})
}
com.loadImages = function(stype){
com.bgImg = new Image();
com.bgImg.src = "img/"+stype+"/bg.png";
com.dotImg = new Image();
com.dotImg.src = "img/"+stype+"/dot.png";
for (var i in com.args){
com[i] = {};
com[i].img = new Image();
com[i].img.src = "img/"+stype+"/"+ com.args[i].img +".png";
}
com.paneImg = new Image();
com.paneImg.src = "img/"+stype+"/r_box.png";
document.getElementsByTagName("body")[0].style.background= "url(img/"+stype+"/bg.jpg)";
}
com.show = function (){
com.ct.clearRect(0, 0, com.width, com.height);
for (var i=0; i<com.childList.length ; i++){
com.childList[i].show();
}
}
com.showPane = function (x,y,newX,newY){
com.pane.isShow=true;
com.pane.x= x ;
com.pane.y= y ;
com.pane.newX= newX ;
com.pane.newY= newY ;
}
com.createMans = function(map){
for (var i=0; i<map.length; i++){
for (var n=0; n<map[i].length; n++){
var key = map[i][n];
if (key){
com.mans[key]=new com.class.Man(key);
com.mans[key].x=n;
com.mans[key].y=i;
com.childList.push(com.mans[key])
}
}
}
}
com.alert = function (obj,f,n){
if (typeof obj !== "object") {
try{console.log(obj)} catch (e){}
}
var arr = [];
for (var i in obj) arr.push(i+" = "+obj[i]);
try{console.log(arr.join(n||"\n"))} catch (e){}
}
var z = com.alert;
com.getDomXY = function (dom){
var left = dom.offsetLeft;
var top = dom.offsetTop;
var current = dom.offsetParent;
while (current !== null){
left += current.offsetLeft;
top += current.offsetTop;
current = current.offsetParent;
}
return {x:left,y:top};
}
com.getCookie = function(name){
if (document.cookie.length>0){
start=document.cookie.indexOf(name + "=")
if (start!=-1){
start=start + name.length+1
end=document.cookie.indexOf(";",start)
if (end==-1) end=document.cookie.length
return unescape(document.cookie.substring(start,end))
}
}
return false;
}
com.arr2Clone = function (arr){
var newArr=[];
for (var i=0; i<arr.length ; i++){
newArr[i] = arr[i].slice();
}
return newArr;
}
com.getData = function (url,fun){
var XMLHttpRequestObject=false;
if(window.XMLHttpRequest){
XMLHttpRequestObject=new XMLHttpRequest();
}else if(window.ActiveXObject){
XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
}
if(XMLHttpRequestObject){
XMLHttpRequestObject.open("GET",url);
XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange=function (){
if(XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200){
fun (XMLHttpRequestObject.responseText)
}
}
XMLHttpRequestObject.send(null);
}
}
com.createMove = function (map,x,y,newX,newY){
var h="";
var man = com.mans[map[y][x]];
h+= man.text;
map[newY][newX] = map[y][x];
delete map[y][x];
if (man.my===1){
var mumTo=["һ","��","��","��","��","��","��","��","��","ʮ"];
newX=8-newX;
h+= mumTo[8-x];
if (newY > y) {
h+= "��";
if (man.pater == "m" || man.pater == "s" || man.pater == "x"){
h+= mumTo[newX];
}else {
h+= mumTo[newY - y -1];
}
}else if (newY < y) {
h+= "��";
if (man.pater == "m" || man.pater == "s" || man.pater == "x"){
h+= mumTo[newX];
}else {
h+= mumTo[y - newY -1];
}
}else {
h+= "ƽ";
h+= mumTo[newX];
}
}else{
var mumTo=["��","��","��","��","��","��","��","��","��","10"];
h+= mumTo[x];
if (newY > y) {
h+= "��";
if (man.pater == "M" || man.pater == "S" || man.pater == "X"){
h+= mumTo[newX];
}else {
h+= mumTo[newY - y-1];
}
}else if (newY < y) {
h+= "��";
if (man.pater == "M" || man.pater == "S" || man.pater == "X"){
h+= mumTo[newX];
}else {
h+= mumTo[y - newY-1];
}
}else {
h+= "ƽ";
h+= mumTo[newX];
}
}
return h;
}
com.initMap = [
['C0','M0','X0','S0','J0','S1','X1','M1','C1'],
[ , , , , , , , , ],
[ ,'P0', , , , , ,'P1', ],
['Z0', ,'Z1', ,'Z2', ,'Z3', ,'Z4'],
[ , , , , , , , , ],
[ , , , , , , , , ],
['z0', ,'z1', ,'z2', ,'z3', ,'z4'],
[ ,'p0', , , , , ,'p1', ],
[ , , , , , , , , ],
['c0','m0','x0','s0','j0','s1','x1','m1','c1']
];
com.initMap1 = [
[ , , ,, "J0" , , , , ],
[ , , , , , , , , ],
[ , , , , ,"c0", , , ],
[ , , , , , , , , ],
[ , , , , , , , , ],
[ , , , , , , , , ],
[ , , , , , , , , ],
[ , , , , , , , , ],
[ , , , ,"s0", , ,"C0", ],
[ , , ,"s1", ,"j0", , , ]
];
com.initMap1 = [
[ , , ,, "J0" , , , , ],
[ , , , , , , , , ],
[ , , , , ,"z0", , , ],
[ , , , , , , , , ],
[ , , , , , , , , ],
[ , , , , , , , , ],
[ , , , , , , , , ],
[ , , , , , , , , ],
[ , , , , , , , , ],
[ , , , "j0" ,, , , ]
];
com.keys = {
"c0":"c","c1":"c",
"m0":"m","m1":"m",
"x0":"x","x1":"x",
"s0":"s","s1":"s",
"j0":"j",
"p0":"p","p1":"p",
"z0":"z","z1":"z","z2":"z","z3":"z","z4":"z","z5":"z",
"C0":"c","C1":"C",
"M0":"M","M1":"M",
"X0":"X","X1":"X",
"S0":"S","S1":"S",
"J0":"J",
"P0":"P","P1":"P",
"Z0":"Z","Z1":"Z","Z2":"Z","Z3":"Z","Z4":"Z","Z5":"Z",
}
com.bylaw ={}
com.bylaw.c = function (x,y,map,my){
var d=[];
//������
for (var i=x-1; i>= 0; i--){
if (map[y][i]) {
if (com.mans[map[y][i]].my!=my) d.push([i,y]);
break
}else{
d.push([i,y])
}
}
for (var i=x+1; i <= 8; i++){
if (map[y][i]) {
if (com.mans[map[y][i]].my!=my) d.push([i,y]);
break
}else{
d.push([i,y])
}
}
for (var i = y-1 ; i >= 0; i--){
if (map[i][x]) {
if (com.mans[map[i][x]].my!=my) d.push([x,i]);
break
}else{
d.push([x,i])
}
}
for (var i = y+1 ; i<= 9; i++){
if (map[i][x]) {
if (com.mans[map[i][x]].my!=my) d.push([x,i]);
break
}else{
d.push([x,i])
}
}
return d;
}
com.bylaw.m = function (x,y,map,my){
var d=[];
if ( y-2>= 0 && x+1<= 8 && !play.map[y-1][x] &&(!com.mans[map[y-2][x+1]] || com.mans[map[y-2][x+1]].my!=my)) d.push([x+1,y-2]);
if ( y-1>= 0 && x+2<= 8 && !play.map[y][x+1] &&(!com.mans[map[y-1][x+2]] || com.mans[map[y-1][x+2]].my!=my)) d.push([x+2,y-1]);
if ( y+1<= 9 && x+2<= 8 && !play.map[y][x+1] &&(!com.mans[map[y+1][x+2]] || com.mans[map[y+1][x+2]].my!=my)) d.push([x+2,y+1]);
if ( y+2<= 9 && x+1<= 8 && !play.map[y+1][x] &&(!com.mans[map[y+2][x+1]] || com.mans[map[y+2][x+1]].my!=my)) d.push([x+1,y+2]);
if ( y+2<= 9 && x-1>= 0 && !play.map[y+1][x] &&(!com.mans[map[y+2][x-1]] || com.mans[map[y+2][x-1]].my!=my)) d.push([x-1,y+2]);
if ( y+1<= 9 && x-2>= 0 && !play.map[y][x-1] &&(!com.mans[map[y+1][x-2]] || com.mans[map[y+1][x-2]].my!=my)) d.push([x-2,y+1]);
if ( y-1>= 0 && x-2>= 0 && !play.map[y][x-1] &&(!com.mans[map[y-1][x-2]] || com.mans[map[y-1][x-2]].my!=my)) d.push([x-2,y-1]);
if ( y-2>= 0 && x-1>= 0 && !play.map[y-1][x] &&(!com.mans[map[y-2][x-1]] || com.mans[map[y-2][x-1]].my!=my)) d.push([x-1,y-2]);
return d;
}
com.bylaw.x = function (x,y,map,my){
var d=[];
if (my===1){
if ( y+2<= 9 && x+2<= 8 && !play.map[y+1][x+1] && (!com.mans[map[y+2][x+2]] || com.mans[map[y+2][x+2]].my!=my)) d.push([x+2,y+2]);
if ( y+2<= 9 && x-2>= 0 && !play.map[y+1][x-1] && (!com.mans[map[y+2][x-2]] || com.mans[map[y+2][x-2]].my!=my)) d.push([x-2,y+2]);
if ( y-2>= 5 && x+2<= 8 && !play.map[y-1][x+1] && (!com.mans[map[y-2][x+2]] || com.mans[map[y-2][x+2]].my!=my)) d.push([x+2,y-2]);
if ( y-2>= 5 && x-2>= 0 && !play.map[y-1][x-1] && (!com.mans[map[y-2][x-2]] || com.mans[map[y-2][x-2]].my!=my)) d.push([x-2,y-2]);
}else{
if ( y+2<= 4 && x+2<= 8 && !play.map[y+1][x+1] && (!com.mans[map[y+2][x+2]] || com.mans[map[y+2][x+2]].my!=my)) d.push([x+2,y+2]);
if ( y+2<= 4 && x-2>= 0 && !play.map[y+1][x-1] && (!com.mans[map[y+2][x-2]] || com.mans[map[y+2][x-2]].my!=my)) d.push([x-2,y+2]);
if ( y-2>= 0 && x+2<= 8 && !play.map[y-1][x+1] && (!com.mans[map[y-2][x+2]] || com.mans[map[y-2][x+2]].my!=my)) d.push([x+2,y-2]);
if ( y-2>= 0 && x-2>= 0 && !play.map[y-1][x-1] && (!com.mans[map[y-2][x-2]] || com.mans[map[y-2][x-2]].my!=my)) d.push([x-2,y-2]);
}
return d;
}
com.bylaw.s = function (x,y,map,my){
var d=[];
if (my===1){
if ( y+1<= 9 && x+1<= 5 && (!com.mans[map[y+1][x+1]] || com.mans[map[y+1][x+1]].my!=my)) d.push([x+1,y+1]);
if ( y+1<= 9 && x-1>= 3 && (!com.mans[map[y+1][x-1]] || com.mans[map[y+1][x-1]].my!=my)) d.push([x-1,y+1]);
if ( y-1>= 7 && x+1<= 5 && (!com.mans[map[y-1][x+1]] || com.mans[map[y-1][x+1]].my!=my)) d.push([x+1,y-1]);
if ( y-1>= 7 && x-1>= 3 && (!com.mans[map[y-1][x-1]] || com.mans[map[y-1][x-1]].my!=my)) d.push([x-1,y-1]);
}else{
if ( y+1<= 2 && x+1<= 5 && (!com.mans[map[y+1][x+1]] || com.mans[map[y+1][x+1]].my!=my)) d.push([x+1,y+1]);
if ( y+1<= 2 && x-1>= 3 && (!com.mans[map[y+1][x-1]] || com.mans[map[y+1][x-1]].my!=my)) d.push([x-1,y+1]);
if ( y-1>= 0 && x+1<= 5 && (!com.mans[map[y-1][x+1]] || com.mans[map[y-1][x+1]].my!=my)) d.push([x+1,y-1]);
if ( y-1>= 0 && x-1>= 3 && (!com.mans[map[y-1][x-1]] || com.mans[map[y-1][x-1]].my!=my)) d.push([x-1,y-1]);
}
return d;
}
com.bylaw.j = function (x,y,map,my){
var d=[];
var isNull=(function (y1,y2){
var y1=com.mans["j0"].y;
var x1=com.mans["J0"].x;
var y2=com.mans["J0"].y;
for (var i=y1-1; i>y2; i--){
if (map[i][x1]) return false;
}
return true;
})();
if (my===1){
if ( y+1<= 9 && (!com.mans[map[y+1][x]] || com.mans[map[y+1][x]].my!=my)) d.push([x,y+1]);
if ( y-1>= 7 && (!com.mans[map[y-1][x]] || com.mans[map[y-1][x]].my!=my)) d.push([x,y-1]);
if ( com.mans["j0"].x == com.mans["J0"].x &&isNull) d.push([com.mans["J0"].x,com.mans["J0"].y]);
}else{
if ( y+1<= 2 && (!com.mans[map[y+1][x]] || com.mans[map[y+1][x]].my!=my)) d.push([x,y+1]);
if ( y-1>= 0 && (!com.mans[map[y-1][x]] || com.mans[map[y-1][x]].my!=my)) d.push([x,y-1]);
if ( com.mans["j0"].x == com.mans["J0"].x &&isNull) d.push([com.mans["j0"].x,com.mans["j0"].y]);
}
if ( x+1<= 5 && (!com.mans[map[y][x+1]] || com.mans[map[y][x+1]].my!=my)) d.push([x+1,y]);
if ( x-1>= 3 && (!com.mans[map[y][x-1]] || com.mans[map[y][x-1]].my!=my))d.push([x-1,y]);
return d;
}
com.bylaw.p = function (x,y,map,my){
var d=[];
var n=0;
for (var i=x-1; i>= 0; i--){
if (map[y][i]) {
if (n==0){
n++;
continue;
}else{
if (com.mans[map[y][i]].my!=my) d.push([i,y]);
break
}
}else{
if(n==0) d.push([i,y])
}
}
var n=0;
for (var i=x+1; i <= 8; i++){
if (map[y][i]) {
if (n==0){
n++;
continue;
}else{
if (com.mans[map[y][i]].my!=my) d.push([i,y]);
break
}
}else{
if(n==0) d.push([i,y])
}
}
var n=0;
for (var i = y-1 ; i >= 0; i--){
if (map[i][x]) {
if (n==0){
n++;
continue;
}else{
if (com.mans[map[i][x]].my!=my) d.push([x,i]);
break
}
}else{
if(n==0) d.push([x,i])
}
}
var n=0;
for (var i = y+1 ; i<= 9; i++){
if (map[i][x]) {
if (n==0){
n++;
continue;
}else{
if (com.mans[map[i][x]].my!=my) d.push([x,i]);
break
}
}else{
if(n==0) d.push([x,i])
}
}
return d;
}
com.bylaw.z = function (x,y,map,my){
var d=[];
if (my===1){
if ( y-1>= 0 && (!com.mans[map[y-1][x]] || com.mans[map[y-1][x]].my!=my)) d.push([x,y-1]);
if ( x+1<= 8 && y<=4 && (!com.mans[map[y][x+1]] || com.mans[map[y][x+1]].my!=my)) d.push([x+1,y]);
if ( x-1>= 0 && y<=4 && (!com.mans[map[y][x-1]] || com.mans[map[y][x-1]].my!=my))d.push([x-1,y]);
}else{
if ( y+1<= 9 && (!com.mans[map[y+1][x]] || com.mans[map[y+1][x]].my!=my)) d.push([x,y+1]);
if ( x+1<= 8 && y>=6 && (!com.mans[map[y][x+1]] || com.mans[map[y][x+1]].my!=my)) d.push([x+1,y]);
if ( x-1>= 0 && y>=6 && (!com.mans[map[y][x-1]] || com.mans[map[y][x-1]].my!=my))d.push([x-1,y]);
}
return d;
}
com.value = {
c:[
[206, 208, 207, 213, 214, 213, 207, 208, 206],
[206, 212, 209, 216, 233, 216, 209, 212, 206],
[206, 208, 207, 214, 216, 214, 207, 208, 206],
[206, 213, 213, 216, 216, 216, 213, 213, 206],
[208, 211, 211, 214, 215, 214, 211, 211, 208],
[208, 212, 212, 214, 215, 214, 212, 212, 208],
[204, 209, 204, 212, 214, 212, 204, 209, 204],
[198, 208, 204, 212, 212, 212, 204, 208, 198],
[200, 208, 206, 212, 200, 212, 206, 208, 200],
[194, 206, 204, 212, 200, 212, 204, 206, 194]
],
m:[
[90, 90, 90, 96, 90, 96, 90, 90, 90],
[90, 96,103, 97, 94, 97,103, 96, 90],
[92, 98, 99,103, 99,103, 99, 98, 92],
[93,108,100,107,100,107,100,108, 93],
[90,100, 99,103,104,103, 99,100, 90],
[90, 98,101,102,103,102,101, 98, 90],
[92, 94, 98, 95, 98, 95, 98, 94, 92],
[93, 92, 94, 95, 92, 95, 94, 92, 93],
[85, 90, 92, 93, 78, 93, 92, 90, 85],
[88, 85, 90, 88, 90, 88, 90, 85, 88]
],
x:[
[0, 0,20, 0, 0, 0,20, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0,23, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0,20, 0, 0, 0,20, 0, 0],
[0, 0,20, 0, 0, 0,20, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[18,0, 0, 0,23, 0, 0, 0,18],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0,20, 0, 0, 0,20, 0, 0]
],
s:[
[0, 0, 0,20, 0,20, 0, 0, 0],
[0, 0, 0, 0,23, 0, 0, 0, 0],
[0, 0, 0,20, 0,20, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0,20, 0,20, 0, 0, 0],
[0, 0, 0, 0,23, 0, 0, 0, 0],
[0, 0, 0,20, 0,20, 0, 0, 0]
],
j:[
[0, 0, 0, 8888, 8888, 8888, 0, 0, 0],
[0, 0, 0, 8888, 8888, 8888, 0, 0, 0],
[0, 0, 0, 8888, 8888, 8888, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 8888, 8888, 8888, 0, 0, 0],
[0, 0, 0, 8888, 8888, 8888, 0, 0, 0],
[0, 0, 0, 8888, 8888, 8888, 0, 0, 0]
],
p:[
[100, 100, 96, 91, 90, 91, 96, 100, 100],
[ 98, 98, 96, 92, 89, 92, 96, 98, 98],
[ 97, 97, 96, 91, 92, 91, 96, 97, 97],
[ 96, 99, 99, 98, 100, 98, 99, 99, 96],
[ 96, 96, 96, 96, 100, 96, 96, 96, 96],
[ 95, 96, 99, 96, 100, 96, 99, 96, 95],
[ 96, 96, 96, 96, 96, 96, 96, 96, 96],
[ 97, 96, 100, 99, 101, 99, 100, 96, 97],
[ 96, 97, 98, 98, 98, 98, 98, 97, 96],
[ 96, 96, 97, 99, 99, 99, 97, 96, 96]
],
z:[
[ 9, 9, 9, 11, 13, 11, 9, 9, 9],
[19, 24, 34, 42, 44, 42, 34, 24, 19],
[19, 24, 32, 37, 37, 37, 32, 24, 19],
[19, 23, 27, 29, 30, 29, 27, 23, 19],
[14, 18, 20, 27, 29, 27, 20, 18, 14],
[ 7, 0, 13, 0, 16, 0, 13, 0, 7],
[ 7, 0, 7, 0, 15, 0, 7, 0, 7],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
}
com.value.C = com.arr2Clone(com.value.c).reverse();
com.value.M = com.arr2Clone(com.value.m).reverse();
com.value.X = com.value.x;
com.value.S = com.value.s;
com.value.J = com.value.j;
com.value.P = com.arr2Clone(com.value.p).reverse();
com.value.Z = com.arr2Clone(com.value.z).reverse();
com.args={
'c':{text:"��", img:'r_c', my:1 ,bl:"c", value:com.value.c},
'm':{text:"��", img:'r_m', my:1 ,bl:"m", value:com.value.m},
'x':{text:"��", img:'r_x', my:1 ,bl:"x", value:com.value.x},
's':{text:"��", img:'r_s', my:1 ,bl:"s", value:com.value.s},
'j':{text:"��", img:'r_j', my:1 ,bl:"j", value:com.value.j},
'p':{text:"��", img:'r_p', my:1 ,bl:"p", value:com.value.p},
'z':{text:"��", img:'r_z', my:1 ,bl:"z", value:com.value.z},
'C':{text:"܇", img:'b_c', my:-1 ,bl:"c", value:com.value.C},
'M':{text:"�R", img:'b_m', my:-1 ,bl:"m", value:com.value.M},
'X':{text:"��", img:'b_x', my:-1 ,bl:"x", value:com.value.X},
'S':{text:"ʿ", img:'b_s', my:-1 ,bl:"s", value:com.value.S},
'J':{text:"˧", img:'b_j', my:-1 ,bl:"j", value:com.value.J},
'P':{text:"��", img:'b_p', my:-1 ,bl:"p", value:com.value.P},
'Z':{text:"��", img:'b_z', my:-1 ,bl:"z", value:com.value.Z}
};
com.class = com.class || {}
com.class.Man = function (key, x, y){
this.pater = key.slice(0,1);
var o=com.args[this.pater]
this.x = x||0;
this.y = y||0;
this.key = key ;
this.my = o.my;
this.text = o.text;
this.value = o.value;
this.isShow = true;
this.alpha = 1;
this.ps = [];
this.show = function (){
if (this.isShow) {
com.ct.save();
com.ct.globalAlpha = this.alpha;
com.ct.drawImage(com[this.pater].img,com.spaceX * this.x + com.pointStartX , com.spaceY * this.y +com.pointStartY);
com.ct.restore();
}
}
this.bl = function (map){
var map = map || play.map
return com.bylaw[o.bl](this.x,this.y,map,this.my)
}
}
com.class.Bg = function (img, x, y){
this.x = x||0;
this.y = y||0;
this.isShow = true;
this.show = function (){
if (this.isShow) com.ct.drawImage(com.bgImg, com.spaceX * this.x,com.spaceY * this.y);
}
}
com.class.Pane = function (img, x, y){
this.x = x||0;
this.y = y||0;
this.newX = x||0;
this.newY = y||0;
this.isShow = true;
this.show = function (){
if (this.isShow) {
com.ct.drawImage(com.paneImg, com.spaceX * this.x + com.pointStartX , com.spaceY * this.y + com.pointStartY)
com.ct.drawImage(com.paneImg, com.spaceX * this.newX + com.pointStartX , com.spaceY * this.newY + com.pointStartY)
}
}
}
com.class.Dot = function (img, x, y){
this.x = x||0;
this.y = y||0;
this.isShow = true;
this.dots=[]
this.show = function (){
for (var i=0; i<this.dots.length;i++){
if (this.isShow) com.ct.drawImage(com.dotImg, com.spaceX * this.dots[i][0]+10 + com.pointStartX ,com.spaceY * this.dots[i][1]+10 + com.pointStartY)
}
}
}
com.init();（4）play.js
js
var play = play||{};
play.init = function (){
play.my = 1;
play.map = com.arr2Clone (com.initMap);
play.nowManKey = false;
play.pace = [];
play.isPlay = true ;
play.mans = com.mans;
play.bylaw = com.bylaw;
play.show = com.show;
play.showPane = com.showPane;
play.isOffensive = true;
play.depth = play.depth || 3;
play.isFoul = false;
com.pane.isShow = false;
for (var i=0; i<play.map.length; i++){
for (var n=0; n<play.map[i].length; n++){
var key = play.map[i][n];
if (key){
com.mans[key].x=n;
com.mans[key].y=i;
com.mans[key].isShow = true;
}
}
}
play.show();
com.canvas.addEventListener("click",play.clickCanvas)
com.get("regretBn").addEventListener("click", function(e) {
play.regret();
})
}
play.regret = function (){
var map = com.arr2Clone(com.initMap);
for (var i=0; i<map.length; i++){
for (var n=0; n<map[i].length; n++){
var key = map[i][n];
if (key){
com.mans[key].x=n;
com.mans[key].y=i;
com.mans[key].isShow = true;
}
}
}
var pace= play.pace;
pace.pop();
pace.pop();
for (var i=0; i<pace.length; i++){
var p= pace[i].split("")
var x = parseInt(p[0], 10);
var y = parseInt(p[1], 10);
var newX = parseInt(p[2], 10);
var newY = parseInt(p[3], 10);
var key=map[y][x];
//try{
var cMan=map[newY][newX];
if (cMan) com.mans[map[newY][newX]].isShow = false;
com.mans[key].x = newX;
com.mans[key].y = newY;
map[newY][newX] = key;
delete map[y][x];
if (i==pace.length-1){
com.showPane(newX ,newY,x,y)
}
}
play.map = map;
play.my=1;
play.isPlay=true;
com.show();
}
play.clickCanvas = function (e){
if (!play.isPlay) return false;
var key = play.getClickMan(e);
var point = play.getClickPoint(e);
var x = point.x;
var y = point.y;
if (key){
play.clickMan(key,x,y);
}else {
play.clickPoint(x,y);
}
play.isFoul = play.checkFoul();
}
play.clickMan = function (key,x,y){
var man = com.mans[key];
if (play.nowManKey&&play.nowManKey != key && man.my != com.mans[play.nowManKey ].my){
if (play.indexOfPs(com.mans[play.nowManKey].ps,[x,y])){
man.isShow = false;
var pace=com.mans[play.nowManKey].x+""+com.mans[play.nowManKey].y
delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
play.map[y][x] = play.nowManKey;
com.showPane(com.mans[play.nowManKey].x ,com.mans[play.nowManKey].y,x,y)
com.mans[play.nowManKey].x = x;
com.mans[play.nowManKey].y = y;
com.mans[play.nowManKey].alpha = 1
play.pace.push(pace+x+y);
play.nowManKey = false;
com.pane.isShow = false;
com.dot.dots = [];
com.show()
com.get("clickAudio").play();
setTimeout("play.AIPlay()",500);
if (key == "j0") play.showWin (-1);
if (key == "J0") play.showWin (1);
}
}else{
if (man.my===1){
if (com.mans[play.nowManKey]) com.mans[play.nowManKey].alpha = 1 ;
man.alpha = 0.6;
com.pane.isShow = false;
play.nowManKey = key;
com.mans[key].ps = com.mans[key].bl();
com.dot.dots = com.mans[key].ps
com.show();
com.get("selectAudio").play();
}
}
}
play.clickPoint = function (x,y){
var key=play.nowManKey;
var man=com.mans[key];
if (play.nowManKey){
if (play.indexOfPs(com.mans[key].ps,[x,y])){
var pace=man.x+""+man.y
delete play.map[man.y][man.x];
play.map[y][x] = key;
com.showPane(man.x ,man.y,x,y)
man.x = x;
man.y = y;
man.alpha = 1;
play.pace.push(pace+x+y);
play.nowManKey = false;
com.dot.dots = [];
com.show();
com.get("clickAudio").play();
setTimeout("play.AIPlay()",500);
}else{
}
}
}
play.AIPlay = function (){
play.my = -1 ;
var pace=AI.init(play.pace.join(""))
if (!pace) {
play.showWin (1);
return ;
}
play.pace.push(pace.join(""));
var key=play.map[pace[1]][pace[0]]
play.nowManKey = key;
var key=play.map[pace[3]][pace[2]];
if (key){
play.AIclickMan(key,pace[2],pace[3]);
}else {
play.AIclickPoint(pace[2],pace[3]);
}
com.get("clickAudio").play();
}
play.checkFoul = function(){
var p=play.pace;
var len=parseInt(p.length,10);
if (len>11&&p[len-1] == p[len-5] &&p[len-5] == p[len-9]){
return p[len-4].split("");
}
return false;
}
play.AIclickMan = function (key,x,y){
var man = com.mans[key];
man.isShow = false;
delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
play.map[y][x] = play.nowManKey;
play.showPane(com.mans[play.nowManKey].x ,com.mans[play.nowManKey].y,x,y)
com.mans[play.nowManKey].x = x;
com.mans[play.nowManKey].y = y;
play.nowManKey = false;
com.show()
if (key == "j0") play.showWin (-1);
if (key == "J0") play.showWin (1);
}
play.AIclickPoint = function (x,y){
var key=play.nowManKey;
var man=com.mans[key];
if (play.nowManKey){
delete play.map[com.mans[play.nowManKey].y][com.mans[play.nowManKey].x];
play.map[y][x] = key;
com.showPane(man.x,man.y,x,y)
man.x = x;
man.y = y;
play.nowManKey = false;
}
com.show();
}
play.indexOfPs = function (ps,xy){
for (var i=0; i<ps.length; i++){
if (ps[i][0]==xy[0]&&ps[i][1]==xy[1]) return true;
}
return false;
}
play.getClickPoint = function (e){
var domXY = com.getDomXY(com.canvas);
var x=Math.round((e.pageX-domXY.x-com.pointStartX-20)/com.spaceX)
var y=Math.round((e.pageY-domXY.y-com.pointStartY-20)/com.spaceY)
return {"x":x,"y":y}
}
play.getClickMan = function (e){
var clickXY=play.getClickPoint(e);
var x=clickXY.x;
var y=clickXY.y;
if (x < 0 || x>8 || y < 0 || y > 9) return false;
return (play.map[y][x] && play.map[y][x]!="0") ? play.map[y][x] : false;
}
play.showWin = function (my){
play.isPlay = false;
if (my===1){
alert("��ϲ�㣬��Ӯ�ˣ�");
}else{
alert("���ź��������ˣ�");
}
}注意：
由于博客字数限制，本篇文章只展示了部分代码。本项目的完整代码及素材包关注+私信我获取