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

<!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>

posted @   ·一库  阅读(32)  评论(0)  编辑  收藏  举报
相关博文：
· js 》》判断xx（图片等）是否加载成功的方法 》》》》》》》》》打飞机中的代码块
· css3之canvas 基础
· canvas绘制“飞机大战”小游戏，真香！
· 简单的贪吃蛇小游戏
· canvas
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示