遊戲——狼吃羊

時間 2019-11-18

標籤遊戲欄目遊戲简体版

原文原文鏈接

一遊戲簡介javascript

這個遊戲主要是利用JQuery，HTML，CSS寫的。在一個棋盤中，有狼和羊，狼和羊每次走一格，不能斜着走；狼隔一格能夠吃羊，羊能夠圍住狼。遊戲截圖以下：css

二遊戲框架html

1.棋盤佈局：這裏利用表格布成了5*5的佈局，棋子只能夠走交點；
2.棋子佈局：在每一個交點建立一個類名爲cell的div，有棋子的地方cell下添加圖片，沒棋子的地方cell下添加一個空的span便於標識；
3.重構座標：爲了簡化棋盤，將每一個格子的橫縱座標值重構爲1，最終棋盤上的橫縱座標爲0到4；
4.棋子前進：狼和羊的前進方式一致，先點擊棋子，再點擊空節點，棋子就會移動到目標節點。實現方式能夠經過交換cell的img和span元素，過程當中能夠利用橫縱座標的值經過勾股定理計算出距離gap，判斷gap=1才能前進；
5.狼吃羊：狼和羊互相交換位置，並將交換後羊的位置置爲span，羊消失了，實現狼吃羊的效果。一樣的方法判斷gap==2，才能吃掉。java

三完整代碼jquery

<!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;
}app

.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>框架

//先點擊狼
$(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>

四知識點彙總

-CSS

border-collapse:collapse：合併表格的邊緣。

-JQuery

append()方法在被選元素的結尾（仍然在內部）插入指定內容。

each() 方法規定爲每一個匹配元素規定運行的函數。

attr() 方法設置或返回被選元素的屬性值。

css() 方法返回或設置匹配的元素的一個或多個樣式屬性。

html() 方法返回或設置被選元素的內容 (inner HTML)。若是該方法未設置參數，則返回被選元素的當前內容。

on() 方法在被選元素及子元素上添加一個或多個事件處理程序。

parent() 方法返回被選元素的直接父元素。

-JS

Math.pow(x,y)方法可返回 x 的 y 次冪的值。

Math.sqrt(x)方法可返回一個數的平方根。

五後記

這個遊戲嚴格來講並不完整，還須要計分，狼/羊最終勝利/失敗的規則。其次，遊戲當中還有一個隱藏的bug，即狼吃羊的時候並無考慮中間的狀況，只要距離爲2就能夠吃掉。實際上，此步還應該判斷狼和羊中間是否是span，是的話才能吃。次外，代碼還有很大的優化空間，好比前進的函數能夠經過傳參，狼和羊共用一段代碼。而這裏分別寫了狼和羊前進的代碼，出現了不少重複。先在這裏挖一個坑，後續有空再填坑吧~

最後按照慣例貼一下游戲的視頻教程資源地址：

http://study.163.com/course/courseMain.htm?courseId=1004730019

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。