【源码如下】用html写个游戏,复制代码,立马拥有自己的飞机大战。

用html写一个飞机大战的游戏,空格射击,左右移动。放入txt文件,将后缀改为html即可。
【源码如下】用html写个游戏,复制代码,立马拥有自己的飞机大战。_第1张图片

DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>飞机大战title>
	<style>
		/*设置画布大小和背景*/
		canvas {
			background-color: #000;
			display: block;
			margin: 0 auto;
		}
	style>
head>
<body>
	<canvas id="canvas" width="800" height="600">canvas>
	<script>
		// 获取canvas元素和上下文
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

		// 定义游戏相关变量
		var score = 0;
		var lives = 3;
		var player = {
			x: canvas.width / 2,
			y: canvas.height - 50,
			speed: 5,
			width: 50,
			height: 50,
			shootSpeed: 10
		};
		var bullets = [];
		var enemies = [];

		// 创建玩家飞机
		function drawPlayer() {
			ctx.fillStyle = "#fff";
			ctx.fillRect(player.x, player.y, player.width, player.height);
		}

		// 移动玩家飞机
		function movePlayer(direction) {
			if (direction === "left" && player.x > 0) {
				player.x -= player.speed;
			} else if (direction === "right" && player.x < canvas.width - player.width) {
				player.x += player.speed;
			}
		}

		// 发射子弹
		function shoot() {
			bullets.push({
				x: player.x + player.width / 2,
				y: player.y,
				radius: 5,
				speed: player.shootSpeed
			});
		}

		// 创建敌人飞机
		function createEnemy() {
			enemies.push({
				x: Math.random() * (canvas.width - 50),
				y: -50,
				width: 50,
				height: 50,
				speed: Math.random() * 2 + 1
			});
		}

		// 绘制敌人飞机
		function drawEnemies() {
			ctx.fillStyle = "#f00";
			for (var i = 0; i < enemies.length; i++) {
				ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
			}
		}

		// 移动敌人飞机
		function moveEnemies() {
			for (var i = 0; i < enemies.length; i++) {
				enemies[i].y += enemies[i].speed;
			}
		}

		// 碰撞检测
		function checkCollisions() {
			for (var i = 0; i < enemies.length; i++) {
				for (var j = 0; j < bullets.length; j++) {
					if (bullets[j].x + bullets[j].radius > enemies[i].x &&
						bullets[j].x - bullets[j].radius < enemies[i].x + enemies[i].
width &&
bullets[j].y + bullets[j].radius > enemies[i].y &&
bullets[j].y - bullets[j].radius < enemies[i].y + enemies[i].height) {
enemies.splice(i, 1);
bullets.splice(j, 1);
score += 10;
}
}
if (player.x + player.width > enemies[i].x &&
player.x < enemies[i].x + enemies[i].width &&
player.y + player.height > enemies[i].y &&
player.y < enemies[i].y + enemies[i].height) {
enemies.splice(i, 1);
lives--;
if (lives === 0) {
endGame();
}
}
}
}
	// 绘制得分和生命值
	function drawHUD() {
		ctx.fillStyle = "#fff";
		ctx.font = "24px Arial";
		ctx.fillText("Score: " + score, 10, 30);
		ctx.fillText("Lives: " + lives, canvas.width - 100, 30);
	}

	// 游戏结束
	function endGame() {
		clearInterval(gameLoop);
		alert("Game Over");
	}

	// 游戏循环
	var gameLoop = setInterval(function() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);

		// 移动玩家飞机
		drawPlayer();
		moveEnemies();
		drawEnemies();
		movePlayer();
		checkCollisions();
		drawHUD();

		// 创建敌人飞机
		if (Math.random() < 0.05) {
			createEnemy();
		}

		// 移动子弹
		for (var i = 0; i < bullets.length; i++) {
			bullets[i].y -= bullets[i].speed;
			ctx.fillStyle = "#fff";
			ctx.beginPath();
			ctx.arc(bullets[i].x, bullets[i].y, bullets[i].radius, 0, Math.PI * 2, true);
			ctx.closePath();
			ctx.fill();
		}
	}, 30);

	// 键盘事件监听
	document.addEventListener("keydown", function(event) {
		if (event.keyCode === 37) {
			movePlayer("left");
		} else if (event.keyCode === 39) {
			movePlayer("right");
		} else if (event.keyCode === 32) {
			shoot();
		}
	});
script>
body>
html>

你可能感兴趣的:(日常唠叨,html,游戏,javascript)