飞机大战jquery

江淼11

于 2022-05-17 22:12:12 发布

阅读量256

点赞数

分类专栏： jquery 文章标签： jquery css html

本文链接：https://blog.csdn.net/m0_69422950/article/details/124831399

版权

这是一个使用jQuery实现的飞机大战游戏，包含背景滚动、子弹运动及创建、敌机的创建与运动、英雄飞机的操作等核心功能。游戏通过JavaScript进行逻辑控制，结合HTML和CSS构建游戏界面。玩家可以通过键盘或移动端触屏操作飞机，实现移动、射击，同时敌机会自动移动，碰撞检测判断游戏状态和得分。

摘要由CSDN通过智能技术生成

html

	<!DOCTYPE html>
	<html lang="zh-CN">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>飞机大战</title>
	<link rel="stylesheet" href="./css/reset.css">
	<style>
	html {

	font-size: 65%;
	}
	body {
	width: 100%;
	height: 100vh;
	background-image: url(./img/bg.jpg);
	background-size: 100% 100%;
	background-repeat:no-repeat ;
	overflow: hidden;
	}

	#container {

	width: 320px;
	height: 568px;
	background-image: url(./img/R-C\ \(2\).jpg);

	background-size: 100% 100%;
	position: relative;
	margin: 100px auto;

	}

	#hero {
	background-image: url(./img/enermy.png);
	width: 66px;
	height: 82px;
	transform: rotateX(180deg);
	position: absolute;
	left: 127px;
	top: 486px;
	background-size: 100% 100%;
	}

	.enemy {
	width: 38px;
	height: 34px;
	position: absolute;
	/* background-repeat: no-repeat;
	background-position: -90% 100%;
	background-size: cover; */
	background-size: 100% 100%;
	background-image: url(./img/enemy1.png);
	top: -34px;
	}

	.bullet {
	width: 6px;
	height: 14px;
	background-image: url(./img/bullet1.png);

	background-size: 100% 100%;
	position: absolute;

	}


	#score {
	position: absolute;
	left: 10px;
	top: 10px;
	}

	#start,
	#end {
	width: 300px;

	background-position: center center;
	background-size: cover;
	background-image: url(img/VCG211320015022.jpg);
	position: absolute;
	top: 160px;
	left: 50%;
	padding: 2rem 0;
	margin-left: -150px;
	z-index: 1000;
	}


	#start .input {
	width: 80%;
	height: 2rem;
	line-height: 2rem;
	margin-left: 10%;

	border-bottom: 1px solid lightgray;



	}

	input {
	border: 0;
	outline: 0;
	display: block;
	width: 100%;
	text-align: center;
	background-color: transparent;

	}

	input::-webkit-input-placeholder {
	color: #333;

<