基于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 实现打地鼠小游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!