⽤html+css+js实现中国象棋⼩游戏开发项⽬
⽤html+css+js中国象棋⼩游戏开发项⽬
最近刚学习完JS的相关课程，跟着⽼师做了两个⼩游戏项⽬，就已经抑制不住内⼼的⼩激动，想着要迫不及待的着⼿准备做⼀个⽹页⼩游戏——中国象棋
由于从⼩就⽐较喜欢中国象棋，对它的游戏规则还是⽐较了解的，但是，⽬前来说对于怎么⽤JS来实现，还是没有太多的思路：
由于这是⼩⽩第⼀个⾃⼰做的⼩项⽬，因此，从今天开始，我将每天记录⾃⼰的开发⽇志：
第⼀天 2016年9⽉23⽇：
⾸先，在⽹上了棋盘，和棋⼦的⼀些图⽚素材，接着⽤html+css+js实现游戏的初始化界⾯，先附⼀张初始化界⾯的总的效果图：
⽬前的初始化界⾯只是实现了棋⼦的总体布局，和单击每个棋⼦后会出现红⾊边框的简单效果，我将重点对这两个⽅⾯进⾏介绍。
第⼀个⽅⾯：棋⼦的总体布局
1、棋盘我采⽤的是⼀个⼤的div，通过给div设置背景图⽚来实现，由于刚学的JS所以棋⼦部分的页⾯结构，是通过JS动态添加的，因此我的HTML⽂档相当简单；
2、棋⼦的布局，通过效果图可以看出，我将棋⼦活动的范围划分成9*10的格⼦单元，每个单元都有⾏标R（范围从0~8）和列标C（范围从0`9），具体划分图如下：
网页游戏小游戏3、给棋盘和后续要添加的棋⼦设置css样式，样式代码如下：
#chess_box{
width:360px;
height:400px;
padding:20px;
margin:0 auto;
position:relative;
background:url("../images/chess.jpg") no-repeat;
cursor:pointer;
}
#chess_box>div{
width:33px;
height:33px;
position:absolute;
background:url("../images/chess.png") no-repeat;
border:1px solid #D3BF9A;
border-radius:50%;
}
#chess_box>div:hover{box-shadow:1px 2px 5px rgba(116,95,59,0.7);}
#chess_border{
width:36px;
height:36px;
background:url("../images/chess_boder.png") no-repeat;
position:absolute;
}
这样⼀来，棋盘的样式效果和棋⼦的样式效果就有了，接下来就⽤JS初始化界⾯，给页⾯添加棋⼦元素，并且给每个棋⼦绑定单击事件；整个JS采⽤的是⾯向对象的⽅法来做的：
第⼆⽅⾯：⽤JS实现页⾯初始化
1、创建棋⼦对象j集合，为每个棋⼦对象设置坐标属性
2、遍历棋⼦对象集合中的每个棋⼦对象，根据其坐标在页⾯相应位置创建div元素，并设置它的lef属性为下标乘以每个单元格宽度加上边距
3、遍历过程中为每个div元素绑定单击事件
JS实现的代码如下
var game={
RN:10,//⾏数
CN:9,//列数
CSIZE:40,//每个单元格⼤⼩
OFFSET:20,//单元格区域距离最外层边界的距离，
URL:"images/chess.png",//保存所有棋⼦的图⽚地址
chessPieces:{//保存所有棋⼦的初始位置坐标
redC1:{r:0,c:0,x:-144,y:0},
redC2:{r:0,c:8,x:-144,y:0},
redM1:{r:0,c:1,x:-108,y:0},
redM2:{r:0,c:7,x:-108,y:0},
redX1:{r:0,c:2,x:-72,y:0},
redX2:{r:0,c:6,x:-72,y:0},
redS1:{r:0,c:3,x:-36,y:0},
redS2:{r:0,c:5,x:-36,y:0},
redB2:{r:0,c:4,x:0,y:0},
redP1:{r:2,c:1,x:-180,y:0},
redP2:{r:2,c:7,x:-180,y:0},
redZ1:{r:3,c:0,x:-216,y:0},
redZ2:{r:3,c:2,x:-216,y:0},
redZ3:{r:3,c:4,x:-216,y:0},
redZ4:{r:3,c:6,x:-216,y:0},
redZ5:{r:3,c:8,x:-216,y:0},
blueC1:{r:9,c:0,x:-144,y:-36},
blueC2:{r:9,c:8,x:-144,y:-36},
blueM1:{r:9,c:1,x:-108,y:-36},
blueM2:{r:9,c:7,x:-108,y:-36},
blueX1:{r:9,c:2,x:-72,y:-36},
blueX2:{r:9,c:6,x:-72,y:-36},
blueS1:{r:9,c:3,x:-36,y:-36},
blueS2:{r:9,c:5,x:-36,y:-36},
blueB2:{r:9,c:4,x:0,y:-36},
blueP1:{r:7,c:1,x:-180,y:-36},
blueP2:{r:7,c:7,x:-180,y:-36},
blueZ1:{r:6,c:0,x:-216,y:-36},
blueZ2:{r:6,c:2,x:-216,y:-36},
blueZ3:{r:6,c:4,x:-216,y:-36},
blueZ4:{r:6,c:6,x:-216,y:-36},
blueZ5:{r:6,c:8,x:-216,y:-36},
},
start:function(){
//初始化棋盘
//创建⽂档⽚段
var ateDocumentFragment();
var ElementById("chess_box");
//遍历chessPieces中的每⼀个对象，获取当前对象的r,c,x,y属性分别保存在变量r,c,x,y中
for(var key in this.chessPieces){
var r=this.chessPieces[key].r;
var c=this.chessPieces[key].c;
var x=this.chessPieces[key].x;
var y=this.chessPieces[key].y;
//⽣成div元素，设置其背景url为URL，设置其left属性为r*CSIZE+OFFSET；设置其top属性为c*CSIZE+OFFSET    var ateElement("div");
div.style.background="url('"+this.URL+"') no-repeat "+x+"px "+y+"px";
div.style.left=c*this.CSIZE+this.OFFSET+"px";
p=r*this.CSIZE+this.OFFSET+"px";
div.className=key;
frag.appendChild(div);
div.οnclick=function(){
if(document.querySelector("span")){
}
var ateElement("span");
span.style.left=this.style.left;
span.style.left=this.style.left;
p=p;
span.id="chess_border";
chess.appendChild(span);
}
}
chess.appendChild(frag);
},
};
game.start();
项⽬第⼆天：2016年9⽉24⽇
今天主要实现了给棋⼦绑定了移动的⽅法，并设置了其移动的规则，⾸先还是先附上今天完成的效果图
为实现以上效果，关键有两个算法逻辑，⼀个是利⽤单击事件触发棋⼦的移动⽅法；另⼀个便是棋⼦移动的规则：
1、绑定单击事件，这⾥的单击事件我在昨天的基础上进⾏了优化，不是给每个棋⼦绑定单击事件，⽽是给棋⼦的⽗级元素（也就是整个棋盘div）绑定事件监听，利⽤事件冒泡来触发每个棋⼦的单击事件；主要⽤到的知识点为：
element.addEventListener("click",function(e){具体移动棋⼦的语句块});
2、事件触发时，棋⼦移动的⽅法逻辑如下：
1、⿏标点击在棋⼦上⾯的时候，⾸先判断是否有其他的棋⼦被激活
//如果有其他棋⼦被激活（页⾯中存在span元素）再执⾏以下程序
//如果已激活的元素与⽬标元素不是同⼀颜⾊棋⼦
//到已经激活的元素，保存其下标位置
//保存⽬标元素的下标位置
/
/将已激活的元素的下标和⽬标元素的下标作为判断棋⼦是否移动⽅法的参数传⼊
//如果棋⼦能够移动到⽬标位置
//移除⽬标位置的元素，调⽤更新棋⼦位置的⽅法将当前位置的元素替换（吃⼦的逻辑） //如果不能，则将span的位置修改到⽬标位置
//如果已激活的元素与⽬标元素是同⼀颜⾊棋⼦
//将span的位置修改到⽬标位置
//如果没有其棋⼦被激活，执⾏更新棋⼦位置的⽅法
//将span的位置修改到⽬标位置
2、⿏标点击在空⽩处的时候；
//获取⿏标的位置，将⿏标的位置转换为棋盘中对应单元格的下标位置
//如果存在已激活的棋⼦
//获得已激活的棋⼦的下标位置
//调⽤判断棋⼦能否移动的⽅法
如果能够移动
调⽤更新棋⼦位置的⽅法将当前位置的元素替换（移动的逻辑）
3、判断棋⼦能否移动的⽅法的逻辑，就不在赘述，详见以下代码中的canMove()⽅法
var game={
RN:10,//⾏数
CN:9,//列数
CSIZE:40,//每个单元格⼤⼩
OFFSET:20,//单元格区域距离最外层边界的距离，
URL:"images/chess.png",//保存所有棋⼦的图⽚地址
data:null,//实时保存棋盘中棋⼦的对象
chessPieces:[//保存所有棋⼦的初始位置坐标
{name:'redC1',r:0,c:0,x:-144,y:0},
{name:'redC2',r:0,c:8,x:-144,y:0},
{name:'redM1',r:0,c:1,x:-108,y:0},
{name:'redM2',r:0,c:7,x:-108,y:0},
{name:'redX1',r:0,c:2,x:-72,y:0},
{name:'redX2',r:0,c:6,x:-72,y:0},
{name:'redS1',r:0,c:3,x:-36,y:0},
{name:'redS2',r:0,c:5,x:-36,y:0},
{name:'redB0',r:0,c:4,x:0,y:0},
{name:'redP1',r:2,c:1,x:-180,y:0},
{name:'redP2',r:2,c:7,x:-180,y:0},
{name:'redZ1',r:3,c:0,x:-216,y:0},
{name:'redZ2',r:3,c:2,x:-216,y:0},
{name:'redZ3',r:3,c:4,x:-216,y:0},
{name:'redZ4',r:3,c:6,x:-216,y:0},
{name:'redZ5',r:3,c:8,x:-216,y:0},
{name:'blueC1',r:9,c:0,x:-144,y:-36},
{name:'blueC2',r:9,c:8,x:-144,y:-36},
{name:'blueM1',r:9,c:1,x:-108,y:-36},
{name:'blueM2',r:9,c:7,x:-108,y:-36},
{name:'blueX1',r:9,c:2,x:-72,y:-36},
{name:'blueX2',r:9,c:6,x:-72,y:-36},
{name:'blueS1',r:9,c:3,x:-36,y:-36},
{name:'blueS2',r:9,c:5,x:-36,y:-36},
{name:'blueB0',r:9,c:4,x:0,y:-36},
{name:'blueP1',r:7,c:1,x:-180,y:-36},
{name:'blueP2',r:7,c:7,x:-180,y:-36},
{name:'blueZ1',r:6,c:0,x:-216,y:-36},
{name:'blueZ2',r:6,c:2,x:-216,y:-36},
{name:'blueZ3',r:6,c:4,x:-216,y:-36},
{name:'blueZ4',r:6,c:6,x:-216,y:-36},
{name:'blueZ5',r:6,c:8,x:-216,y:-36},
]
,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。