游戏——狼吃羊

Posted Nekosan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了游戏——狼吃羊相关的知识,希望对你有一定的参考价值。

一 游戏简介

这个游戏主要是利用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>

四 知识点汇总

-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

 

以上是关于游戏——狼吃羊的主要内容,如果未能解决你的问题,请参考以下文章

游戏十五大基本游戏类型介绍

Unity3D游戏物体操作 ( 场景简介 | 添加游戏物体 | 操作游戏物体 | 选中游戏物体 | 场景显示效果缩放 | 重命名游戏物体 | 复制游戏物体 | 删除游戏物体 | 移动游戏物体 )

自学游戏开发第二天(电脑游戏开发概述之电脑游戏类型,开发工具,游戏策划)

游戏用英语怎么说

迅雷游戏盒子下载|迅雷游戏盒子下载

游戏运营全过程剖析,游戏开发,游戏运营,游戏推广问题分析