js实现弹幕飞机

最新推荐文章于 2021-09-01 15:47:24 发布

弯月liang

最新推荐文章于 2021-09-01 15:47:24 发布

阅读量275

点赞数

分类专栏：前端文章标签： js css html javascript

本文链接：https://blog.csdn.net/sll9711/article/details/108223933

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
            width: 70vw;/*长宽最好是obj的倍数*/
            height: 90vh;
            border-width: 10px;
            border-style: solid;
            border-color: blue;
            line-height:600px;/*文本垂直居中*/
            text-align: center;/*文本水平居中*/
            position: relative;/*相对定位*/
            left: 0px;
            top: 0px;
        }

        /*开场动画*/
		@-webkit-keyframes mymove
		{
			from {top:50vh;}
			to {top:100px;}
		}

		#obj{
			-webkit-animation-name:mymove;
			-webkit-animation-duration:1s;
			-webkit-animation-timing-function:linear;
            position: absolute;
            left: 30vw;
            top: 50vh;
			width: 0px;
            height: 0px;
           	border-left: 30px solid transparent; 
			border-right: 30px solid transparent; 
			border-bottom: 10px solid red; 
		}
		div{
            text-align: center;
            line-height:30px;
        }
	</style>
</head>
<body>
<!--弹幕飞机
1.飞机可以移动
2.屏幕顶部随机弹幕雨
3.弹幕雨碰到飞机-失败
4.记录分数
-->

<div id='obj'>飞机</div>

<button id='start'>开始</button> | 
<button onclick="stop()">暂停</button>

</body>
<script type="text/javascript">

	var key = document.body.onkeydown =f; //注册keydown事件处理函数
	
	var clientH= document.body.clientHeight;//获取body高
    var clientW= document.body.clientWidth;//获取body宽

    var obj=document.getElementById('obj');//飞机对象
    var borderX=parseInt(getComputedStyle(obj,null).getPropertyValue('border-left'));
    var borderY=parseInt(getComputedStyle(obj,null).getPropertyValue('border-bottom'));
    var movePx=10;//飞机每次移动的距离
    var speed=500;//雨下落速度
    var distance=10;//雨下落距离
    var rainleft=0;//弹幕雨x坐标
	var raintop=0;//弹幕雨y坐标

	//生成雨
	function setrain(){

		rainleft=parseInt(Math.random()*clientW);
        raintop=0;//parseInt(Math.random()*clientH);

		let div=document.createElement('div');
			div.className ='div';
			div.style.borderRadius='50%';
			div.style.width='6px';
			div.style.height='10px';
			div.style.backgroundColor='pink';
			div.style.position = 'absolute';
		    div.style.left=rainleft + 'px';
		    div.style.top=raintop + 'px';
		document.body.appendChild(div);
	}
	
	//雨下落
	function downrain(){

		var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));//获取精灵y坐标
        var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//获取精灵x坐标

		let div=document.getElementsByClassName('div');
		//遍历all雨滴
		for(let i=0;i<div.length-1;i++){
			let divleft=parseInt(div[i].style.left);
			let divtop=parseInt(div[i].style.top);
			div[i].style.top=divtop+distance+'px';

			//判断飞机是否被击中
			if(Math.abs(divtop-myTop)<borderY && Math.abs(divleft-myLeft)<borderX){
				console.log('被击中了 borderY:'+borderY+' borderX:'+borderX);
				console.log('------- myTop:'+myTop+' myLeft:'+myLeft);
				console.log('------- rainY:'+divtop+' rainX:'+divleft);
				stop();
				alert('被击中了');
			}
		}
	}

	//清除落地的雨
	function delrain(){
		let div=document.getElementsByClassName('div');
		//遍历all雨滴
		for(let i=0;i<div.length-1;i++){
			// div[i].style.left
			if(parseInt(div[i].style.top)>clientH){
				div[i].parentNode.removeChild(div[i]);
			};
		}
	}

	//开始
	document.getElementById('start').onclick=start;
	function start(e){
		var e = e || window.event;  //标准化事件处理
		inter=setInterval((setrain),speed);
		inter1=setInterval((downrain),speed);
		inter2=setInterval((delrain),speed);
	}

	//暂停
	function stop(){
		 clearInterval(inter);
		 clearInterval(inter1);
		 clearInterval(inter2);
	}

	//移动飞机
	function f (va) {
        var e = e || window.event;  //标准化事件处理
        let s = '';//val.type + " " + val.key;  //获取键盘事件类型和按下的值
        let key=va.key;
        var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));//获取精灵y坐标 parseInt(obj.style.top);
        var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//获取精灵x坐标 parseInt(obj.style.left);
        var myWidth=borderX;
        var myHeight=borderY;

        var move=0;
        if(key=='w'){
            move=myTop-movePx;//每次移动10
            if(move<0 || move>clientH){
                return false;//不能超过边界
            }
            obj.style.top=move+'px';
            s='上';
        }
        if(key=='s'){
            move=myTop+movePx;
            if(move<0 || move>clientH-myHeight){
                return false;
            }
            obj.style.top=move+'px';
            s='下';
        }
        if(key=='a'){
            move=myLeft-movePx;
            if(move<0 || move>clientW){
                return false;
            }
            obj.style.left=move+'px';
            s='左';
        }
        if(key=='d'){
            move=myLeft+movePx;
            if(move<0 || move>clientW-myWidth){
                return false;
            }
            obj.style.left=move+'px';
            s='右';
        }
        // obj.innerText=s;//设置文本 & 清楚之前的元素
        // console.log(move+' top:'+myTop+' left:'+myLeft);

    } /*f() end--*/
	
</script>
</html>

弯月liang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现弹幕飞机

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ width: 70vw;/*长宽最好是obj的倍数*/ height: 90vh; border-width: 10px; .
复制链接

扫一扫