<!DOCTYPE html>
<html>
<head>
<title>中国象棋</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<body>
<div id="content">
</div>
<script type="text/javascript">
//车马相士将士相马车 8*11
var qzName=["車","馬","相","仕","将","仕","相","馬","車","炮","炮","兵","兵","兵","兵","兵"];//
var qzRedArray=new Array();
var qzBlackArray=new Array();
var qzArray=new Array();
var body_w=document.body.clientWidth;
var gameType=0;
body_w=body_w%9==0?body_w:body_w-body_w%9;//让坐标为整数
body_w=body_w<810?body_w:810;
console.log(document.body.clientWidth+"|"+body_w);
/
// var b=document.getElementsByTagName('body')[0];
var b=document.getElementById('content');
b.style.textAlign='center';
var np=document.createElement('div');
var nbut=document.createElement('div');
if(body_w==810){
np.style.width='1.1em';
np.style.float='right';
nbut.style.width='2.5em';
nbut.style.float='right';
nbut.style.padding='1em';
}else{
np.style.width='50%';
np.style.float='right';
nbut.style.width='40%';
nbut.style.float='right';
}
np.innerHTML='Good luck';
nbut.innerHTML='重新开始游戏';
nbut.fontSize=body_w/16+'px';
nbut.style.border='solid 2px red';
nbut.style.borderRadius='20%';
nbut.style.cursor='pointer';
nbut.style.fontWeight='bold';
nbut.style.color='red';
nbut.onclick=function () {
newGameStart();
};
np.id='mark';
np.style.fontFamily='微软雅黑';
np.style.fontSize=body_w/16+'px';
b.appendChild(nbut);
b.appendChild(np);
///
//var w=800,h=900;
var w=body_w/9*8,h=w/8*9;
var c=document.createElement('canvas');
var wh=w/2; var hh=h/2; var cell=w/8; var cellh=cell/2;
c.width=w+cell; c.height=h+cell; c.id="can";
b.appendChild(c);
var cxt=c.getContext("2d");
cxt.strokeStyle="#ff0000";
cxt.font=cell*0.8+"px 微软雅黑";
//坐标原点为中心,右下为正,左上为负
cxt.translate(wh+cellh,hh+cellh);
var mouseClickCount=0;
var qzRunTime=0;
c.onclick=function(event)
{
mouseClickCount+=1;
console.log("鼠标点击了 "+mouseClickCount+" 次_____________________________________________________");
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
x=x-c.offsetLeft-cellh-wh;y=y-c.offsetTop-cellh-hh;
x=Math.abs(x%cell)>cellh?(x>0?x-x%cell+cell:x-x%cell-cell):x-x%cell;
y=y>0?y-y%cell+cellh:y-y%cell-cellh;
if(gameType==1){
clickHere(x,y);
}else {
np.innerHTML="胜负已分莫强求";
}
console.log ('鼠标点击的坐标x:'+x+' y:'+y);
};
function clickHere(x,y) {
var qzHere=checkXYisEmpty(x,y);//空是true,有则返回棋子obj
var qzChoose=null;
for(i in qzArray){
if(qzArray[i].isChoose==true){
qzChoose=qzArray[i];
}
}
console.log(typeof qzHere);
if(qzHere===true){
//点击的地方是空的
if(qzChoose===null){
//没有选中的棋子
console.log("点击的地方是空的,没有选中的棋子");
}else{
//选中的棋子为qzChoose
if(qzChoose.go(x,y)===true){
/ 完成- 走!
qzRunTime+=1;
if(gameType==1){
np.innerHTML="棋局第"+qzRunTime+"步";
}
isJiangJun(qzChoose);
qzChoose.isChoose=false;
}
}
}else {
//点击的地方是object
if(qzChoose===null){
//没有选中的棋子
if(qzRunTime%2==0 && qzHere.side=='红方'){
console.log("红:之前没有选中棋子,所以选中点击的棋子,下choose");
qzHere.choose();
}else if(qzRunTime%2==1 && qzHere.side=='黑方'){
console.log("黑:之前没有选中棋子,所以选中点击的棋子,下choose");
qzHere.choose();
}else{
使用H5编写网页版象棋(源码)
最新推荐文章于 2024-08-01 13:42:52 发布
本文详细讲解如何使用H5技术编写一款网页版象棋游戏,通过实例探讨闭包在实现选项卡切换及象棋逻辑中的应用,附带完整源码供读者参考学习。
摘要由CSDN通过智能技术生成