html+css+js实现狼吃羊小游戏
如意编程网
收集整理的这篇文章主要介绍了
html+css+js实现狼吃羊小游戏
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
一、总结
一句话总结：给动的元素下标记，这里表现为将要活动的标签动态增加class，这是一种很好的思想。
1、如何实现棋子走动的时候简单精确定位？
用重构坐标系实现每个节点的轻松定位，也就是在表格布局的基础上，给每个占位的span添加了横纵坐标（第二套坐标系）来简化位置操作
90 $('.qipan').append('<div xpos='+(i%5)+' ypos='+Math.floor(i/5)+'><span></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 xpos='+(i%5)+' ypos='+Math.floor(i/5)+'><span></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>
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 xpos='+(i%5)+' ypos='+Math.floor(i/5)+'><span></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">');
103 }
104
105 if(i>=10){
106 $(this).html('<img src="yang.png">');
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></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></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></div>');
169 $obj.removeClass('active');
170 $(this).parent().html($obj);
171 }
172 }
173
174 }
175 });
176
177 </script>
178 </html>
0 Links
总结
以上是如意编程网为你收集整理的html+css+js实现狼吃羊小游戏的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 除.net在线HTML编辑器cuteEd
- 下一篇： HTML5的兼容问题以及调用js文件的方