基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文(4)
7
检测碰撞:
检测锤子是否与出现的地鼠相碰撞,使用offsetTop、offsetWidth、offsetHeight和offsetLeft计算出地鼠和锤子的位置,根据距离的计算,判断地鼠与锤子是否重合碰撞。
效果:
代码如下:
var l1=document.getElementById('Img').offsetLeft;
var r1=document.getElementById('Img')
.offsetLeft+document.getElementById('Img').offsetWidth;
var t1=document.getElementById('Img').offsetTop;
var b1=document.getElementById('Img')
.offsetTop+document.getElementById('Img').offsetHeight;
var l2=document.getElementById('m'+num).offsetLeft;
var r2=document.getElementById('m'+num)
.offsetLeft+document.getElementById('m'+num).offsetWidth;
var t2=document.getElementById('m'+num).offsetTop;
var b2=document.getElementById('m'+num)
.offsetTop+document.getElementById('m'+num).offsetHeight;
//锤子与老鼠碰撞计算
if(r1<l2 || l1>r2 || b1<t2 || t1>b2)
{
var ele = document.getElementById("m"+num);
//实现锤子点击动画
ele.onmousedown = function(){
ChangeBg("Img","img/hammer2.png");
//打中老鼠老鼠切换图片
document.form1.score.value = beat;
console.log("总得分为:"+beat); document.getElementById('m'+num)
.style.backgroundImage='url(img/mouse2.png)';
}
beat+=1;
}
else
{
var ele = document.getElementById("m"+num);
//实现锤子点击动画
ele.onmousedown = function(){
ChangeBg("Img","img/hammer2.png"); document.getElementById('m'+num).style.background='url(img/mouse1.png);
}
}
以上是主要功能的代码展示,需要完整的游戏代码,可自行下载。
总结
以上所述是小编给大家介绍的基于JavaScript+HTML5 实现打地鼠小游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!

