canvas画布之》》》》》》打飞机游戏

最新推荐文章于 2024-09-13 16:53:17 发布
最新推荐文章于 2024-09-13 16:53:17 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： js 文章标签： js canvas css3 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="刘攀登/animate.css" />
		<style type="text/css">
			body {
				text-align: center;
			}
			
			#myCanvas {
				border: 1px solid black;
			}
			
			.loading {
				background: yellow;
				position: relative;
				top: -300px;
				left: -180px;
				z-index: 100;
			}
			
			.start {
				width: 100px;
				height: 50px;
				margin: 0px auto;
				color: red;
				border-radius: 10px;
				line-height: 50px;
				/*position: relative;
				left: 600px;
				top: -180px;*/
				background: gray;
				display: none;
			}
			
			.start:hover {
				cursor: pointer;
				animation: 1s bounce;
			}
		</style>
	</head>

	<body>
		<canvas id="myCanvas" width="320" height="568"></canvas>
		<img src="img/loading.gif" class="loading" />
		<div class="start" class="animated bounce">
			开始游戏
		</div>
	</body>
	<script type="text/javascript">
		//获取界面元素
		var myCanvas = document.getElementById("myCanvas");
		var startBnt = document.getElementsByClassName("start")[0];
		var loading = document.getElementsByClassName("loading")[0];
		var context = myCanvas.getContext("2d");
		//定义变量
		var isloadingFinish = false;
		var isStartGame = false;

		//C创建游戏所用的到所有图片对象
		var background1Img = new Image();
		background1Img.src = "img/background.png";
		var background2Img = new Image();
		background2Img.src = "img/background.png";
		var heroImg = new Image();
		heroImg.src = "img/herofly.png";
		var enemy1 = new Image();
		enemy1.src = "img/enemy1.png";
		var enemy2 = new Image();
		enemy2.src = "img/enemy2.png";
		var enemy3 = new Image();
		enemy3.src = "img/enemy3.png";
		var bullet1 = new Image();
		bullet1.src = "img/bullet1.png";
		var bullet2 = new Image();
		bullet2.src = "img/bullet2.png";
		var prop = new Image();
		prop.src = "img/prop.png";
		var cw = myCanvas.width;
		var ch = myCanvas.height;
		var bulletImg = bullet1;
		var bulletWidth = 6;
		var bulletHeight = 14;
		var backgroundTop1 = 0;
		var backgroundTop2 = -ch;
		var backgroundSpeed = 4;
		//c创建背景的方法

		//清空画布
		function clearCanvasRect() {
			context.clearRect(0, 0, cw, ch);
		}

		function createbackground() {
			backgroundTop1 += backgroundSpeed;
			backgroundTop2 += backgroundSpeed;

			if(backgroundTop1 >= ch) {
				backgroundTop1 = -ch;
			}
			if(backgroundTop2 >= ch) {
				backgroundTop2 = -ch;
			}
			context.drawImage(background1Img, 0, backgroundTop1, cw, ch);
			context.drawImage(background2Img, 0, backgroundTop2, cw, ch);
		}
		//		游戏资源正在加载 >>isloadingFinish = true;
		//开始加载所有资源
		var imgs = ["img/background.png", "img/bomb.png", "img/bullet1.png", "img/bullet2.png", "img/enemy1.png", "img/enemy2.png", "img/enemy3.png", "img/herofly.png", "img/prop.png"];
		var n = 0;
		for(var i = 0; i < imgs.length; i++) {
			var tempImg = new Image();
			tempImg.src = imgs[i];
			tempImg.onload = function() {
				n++;
				if(n / imgs.length > 0.9) {
					//					所有资源加载完成
					isloadingFinish = true;
				}
			}
		}

		var gameTimer = setInterval(function() {
			//			清空画布
			clearCanvasRect();
			if(isloadingFinish) {
				//创建背景
				createbackground();
			}
			if(isStartGame) {
				isStartGameFunction();
				//				游戏开始了背景出来英雄出来敌人落下子弹出来
			} else {
				//				游戏没有开始
				//游戏资源加载完成
				if(isloadingFinish) {
					//					createbackground();
					//					加载完成。。loading界面消失,开始按钮出来
					loading.style.display = "none";
					startBnt.style.display = "block";
					//					var myBody = document.getElementsByTagName("body")[0];
					//					myBody.style.backgroundColor = "blue";
					startBnt.style.backgroundColor = "blue";

				}
			}

		}, 50);
		//游戏场景中，各种对象的封装 ，下面三种封装，对象封装，函数封装，
		//英雄
		var hero = {
			width: 66,
			height: 82,
			img: heroImg,
			imgIndex: 0,
			x: 127,
			y: 486,
			left: false,
			right: false,
			top: false,
			bottom: false,
			speed: 4,
			isDie: false,
			draw: function() {
				if(this.isDie) {
					//死亡 this.ingIdex  234.,
				} else {
					//没死 this.imgIdex 0 1
					this.imgIndex = this.imgIndex ? 0 : 1;
				}
				context.drawImage(this.img, this.imgIndex * 66, 0, this.width, this.height, this.x, this.y, this.width, this.height);
			},
			move: function() {
				//				onkeydown
				//左
				if(this.left) {
					this.x -= this.speed;
				}
				//右
				if(this.right) {
					this.x += this.speed;
				}
				//				上
				if(this.top) {
					this.y -= this.speed;
				}
				//xia
				if(this.bottom) {
					this.y += this.speed;
				}
			}
		};
		//敌机
		//用来控制界面上敌人的数量。
		var enemys = [];
		var enemy = function(type, img, width, height) {
				this.width = width;
				this.height = height;
				this.img = img;
				this.type = type;
				this.typeOver = false;
				this.imgIndex = 0;
				this.isDie = false;
				this.xiaoguo = false;
				this.draw = function() {
					if(this.isDie == true) {
						this.imgIndex++;
					}
					if(this.imgIndex == 5) {
						this.xiaoguo = true;
					}
					context.drawImage(this.img, this.imgIndex * this.width, 0, this.width, this.height, this.x, this.y, this.width, this.height);
				}
				this.move = function() {
					this.draw();
					this.y += this.speed;
				}
				this.x = randFn(0, 320 - 38);
				this.y = -randFn(34, 100);
				this.speed = randFn(2, 5);
			}
			//子弹
		var bullets = [];
		var bullet = function(img, x, y, width, height) {
			this.x = x;
			this.y = y;
			this.width = width;
			this.height = height;
			this.img = img;
			this.speed = 10;
			this.move = function() {
				this.y -= this.speed;
				context.drawImage(this.img, 0, 0, width, height, this.x, this.y, width, height);

			};

		}
		var bt = 0;
		//游戏开始的方法
		function isStartGameFunction() {
			//画飞机
			hero.draw();
			hero.move();
			//画子弹
			bt++;
			if(bt % 6 == 0) {

				var xxx = new bullet(bulletImg, hero.x + 30, hero.y, bulletWidth, bulletHeight);
				bullets.push(xxx);
			}
			if(bt == 600) {
				bt = 0;
			}
			for(var i = 0; i < bullets.length; i++) {
				bullets[i].move();
			}
			//画敌机
			if(enemys.length < 20) {
				var randNum = randFn(100, 180);
				if(randNum < 110) {
					var rn = randFn(0, 10);
					if(rn <= 1) {
						var xxx = new enemy(2, prop, 39, 68);
						enemys.push(xxx);
					} else {
						var xxx = new enemy(1, enemy1, 38, 34);
						enemys.push(xxx);
					}

				}

			}
			//检测界面中所有的敌机和子弹
			for(var i = 0; i < enemys.length; i++) {
				for(var j = 0; j < bullets.length; j++) {
					//如果飞机没有死亡
					if(enemys[i].isDie == false) {

						if(crash(enemys[i], bullets[j]) && enemys[i].type == 1) {
							//i和j碰到一起，j，i一起死亡
							enemys[i].isDie = true;
							bullets.splice(j, 1);
							continue;
						}
					}
					//子弹跑上去死亡
					if(bullets[j].y < 0) {
						bullets.splice(j, 1);
						continue;
					}
				}
				//敌机碰到hero
				if(crash(enemys[i], hero)) {
					if(enemys[i].type == 1) {
						//over
//						clearInterval(gameTimer);
					}
					if(enemys[i].type == 2) {
						//jiangli
						bulletImg = bullet2;
						bulletWidth = 48;
						bulletHeight = 14;
						enemys[i].xiaoguo = true;
					}
					//					alert("gameover");
				}
				enemys[i].move();
				//敌机掉下去死亡
				if(enemys[i].y > ch) {
					enemys.splice(i, 1);
					i--;
					continue;
				}
				//如果敌机是死亡状态也要移除
				if(enemys[i].xiaoguo == true) {
					enemys.splice(i, 1);
					i--;
					continue;
				}
			}
		}

		startBnt.onclick = function() {
			isStartGame = true;
			startBnt.style.display = "none";
		}

		function randFn(min, max) {
			return parseInt(Math.random() * (max - min)) + min;
		}
		//获取元素下标
		function getObjIndex(obj) {
			for(var i = 0; i < enemys.length; i++) {
				if(obj == enemys[i]) {
					return i;
				}
			}
		}
		//键盘监听事件
		document.onkeydown = function(e) {
			switch(e.keyCode) {
				case 37:
					//左
					hero.left = true;
					hero.right = false;
					hero.top = false;
					hero.bottom = false;
					break;
				case 38:
					//					上
					hero.left = false;
					hero.right = false;
					hero.top = true;
					hero.bottom = false;
					break;
				case 39:
					//右
					hero.left = false;
					hero.right = true;
					hero.top = false;
					hero.bottom = false;
					break;
				case 40:
					//下
					hero.left = false;
					hero.right = false;
					hero.top = false;
					hero.bottom = true;
					break;
				default:
					break;
			}
		}
		document.onkeyup = function() {
			hero.left = false;
			hero.right = false;
			hero.top = false;
			hero.bottom = false;
		}

		//判断两个物体碰撞
		function crash(a, b) {
			var ar = a.x + a.width;
			var al = a.x;
			var at = a.y;
			var ab = a.y + a.height;

			var br = b.x + b.width;
			var bt = b.y;
			var bl = b.x;
			var bb = b.y + b.height;
			if(ar >= bl && al <= br && ab >= bt && at <= bb) {
				//				console.log("111111")
				return true;
			} else {
				//				console.log("222222222")
				return false;
			}

		}
	</script>

</html>

昔人'
关注
专栏目录
HTML应用开发基础篇-Canvas画布之手机画图板
徐小mu的博客
01-03 700
这篇和之前写的那篇内容差不多，在手机端的画图板和网页版的画图板格式都差不多，但还是有些地方需要注意的。在手机上应用的时候，需要加上页面头部： <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> 另外触发事件也不再用 mouse 事件了，改用监听器事件：ad...
html5 canvas技术实现飞机大战小游戏
02-26
html5 canvas技术实现飞机大战小游戏
用canvas整个打飞机游戏
dfpbut5000的博客
03-05 210
　　声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 　　之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个简单的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩canvas也不是很久，技术不是很好，请见谅哈。 　　闲话...
[前端]真的假的？canvas也能玩扫雷？看我手把手教你（附完整代码）
最新发布
fei_fei_123的博客
09-13 934
手把手教你做扫雷（附代码）
web版canvas做飞机大战游戏 总结
11-16 705
　　唠唠:两天的时间跟着做了个飞机大战的游戏，感觉做游戏挺好的。说是用html5做，发现全都是js。说js里一切皆为对象，写的最多的还是函数，都是函数调用。对这两天的代码做个总结，希望路过的大神指点一下，我对这个游戏的思路，可改进优化的代码。 　　先说一下游戏的基本内容: 打飞机(不要想歪了)，有鼠标控制移动英雄机，子弹自动射击；敌机从上而下，有三种敌机； 　　先说下HTML代码(主...
飞机大作战，打飞机。 H5 打飞机小游戏，相关技术webpack+html+css+ES6+canvas。
05-09
飞机大作战，打飞机。 H5 打飞机小游戏，相关技术webpack+html+css+ES6+canvas。 涉及了面向对象、继承的概念 移动端兼容（如ios音频问题） 资源预加载和HTML5标签 audio 的使用
canvas 画布在主流浏览器中的尺寸限制详细介绍
08-31
总结来说，canvas画布在主流浏览器中的尺寸限制是一个重要的考虑因素，开发者需要根据具体目标平台和性能需求来合理设定canvas的尺寸。通过了解和掌握这些限制，我们可以更好地利用canvas进行高性能、跨平台的图形...
canvas 打飞机游戏
06-29
《canvas技术在“打飞机”游戏中的应用》 在当今的网页开发中，HTML5的canvas元素成为了一项重要的技术，它为开发者提供了一个在浏览器上进行2D绘图的平台，无需借助任何插件。"打飞机"游戏，这款经典的休闲游戏，...
手机游戏开发重要技术资料分享12.画布开发1Canvas绘图.zip
07-30
手机游戏开发重要技术资料分享12.画布开发1Canvas绘图.zip
微信小程序canvas实现文字缩放
01-12
除了直接使用`setFontSize`方法，还可以通过调整canvas的`scale`方法来整体缩放画布内容，包括文字。`scale(x, y)`方法会将画布上的每个坐标点按照x和y轴的比例缩放，但这种方法会影响到整个画布，不仅文字，其他...
canvas 游戏
03-27
canvas 游戏 demo 鲨鱼吃小鱼 用鼠标控制
打飞机游戏图片
05-01
新手Java打飞机项目贴图资源
canvas简单游戏
08-03
canvas 实现2d 简单小游戏，点击出现蓝色攻击方块，攻击黑色方块得分，触碰红色方块游戏结束，黑色方块想灭完，游戏等级提升
打飞机游戏素材
12-14
打飞机游戏开发必备，不错的素材，用APPINVENTOR制作时可以用到。
HTML5 Canvas 游戏框架（QuarkJS）
03-09
基于HTML5 Canvas 开发的Javascript游戏框架（QuarkJS） 附API说明及DEMO示例。
原生canvas写的飞机游戏
双眸
01-11 265
一个原生canvas写的飞机游戏，实用性不大，主要用于熟悉canvas的一些熟悉用法。 项目地址：https://github.com/BothEyes1993/canvas_game
canvas实习飞机大战小游戏
RoddyLD的博客
04-05 274
canvas实习飞机大战小游戏 具体实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>飞机大战</title> <style>
手机游戏开发中画布技术与Canvas绘图详细教程
资源摘要信息:"该资源涉及手机游戏开发中画布开发的关键技术之一——Canvas绘图。Canvas绘图是一种在网页上直接绘图的技术，它提供了脚本语言（通常是JavaScript）的全功能接口，可以用来绘制图形、图像和动画。本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值