为了账号安全,请及时绑定邮箱和手机立即绑定

js小游戏问题

js小游戏问题

qq_仁仁_0 2019-01-02 16:43:25
<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)";//设置IDmy.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)";//设置IDmy.id = "divZiDan" + myfeijiID;//创建好子弹然后放入数组;arr2[myfeijiID - 1] = my;}//循环每次tup减少10function 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>想问下大佬如何实现敌机与本机的碰撞判断
查看完整描述
  • 3 回答
  • 0 关注
  • 743 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信