html+css+js实现狼吃羊小游戏

最新推荐文章于 2023-10-18 21:42:34 发布

weixin_33811539

最新推荐文章于 2023-10-18 21:42:34 发布

阅读量997

点赞数 1

文章标签：游戏 javascript ViewUI

html+css+js实现狼吃羊小游戏

一、总结

一句话总结：给动的元素下标记，这里表现为将要活动的标签动态增加class，这是一种很好的思想。

1、如何实现棋子走动的时候简单精确定位？

用重构坐标系实现每个节点的轻松定位，也就是在表格布局的基础上，给每个占位的span添加了横纵坐标（第二套坐标系）来简化位置操作

90     $('.qipan').append('<div class="cell" xpos='+(i%5)+' ypos='+Math.floor(i/5)+'><span class="fill"></span></div>');

2、如何实现走棋子的操作（也就是你点一下棋子，再点一下空格，棋子就移动到了空格，但是电脑是怎么记住你点的那个棋子的呢）？

对点击的棋子留一个痕迹，也就是在它上面多加一个名为active的class

$(this).addClass('active');

3、如何实现棋子直着走动，而不是斜着走动，而且是一次按照要求走一到两格，而不是多格？

通过欧式物理距离判断：一格的话直接判断距离为1，两格的话直接判断距离为2，这样可以针对多有情况：斜的，直的，横的，是否多格

二维平面上两点

119     langx=$('.active').parent().attr('xpos'); 120  langy=$('.active').parent().attr('ypos'); 121  yangx=$(this).parent().attr('xpos'); 122  yangy=$(this).parent().attr('ypos'); 123  gap=Math.sqrt(Math.pow(langx-yangx,2)+Math.pow(langy-yangy,2));

124     if(gap==2){

4、没有棋子的空节点上面如何实现点击事件？

用span来实现的空节点的点击事件，也就是空节点上其实是有span的

90     $('.qipan').append('<div class="cell" xpos='+(i%5)+' ypos='+Math.floor(i/5)+'><span class="fill"></span></div>');

5、整个游戏棋盘的布局是通过什么来实现的？

布局是通过表格来布局的

<table class='table'>

6、如何实现棋子的移动？

改变棋子定位中的top和left属性即可实现

$(this).css({'left':xc+'px','top':yc+'px'});

7、改善想法：

1、用一个二维数组来对应记录每个格点的棋子状态可以简化编程

二、html+css+js实现狼吃羊小游戏

1、截图

2、百度盘下载地址

链接：https://pan.baidu.com/s/1gcTxO-OweOsNPff1Kt0j3A 密码：2tvs

3、开发思路

1.游戏界面布局
2.开发游戏规则
3.游戏调试

4、代码

注意用了jquery，用的时候记得引包

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>狼吃羊游戏</title>
  6     <style>
  7         *{
  8             margin:0px;
  9             padding:0px;
 10         }
 11         .qipan{
 12             width:450px;
 13             height:450px;
 14             /*background: #555;*/
 15             position: absolute;
 16             top:50%;
 17             left:50%;
 18             margin-top:-225px;
 19             margin-left:-225px;
 20         }
 21 
 22         .table{
 23             width:400px;
 24             height:400px;
 25             margin:0 auto;
 26             margin-top:25px;
 27             border-collapse:collapse;
 28         }
 29 
 30         td{
 31             border:2px solid #0ff;
 32         }
 33 
 34         .cell{
 35             width:50px;
 36             height:50px;
 37             /*border:1px dashed #0f0;*/
 38             position: absolute;
 39             top:0px;
 40             left:0px;
 41             cursor: pointer;
 42         }
 43 
 44         .fill{
 45             display: block;
 46             width: 50px;
 47             height:50px;
 48         }
 49         
 50         body{
 51             overflow: hidden;
 52             background: url('bg.jpg');
 53             background-size:100%;
 54         }    
 55     </style>
 56     <script src="jquery.js"></script>
 57 </head>
 58 <body>
 59     <div class="qipan">
 60         <table class='table'>
 61             <tr>
 62                 <td></td>
 63                 <td></td>
 64                 <td></td>
 65                 <td></td>
 66             </tr>
 67             <tr>
 68                 <td></td>
 69                 <td></td>
 70                 <td></td>
 71                 <td></td>
 72             </tr>
 73             <tr>
 74                 <td></td>
 75                 <td></td>
 76                 <td></td>
 77                 <td></td>
 78             </tr>
 79             <tr>
 80                 <td></td>
 81                 <td></td>
 82                 <td></td>
 83                 <td></td>
 84             </tr>
 85         </table>
 86     </div>    
 87 </body>
 88 <script>
 89 for(i=0;i<25;i++){
 90     $('.qipan').append('<div class="cell" xpos='+(i%5)+' ypos='+Math.floor(i/5)+'><span class="fill"></span></div>');
 91 }
 92 
 93 $('.cell').each(function(i){
 94     xpos=$(this).attr('xpos');
 95     xc=xpos*100;
 96     ypos=$(this).attr('ypos');
 97     yc=ypos*100;
 98 
 99     $(this).css({'left':xc+'px','top':yc+'px'});
100 
101     if(i>=1 && i<=3){
102         $(this).html('<img src="lang.png" class="lang">');
103     }
104 
105     if(i>=10){
106         $(this).html('<img src="yang.png" class="yang">');
107     }
108 });
109 
110 // 狼
111 $(document).on('click','.lang',function(){
112     $('.lang').removeClass('active');
113     $('.yang').removeClass('active');
114     $(this).addClass('active');
115 });
116 
117 //羊
118 $(document).on('click','.yang',function(){
119     langx=$('.active').parent().attr('xpos');
120     langy=$('.active').parent().attr('ypos');
121     yangx=$(this).parent().attr('xpos');
122     yangy=$(this).parent().attr('ypos');
123     gap=Math.sqrt(Math.pow(langx-yangx,2)+Math.pow(langy-yangy,2));
124     if(gap==2){
125         //狼吃羊
126         $obj=$('.active');
127         $('.active').parent().html('<div class="fill"></div>');
128         $obj.removeClass('active');
129         $(this).parent().html($obj);
130     }else{
131         $('.lang').removeClass('active');
132         $('.yang').removeClass('active');
133         $(this).addClass('active');
134     }
135 });
136 
137 // fill
138 $(document).on('click','.fill',function(){
139     // 狼
140     langx=$('.active').parent().attr('xpos');
141     langy=$('.active').parent().attr('ypos');
142     fillx=$(this).parent().attr('xpos');
143     filly=$(this).parent().attr('ypos');
144     gap=Math.sqrt(Math.pow(langx-fillx,2)+Math.pow(langy-filly,2));
145 
146     if(gap==1){
147         if($('.active').hasClass('lang')){
148             if($('.cell').find('img').hasClass('active')){
149                 $obj=$('.active');
150                 $('.active').parent().html('<div class="fill"></div>');
151                 $obj.removeClass('active');
152                 $(this).parent().html($obj);    
153             }
154         }
155     }
156     
157 
158     // 羊
159     if($('.active').hasClass('yang')){
160         yangx=$('.active').parent().attr('xpos');
161         yangy=$('.active').parent().attr('ypos');
162         fillx=$(this).parent().attr('xpos');
163         filly=$(this).parent().attr('ypos');
164         gap=Math.sqrt(Math.pow(yangx-fillx,2)+Math.pow(yangy-filly,2));
165         if(gap==1){
166             if($('.cell').find('img').hasClass('active')){
167                 $obj=$('.active');
168                 $('.active').parent().html('<div class="fill"></div>');
169                 $obj.removeClass('active');
170                 $(this).parent().html($obj);    
171             }
172         }
173         
174     }
175 });
176 
177 </script>
178 </html>

0 Links

weixin_33811539

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
html+css+js实现狼吃羊小游戏

html+css+js实现狼吃羊小游戏一、总结一句话总结：给动的元素下标记，这里表现为将要活动的标签动态增加class，这是一种很好的思想。 1、如何实现棋子走动的时候简单精确定位？用重构坐标系实现每个节点的轻松定位，也就是在表格布局的基础上，给每个占位的span添加了横纵坐标（第二套坐标系）来简化位置操作90 $('.qipan').append('&lt;div...
复制链接

扫一扫