前端入门篇（五十三）JS应用6打地鼠小游戏
1.加载游戏背景和锤子；当鼠标点击游戏背景时，有锤子敲打的动作
游戏背景和锤子的大小根据实际下载的图片大小做调整
<style>
#scene {
width: 500px;
height: 349px;
background: url(bg.jpg);
}
#hammer {
width: 50px;
height: 50px;
}
style>
js部分：鼠标点击时，切换到锤子敲打下去的图片；鼠标松开时，锤子是上举的状态
<body>
<div id="scene">
<img src="hammer1.jpg" alt="" id="hammer">
div>
<script>
var scene = document.getElementById('scene');
var hammer = document.getElementById('hammer');
scene.onmousedown = function(){
hammer.src = 'hammer2.jpg';
}
scene.onmouseup = function(){
hammer.src = 'hammer1.jpg';
}
script>
body>
效果：锤子打下去时，有一个锤子砸下去的图片转换
2.让锤子跟着鼠标移动，并让鼠标在锤子中心位置，隐去鼠标箭头
css部分：
<style>
#scene {
width: 500px;
height: 349px;
background: url(bg.jpg);
position: relative;
}
#hammer {
width: 50px;
height: 50px;
position: absolute;
margin-top: -25px;
//让鼠标在锤子中心，
//可以在锤子图片上加border，看看没有设置margin时的效果
margin-left:-25px;
top:0;
left:0;
cursor: none;
}
style>
js部分：利用事件e，获取鼠标的x、y坐标，赋值给锤子的位置
<body>
<div id="scene">
<img src="hammer1.jpg" alt="" id="hammer">
div>
<script>
var scene = document.getElementById('scene');
var hammer = document.getElementById('hammer');
scene.onmousedown = function(){
hammer.src = 'hammer2.jpg';
}
scene.onmouseup = function(){
hammer.src = 'hammer1.jpg';
}
scene.onmousemove = function(e){
var x = e.clientX;
var y = e.clientY;
hammer.style.top = y + 'px';
hammer.style.left = x + 'px';
}
script>
body>
效果：图片不是png的，所以没有透明，会遮挡
没有隐去鼠标箭头：
隐去鼠标箭头：
3.取消图片选中状态
当双击图片时，可能会选中该图片，此时的效果是：
取消选中状态：
css上：
#hammer {
width: 50px;
height: 50px;
position: absolute;
/* margin-top: -25px; */
/* margin-left:-25px; */
top:0;
left:0;
/* cursor: none; */
user-select: none;//取消选中
}
4.放置一张地鼠图片，先放在第一个坑内
css部分：
#hollow1Div{
position:absolute;
top: 90px;
left: 123px;
}
#hollow1 {
width: 50px;
height: 88px;
}
html：
<div id="scene">
<img src="hammer1.jpg" alt="" id="hammer">
<div id="hollow1Div"><img src="mouse1.jpg" alt="" id="hollow1">div>
div>
效果：
5.地鼠逐渐上升至最高处，停顿一会后消失
5.1先让地鼠图片在坑下面
#hollow1Div{
position:absolute;
top: 90px;
left: 123px;
}
#hollow1 {
width: 50px;
height: 88px;
position: absolute;//此处是设置地鼠在坑下的代码
top: 88px;
left: 0;
}
效果：
5.2让地鼠缓慢上升，在坑下方的部分不显示
hollow1Div必须设置宽高，否则图片全程都看不见
#hollow1Div{
position:absolute;
border:1px solid #ccc;
top: 90px;
left: 123px;
height: 88px;
width: 50px;
overflow: hidden;
}
#hollow1Div #hollow1 {
width: 50px;
height: 88px;
position: absolute;
top: 88px;
left: 0;
}
var hollow1 = document.getElementById('hollow1');
var mouseLoop = setInterval(mouseShow, 100);
var initTop = 88;
var endTop = 0;
var nowTop = 88;
function mouseShow(){
if (nowTop > endTop){
nowTop -= 4;
hollow1.style.top = nowTop + 'px';
}
if (nowTop <= endTop){
hollow1.style.top = initTop + 'px';
clearInterval(mouseLoop);
}
}
效果：
5.3地鼠缓慢上升到最高处后，停顿一下再消失
var mouseLoop = setInterval(mouseShow, 100);
var initTop = 88;
var endTop = 0;
var nowTop = 88;
var waitTime = 0;
var maxTime = 500;
function mouseShow(){
if (nowTop > endTop){
nowTop -= 8;
hollow1.style.top = nowTop + 'px';
}
// if (nowTop < endTop){
// nowTop = 0;
// hollow1.style.top = '0px';
// }
if (nowTop <= endTop){
if (waitTime < maxTime){
waitTime += 100;
}
else if (waitTime >= maxTime){
clearInterval(mouseLoop);
hollow1.style.top = initTop + 'px';
}
}
}
效果：
6.鼠标点击到地鼠时，检测碰撞
var hollow1Div = document.getElementById('hollow1Div');
scene.onclick = function(e){
var x = e.clientX;
var y = e.clientY;
//鼠标的位置x ----- 矩形横坐标x1,x2-----x1
var x1 = hollow1Div.offsetLeft + hollow1.offsetLeft;
//hollow1Div相对于scene的left值 + 图片相当于hollow1Div的left值
var x2 = x1 + hollow1.offsetWidth;
// console.log('x:'+x+';x1:'+x1);
var y1 = hollow1Div.offsetTop + hollow1.offsetTop;//洞的下方位置
var y2 = y1 + hollow1Div.offsetHeight;
if (x>x1 && x<x2 && y>y1 && y<y2){
console.log('点中');
hollow1.src = 'beated.jpg';
}
效果：打中地鼠时，有一个打中的效果图，从地鼠变成爱心图
7.多个地鼠随机出现
7.1 设置每个坑的位置
此处只设前三个
div[id^='hollowDiv'] {
position:absolute;
/* border:1px solid #ccc; */
height: 88px;
width: 50px;
overflow: hidden;
border: 1px solid black;
}
#hollowDiv1{
top: 90px;
left: 123px;
}
#hollowDiv2{
top: 90px;
left: 225px;
}
#hollowDiv3{
top: 90px;
left: 335px;
}
div[id^='hollowDiv']>img {
width: 50px;
height: 88px;
position: absolute;
top: 88px;
left: 0;
}
html：
<div id="scene">
<img src="hammer1.jpg" alt="" id="hammer">
<div id="hollowDiv1"><img src="mouse1.jpg" alt="" id="hollow1">div>
<div id="hollowDiv2"><img src="mouse1.jpg" alt="" id="hollow2">div>
<div id="hollowDiv3"><img src="mouse1.jpg" alt="" id="hollow3">div>
div>
效果：
7.2.地鼠随机升起，鼠标点中则呈现打中状态
1.随机生成0-2数字，对应坑1，2，3，对应随机升起地鼠的坑位；
2.将每个坑的hollowDiv和hollow地鼠图片封装进一个list；
3.哪个坑位要升起地鼠，就触发show，点击时触发点击事件
4.初始状态要调整，每次要升起地鼠时，将nowTop位置设置到坑位之下；恢复图片是为被打击的图片；将图片的层次降低（锤子在最上面）；将等待时间归零
5.控制线程，保证每次只有一个老鼠
<script>
// var hollowDiv1 = document.getElementById('hollowDiv1');
// var hollow1 = document.getElementById('hollow1');
var hollowDivAry = [];
var hollowAry = [];
var mouseId;
for (var i = 0; i < 3; i++){
hollowDivAry[i] = document.getElementById('hollowDiv' + (i+1));
hollowAry[i] = document.getElementById('hollow'+ (i+1));
}
// var mouseLoop = setInterval(mouseShow, 100);
var mouseLoop = null;
var initTop = 88;
var endTop = 0;
var nowTop = 88;
setInterval(function(){
//保证每次只有一个老鼠
if (mouseLoop == null){
mouseId = parseInt(Math.random()*3);
nowTop = 88;
waitTime = 0;
hollowAry[mouseId].src = 'mouse1.jpg';
hollowAry[mouseId].style.zIndex = '888';
console.log('mouseId:'+mouseId);
mouseLoop = setInterval(mouseShow, 100);
}
},3000);
var scene = document.getElementById('scene');
var hammer = document.getElementById('hammer');
scene.onmousedown = function(){
hammer.src = 'hammer2.jpg';
}
scene.onmouseup = function(){
hammer.src = 'hammer1.jpg';
}
scene.onmousemove = function(e){
var x = e.clientX;
var y = e.clientY;
hammer.style.top = y + 'px';
hammer.style.left = x + 'px';
}
scene.onclick = function(e){
var x = e.clientX;
var y = e.clientY;
console.log('hollowDivAry[mouseId]:' + hollowDivAry[mouseId]);
//鼠标的位置x ----- 矩形横坐标x1,x2-----x1
var x1 = hollowDivAry[mouseId].offsetLeft + hollowAry[mouseId].offsetLeft;
//hollowDiv1相对于scene的left值 + 图片相当于hollowDiv1的left值
var x2 = x1 + hollowAry[mouseId].offsetWidth;
// console.log('x:'+x+';x1:'+x1);
var y1 = hollowDivAry[mouseId].offsetTop + hollowAry[mouseId].offsetTop;//洞的下方位置
var y2 = y1 + hollowDivAry[mouseId].offsetHeight;//洞的位置+洞高
if (x>x1 && x<x2 && y>y1 && y<y2){
console.log('点中');
hollowAry[mouseId].src = 'beated.jpg';
hollowAry[mouseId].style.zIndex = '1000';
// hollowAry[mouseId].src = 'mouse1.jpg';
//将原先的hollow1都改成相应的hollowAry里的对象
}
}
var waitTime = 0;
var maxTime = 1000;
function mouseShow(){
if (nowTop > endTop){
nowTop -= 8;
hollowAry[mouseId].style.top = nowTop + 'px';
}
if (nowTop <= endTop){
if (waitTime < maxTime){
waitTime += 100;
}
else if (waitTime >= maxTime){
clearInterval(mouseLoop);
hollowAry[mouseId].style.top = initTop + 'px';
mouseLoop = null;
}
}
}
script>
