小实例js实现飞机游戏简单入门

需求：

背景

飞机[坐标长度图片路径]

敌机[坐标长度图片路径]

子弹[坐标长度图片路径]

运动

飞机 y轴不断减小

敌机 y轴不断增大

子弹 y轴不断增小

需求：

当子弹的top值在敌机范围内子弹从子弹数组中移除敌机从敌机数组移除同时也要从doc节点上移除元素。

当敌机或子弹超出屏幕就从数组中移除，并且从doc上移除节点元素

控制

使用鼠标可以控制飞机的位置

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
	*{
    
		padding: 0;
		margin: 0;
	}
	#view{
    
		width: 320px;
		height: 568px;
		background: url(images/bg.png) no-repeat left top;
		margin: 0 auto;
		position: relative;
	}
	#fly_me{
    
		width: 34px;
		height: 24px;
		position: absolute;
		/* bottom: 10px;
		left: 50%;
		transform: translateX(-50%); */
	}
	</style>
</head>
<body>
<div id="view"></div>	
</body>
<script>
//1.创建飞机
var flyEle = document.createElement('div');
var view = document.getElementById('view');
flyEle.id='fly_me';
flyEle.innerHTML="<img src='images/me.png'/>";
document.body.appendChild(flyEle);
//2.战机跟随鼠标
document.onmousemove=function(e){
    
	// var flyEle=document.getElementById('fly_me');
	// alert(flyEle);
	e=e||event;
	// var view = document.getElementById('view');
	var flyX = e.clientX-17;
	var flyY = e.clientY-12;
	var cCheck = flyX>view.offsetLeft&&flyX<view.offsetLeft+view.offsetWidth-34;
	var yCheck = flyY>view.offsetTop

小实例js实现飞机游戏简单入门

悦读