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

最新推荐文章于 2023-07-31 15:24:49 发布

红豌豆

最新推荐文章于 2023-07-31 15:24:49 发布

阅读量4.3k

点赞数

分类专栏：前端文章标签： javascript 游戏前端

本文链接：https://blog.csdn.net/qq_64353584/article/details/123514385

版权

需求：

背景

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

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

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

运动

飞机 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

最低0.47元/天解锁文章

红豌豆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
小实例js实现飞机游戏简单入门

需求：背景飞机[坐标长度图片路径]敌机[坐标长度图片路径]子弹[坐标长度图片路径]运动飞机 y轴不断减小敌机 y轴不断增大子弹 y轴不断增小需求：当子弹的top值在敌机范围内子弹从子弹数组中移除敌机从敌机数组移除同时也要从doc节点上移除元素。当敌机或子弹超出屏幕就从数组中移除，并且从doc上移除节点元素控制使用鼠标可以控制飞机的位置<!DOCTYPE html><html lang="zh">.
复制链接

扫一扫