一 游戲簡介
這個游戲主要是利用JQuery，HTML，CSS寫的。在一個棋盤中，有狼和羊，狼和羊每次走一格，不能斜着走；狼隔一格可以吃羊，羊可以圍住狼。游戲截圖如下：
二 游戲框架
1.棋盤布局：這里利用表格布成了5*5的布局，棋子只可以走交點；
2.棋子布局：在每個交點創建一個類名為cell的div，有棋子的地方cell下添加圖片，沒棋子的地方cell下添加一個空的span便於標識；
3.重構坐標：為了簡化棋盤，將每個格子的橫縱坐標值重構為1，最終棋盤上的橫縱坐標為0到4；
4.棋子前進：狼和羊的前進方式一致，先點擊棋子，再點擊空節點，棋子就會移動到目標節點。實現方式可以通過交換cell的img和span元素，過程中可以利用橫縱坐標的值通過勾股定理計算出距離gap，判斷gap=1才能前進；
5.狼吃羊：狼和羊互相交換位置，並將交換后羊的位置置為span，羊消失了，實現狼吃羊的效果。同樣的方法判斷gap==2，才能吃掉。
三 完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>狼吃羊游戲</title>
<style>
*{
margin:0px;
padding:0px;
}
.chessboard{
width:450px;
height:450px;
background:#fff;
position:absolute;
top:50%;
left:50%;
margin-top:-225px;
margin-left:-225px;
}
.table{
width:400px;
height:400px;
margin:0 auto;
margin-top:25px;
border-collapse:collapse;
}
td{
border:2px solid black;
}
.cell{
width:50px;
height:50px;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
}
.fill{
display:block;
width:50px;
height:50px;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class="chessboard">
<table class="table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
//在棋盤中添加25個包含span的cell，並重構坐標，橫縱坐標分別為1,2,3,4
for(var i=0;i<25;i++){
$('.chessboard').append('<div class="cell" xpos='+(i%5)+' ypos='+Math.floor(i/5)+'><span class="fill"></span></div>');
}
//狼和羊布局
$('.cell').each(function(i){ //each() 方法規定為每個匹配元素規定運行的函數。
xpos=$(this).attr('xpos');
xc=xpos*100; //實際的橫坐標
ypos=$(this).attr('ypos');
yc=ypos*100; //實際的縱坐標
$(this).css({'left':xc+'px','top':yc+'px'}); //設置cell的定位
if(i>=1 && i<=3){ //第一排第2,3,4個位置放置狼
$(this).html('<img src="lang.png" class="lang">');
}
if(i>=10){
$(this).html('<img src="yang.png" class="yang">');
}
});
//先點擊狼
$(document).on('click','.lang',function(){
$('.lang').removeClass('active');
$('.yang').removeClass('active');
$(this).addClass('active');
});
//再點擊羊，羊被吃掉
$(document).on('click','.yang',function(){
langx=$('.active').parent().attr('xpos'); //狼橫坐標
langy=$('.active').parent().attr('ypos'); //狼縱坐標
yangx=$(this).parent().attr('xpos'); //羊橫坐標
yangy=$(this).parent().attr('ypos'); //羊縱坐標
gap=Math.sqrt(Math.pow(langx-yangx,2)+Math.pow(langy-yangy,2)); //狼羊距離（用勾股定理求得）
if(gap==2){ //距離為2時狼吃羊
$obj=$('.active'); //先找到點擊的狼，保存起來
$('.active').parent().html('<span class="fill"></span>'); //把狼的位置寫為fill的span
$obj.removeClass('active'); //移除狼的active類名
$(this).parent().html($obj); //找到點擊的羊並換成狼
}else{ //否則先清空所有active
$('.lang').removeClass('active');
$('.yang').removeClass('active');
$(this).addClass('active'); //再給當前點擊的羊添加active
}
});
//點擊空節點fill，狼羊前進
$(document).on('click','.fill',function(){
//狼前進
if($('.active').hasClass('lang')){ //如果上一步點擊的是狼
langx=$('.active').parent().attr('xpos');
langy=$('.active').parent().attr('ypos');
fillx=$(this).parent().attr('xpos'); //空節點的橫坐標
filly=$(this).parent().attr('ypos'); //空節點的縱坐標
gap=Math.sqrt(Math.pow(langx-fillx,2)+Math.pow(langy-filly,2)); //狼和空節點的距離
if(gap==1){
if($('.cell').find('img').hasClass('active')){
$obj=$('.active');
$('.active').parent().html('<span class="fill"></span>');
$obj.removeClass('active');
$(this).parent().html($obj);
}
}
}
//羊前進
if($('.active').hasClass('yang')){
yangx=$('.active').parent().attr('xpos');
yangy=$('.active').parent().attr('ypos');
fillx=$(this).parent().attr('xpos');
filly=$(this).parent().attr('ypos');
gap=Math.sqrt(Math.pow(yangx-fillx,2)+Math.pow(yangy-filly,2));
if(gap==1){
if($('.cell').find('img').hasClass('active')){
$obj=$('.active');
$('.active').parent().html('<div class="fill"></div>');
$obj.removeClass('active');
$(this).parent().html($obj);
}
}
}
})
</script>
</html>
四 知識點匯總