<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<style type="text/css">
.tip {
width: 200px;
border: 2px solid #ddd;
padding: 8px;
background: #f1f1f1;
color: #666;
}
.feiji {
width: 80px;
height: 70px;
background-color: blue;
position: relative;
}
</style>
<script>
function mousePos(e){
var x,y;
var e = e||window.event;
return {
x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
};
}
function test(e){
document.getElementById("mjs").innerHTML =dijiID;
}
function feiji(e){
var divObj = document.getElementById("feiji");
divObj.style.left = (mousePos(e).x - 50) + 'px';
divObj.style.top = (mousePos(e).y - 80) + 'px';
}
//===========================================以上获取坐标=================================
//储存敌机
var arr1 = new Array();
//打开网页立即调用创建敌机方法；
(function diji(){
//调用敌机创建方法 每1秒创建一次敌机 7秒后停止创建；
var taskId = setInterval(addDiv,1000);
//setTimeout(function(){
//clearInterval(taskId);
//},7000);
//循环调用显示敌机下降
setInterval(function(){
arr1Tup(arr1);
},100);
})();
var dijiID = 0;
function addDiv(){
//创建一个div
var my = document.createElement("divCell");
//添加到页面
document.body.appendChild(my);
my.style.position="absolute";
//通过样式指定x坐标
my.style.top= 0;
//通过样式指定y坐标(随机数0~700)
my.style.left= Math.round(Math.random()*700);
//通过样式指定宽度
my.style.width=83;
//通过样式指定高度
my.style.height=74;
my.style.backgroundImage="url(img/diji.jpg)";
//添加div的内容
my.innerHTML= '敌机'+ ++dijiID;
//设置样式透明
my.style.filter = "alpha(opacity=50)";
//设置ID
my.id = "divCell" + dijiID;
//创建好敌机然后放入数组；
arr1[dijiID + 199] = my;
}
//每次循环都把每个敌机tup值加10；
function arr1Tup(arr1){
for(i = 200;i < arr1.length;i++){
arr1[i].style.top = parseInt(arr1[i].style.top) + 10;
//每次循环判断 top值 大于 580px就删除
if(parseInt(arr1[i].style.top)>580){
deleteDiv(arr1[i].id);
}
}
}
//根据id删除div节点
function deleteDiv(id){
var my = document.getElementById(id);
//根据id查找节点，如果存在就删除节点
if (my != null){
my.parentNode.removeChild(my);
}
}
//=================================以上是敌机的产生和落到底部删除。===============================
//储存子弹
var arr2 = new Array();
//打开网页循环子弹
(function (){
setInterval(function(){
arr2Tup(arr2);
},20);
})();
var myfeijiID = 0;
function fasheADD(e){
//创建一个div
var my = document.createElement("divZiDan");
//添加到页面
document.body.appendChild(my);
my.style.position="absolute";
//设置子弹的初始位置
my.style.top= (mousePos(e).y -10) + 'px';
my.style.left= (mousePos(e).x -10) + 'px';
//通过样式指定宽度
my.style.width=18;
//通过样式指定高度
my.style.height=25;
my.style.backgroundImage="url(img/zidan.jpg)";
my.style.backgroundColor="red";
//添加div的内容
my.innerHTML=++myfeijiID;
//设置样式透明
my.style.filter = "alpha(opacity=50)";
//设置ID
my.id = "divZiDan" + myfeijiID;
//创建好子弹然后放入数组；
arr2[myfeijiID - 1] = my;
}
//循环每次tup减少10
function arr2Tup(arr2){
for(z = 0;z < arr1.length;z++){
arr2[z].style.top = parseInt(arr2[z].style.top) - 10;
//tup低于10删除
if(parseInt(arr2[z].style.top) < 10){
deleteDiv(arr2[z].id);
}
}
}
//===============================以上是自己的飞机
(function panduan(){
var aaa = setInterval(bool,20);
})();
function bool(){
//以子弹为中心 判断是否打中敌机；
for(i = 0;i < arr2.length;i++){
for(j = 200;j < arr1.length;j++){
//用1个子弹跟每个敌机判断
if(parseInt(arr2[i].style.top) - parseInt(arr1[j].style.top) < 70 && parseInt(arr2[i].style.top) - parseInt(arr1[j].style.top) > -20 &&parseInt(arr2[i].style.left) - parseInt(arr1[j].style.left) < 80 && parseInt(arr2[i].style.left) - parseInt(arr1[j].style.left) > -10 ){
//如果相撞删除敌机
deleteDiv(arr1[j].id);
//如果相撞子弹消失
deleteDiv(arr2[i].id);
}
}
}
}
(function over(){
var bbb = setInterval(boom,20);
})();
function boom(){
//以子弹为中心 判断是否打中敌机；
for(i = 0;i < divObj.length;i++){
for(j = 200;j < arr1.length;j++){
//用1个子弹跟每个敌机判断
if(parseInt(divObj.style.top) - parseInt(arr1[j].style.top) < 70 && parseInt(divObj.style.top) - parseInt(arr1[j].style.top) > -20 &&parseInt(divObj.style.left) - parseInt(arr1[j].style.left) < 80 && parseInt(divObj.style.left) - parseInt(arr1[j].style.left) > -10 ){
//如果相撞删除敌机
deleteDiv(arr1[j].id);
//如果相撞子弹消失
deleteDiv(divObj.id);
}
}
}
}
//===============================以上是判断子弹是否与敌机相碰=============================
</script>
</HEAD>
<BODY>
<div id="mjs" class="tip"></div>
<div id="test" style="width:1000px;height:570px;background:#FFF;" onMouseMove="test(event),feiji(event)">
<!-- 飞机 -->
<div class="feiji" id="feiji" style="left:0px;top: 0px;background-image:url('img/feiji.jpg')" onClick="fasheADD(event);"></div>
</div>
</BODY>
</HTML>
想问下大佬如何实现敌机与本机的碰撞判断
慕设计2395807
相关分类