html+css+js实现狼吃羊小游戏
2024-05-15 20:43:47
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，这样可以针对多有情况：斜的，直的，横的，是否多格
二维平面上两点a(x1,y1)与b(x2,y2)间的欧氏距离：
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
html+css+js实现狼吃羊小游戏相关推荐
- java 狼捉羊游戏背景_Js 写了一个 “狼吃羊” 小游戏。
7 2019-04-14 17:12:01 +08:00 想起我最开始上学习的 VB 课,最后的大作业一个游戏就是这样的风格 ```vb If keyascii = 119 Then Image1.T ...
- css3情侣游戏,11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】...
情人节表白可爱小游戏.小动画 我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...
- Web前端--HTML+CSS+JS实现仿切水果小游戏
目录 代码目录: 主要代码实现: 源码获取 效果演示: 代码目录: 主要代码实现: CSS样式: * {margin: 0;padding: 0;list-style-type: none;touch ...
- 用HTML+CSS+JS写的切水果小游戏它来了
前言 切水果游戏曾经是一款风靡手机的休闲游戏,今天要分享的就是一款网页版的切水果游戏, 由HTML+CSS+JS实现,虽然功能和原版的相差太大,但基本的功能具备,效果逼真.感兴趣的小伙伴可收藏学习(完 ...
- Web前端--HTML+CSS+JS实现圣诞抓礼物小游戏
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
- 11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画
情人节表白可爱小游戏.小动画 我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...
- HTML+CSS+JS制作【俄罗斯方块】小游戏
文章目录 js制作简单网页版俄罗斯方块 效果演示 设计思路 一.HTML网页结构代码 二.CSS代码 三.JS代码 四.代码资源分享 js制作简单网页版俄罗斯方块 程序虽然很难写,却很美妙.要想把程序 ...
- Web前端期末大作业---HTML+CSS+JS实现实现捉虫小游戏
目录 网页截图展示:文末获取源码 项目源码结构:图片和js以及css等基础文件代码实现 主要源码展示: 获取完整源码: 网页截图展示: 首页展示: 选择昆虫: 效果展示: 有密集恐惧症的别玩哟.游 ...
- HTML+CSS+JS实现 ❤️新型冠状病毒射击小游戏❤️
效果演示: 代码目录: 主要代码实现: 部分JS代码 : var stage = {w: 1280,h: 720 }var _pexcanvas = document.getElementById(& ...
最新文章
- css menu builder,AutoPlay Menu Builder使用教程【图文教程】
- Python3数据分析与挖掘建模实战
- 把梯度下降算法变成酷炫游戏，这有一份深度学习通俗讲义
- 常见机器学习算法背后的数学
- 小短文 | 高并发系统，如何计算并发量和峰值数据？
- Scala数组的基本操作，数组进阶操作，多维数组
- 行情数据接口-美股版
- PMP考试的成绩怎么算？
- 如何升级iOS 16正式版？iOS 16正式版一键刷机教程
- Windows自动更新API(1)
- 南京邮电大学汇编——实验一：汇编语言语法练习与代码转换
- 仿微软Video Indexer——视频断点播放与智能解析时间线的前端可视化实现
- PMBOK指南——第一部分
- V831——识别指定的人脸
- 家中为什么要用软路由
- ECMALL买家取消退款
- CF1567E Non-Decreasing Dilemma
- android远程控制（三）----通过后台服务实现系统点击事件模拟
- 搭建DVWA出现错误：DVWA System error - config file not found.
- CSMA/CD协议 详解