javascript|js打地鼠 html5|html

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打地鼠】