html+css+js實現狼吃羊小遊戲

時間 2019-12-02

原文原文鏈接

html+css+js實現狼吃羊小遊戲

1、總結

一句話總結：給動的元素下標記，這裏表現爲將要活動的標籤動態增長class，這是一種很好的思想。

一、如何實現棋子走動的時候簡單精肯定位？

用重構座標系實現每一個節點的輕鬆定位，也就是在表格佈局的基礎上，給每一個佔位的span添加了橫縱座標（第二套座標系）來簡化位置操做css

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

二、如何實現走棋子的操做（也就是你點一下棋子，再點一下空格，棋子就移動到了空格，可是電腦是怎麼記住你點的那個棋子的呢）？

對點擊的棋子留一個痕跡，也就是在它上面多加一個名爲active的classhtml

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

三、如何實現棋子直着走動，而不是斜着走動，並且是一次按照要求走一到兩格，而不是多格？

經過歐式物理距離判斷：一格的話直接判斷距離爲1，兩格的話直接判斷距離爲2，這樣能夠針對多有狀況：斜的，直的，橫的，是否多格jquery

二維平面上兩點編程

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){

四、沒有棋子的空節點上面如何實現點擊事件？

用span來實現的空節點的點擊事件，也就是空節點上實際上是有span的數組

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

五、整個遊戲棋盤的佈局是經過什麼來實現的？

佈局是經過表格來佈局的app

<table class='table'>

六、如何實現棋子的移動？

改變棋子定位中的top和left屬性便可實現佈局

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

七、改善想法：

一、用一個二維數組來對應記錄每一個格點的棋子狀態能夠簡化編程this

2、html+css+js實現狼吃羊小遊戲

一、截圖

二、百度盤下載地址

連接：https://pan.baidu.com/s/1gcTxO-OweOsNPff1Kt0j3A 密碼：2tvsurl

三、開發思路

1.遊戲界面佈局
2.開發遊戲規則
3.遊戲調試spa

四、代碼

注意用了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>

相關標籤/搜索

每日一句

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