web飞机大战小游戏

最新推荐文章于 2023-12-22 19:59:08 发布

婉菡

最新推荐文章于 2023-12-22 19:59:08 发布

阅读量1.2k

点赞数 6

分类专栏：前端文章标签： typescript

本文链接：https://blog.csdn.net/gcyqweasd/article/details/107550684

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="480" height="852" style="border:1px solid black"></canvas>
		<script>
			//1.获取canvas对象
			var can = document.getElementById("myCanvas");
			//2.获取context对象
			var ctx = can.getContext("2d");
			//全局变量
			var gameScore = 0;
			var bg;	
			var startImg;
			var heroImg=[];
			var pauseImg;
			var enemy1 = [];
			var enemy2 = [];
			var enemy3 = [];
			var m ;
			//定义游戏初始化状态
			var START = 0;
			var STARTING = 1;
			var RUNNING = 2;
			var PAUSE = 3;
			var GAMEOVER = 4;
			// 当前的游戏状态
			var start = START;
			
			//3.确保所有图片加载完成
			//3.0所有图片资源的链接保存到数组中
			var imgSrc = [
					//起始图片
					["background.png","start.png","game_pause_nor.png"],
					//敌机1
					["enemy1.png","enemy1_down1.png","enemy1_down2.png","enemy1_down3.png","enemy1_down4.png"],
					//敌机2
					["enemy2.png","enemy2_down1.png","enemy2_down2.png","enemy2_down3.png","enemy2_down4.png"],
					//敌机3
					["enemy3_n1.png","enemy3_n2.png","enemy3_hit.png","enemy3_down1.png","enemy3_down2.png","enemy3_down3.png","enemy3_down4.png","enemy3_down5.png","enemy3_down6.png"],
					//加载界面
					["game_loading1","game_loading2","game_loading3","game_loading4"],
					//英雄
					["hero1.png","hero2.png","hero_blowup_n1.png","hero_blowup_n2.png","hero_blowup_n3.png","hero_blowup_n4.png"],
					//子弹
					["m.png"]
				];
			//3.1 加载图片的进度
			var progress = 1;
			//3.2 图片加载操作
			function download(){
				//加载图片
				bg = nImg(imgSrc[0][0]);
				startImg = nImg(imgSrc[0][1]);
				pauseImg = nImg(imgSrc[0][2]);
				m = nImg(imgSrc[6][0]);
				//添加英雄图片
				for(var i = 0 ; i <imgSrc[5].length ;i++){
					heroImg[i] = nImg

最低0.47元/天解锁文章

婉菡

关注

6
点赞
踩
14

收藏

觉得还不错? 一键收藏
11
评论
web飞机大战小游戏

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <canvas id="myCanvas" width="480" height="852" style="border:1px solid black"></canvas> <script&
复制链接

扫一扫