javascript|js打地鼠
js经典项目打地鼠如何利用js来实现打地鼠呢？
首先是游戏页面的制作
0开始游戏
游戏说明游戏说明
在30秒内, 尽可能多的去打灰太狼, 每打1只灰太狼加10分, 每打1只小灰灰减10分, 请在30秒内尽可能的多得分
游戏结束
重新开始下一步写css加点样式让页面变的更好看
* {
margin: 0;
padding: 0;
}/* 背景 */
.backdrop {
width: 320px;
height: 480px;
background: url("image/game_bg.jpg");
background-repeat: no-repeat;
background-size: 100%;
margin: 50px auto;
position: relative;
}.score {
width: 100px;
line-height: 20px;
font-size: 15px;
color: white;
font-weight: bolder;
background: red;
position: absolute;
top: 15px;
left: 58px;
}/* 计时器 */
.timebar {
width: 180px;
height: 16px;
background: url("image/progress.png");
position: absolute;
top: 66px;
left: 63px;
}/* 设置狼 */
.wolvesDiv {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}/* 开始游戏 */
.menu1,
.menu2 {
width: 100%;
height: 200px;
position: absolute;
left: 0;
top: 190px;
}.menu1 div,
.menu2 div {
text-align: center;
line-height: 50px;
font-size: 30px;
color: orange;
}.menu2 {
display: none;
}/* 游戏说明 */
.introGame {
width: 300px;
height: 200px;
background: rgba(0, 0, 0, 0.7);
color: white;
line-height: 40px;
position: absolute;
left: 10px;
top: 140px;
display: none;
}.introGame p:nth-child(2) {
text-indent: 32px;
}
然后重头戏来了
整体思路
先要写入的标签
再建立每个坑的位置的二维数组
在一个函数里面写狼的所有要干的事情
在另外一个函数写狼消失的函数
然后创建多个狼函数
定义当狼点击后判断狼的类型分数的操作
【javascript|js打地鼠】
推荐阅读
- 事件代理
- 数组常用方法一
- 鹰鼠一室
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 【读书笔记】JavaScript|【读书笔记】JavaScript DOM编程艺术 （第2版）
- JavaScript判断数组的方法总结与推荐