JS打气球小游戏

BEST丶NL
已于 2022-06-27 11:00:22 修改
阅读量376
点赞数
文章标签： javascript html css
于 2022-05-18 16:28:02 首次发布
本文链接：https://blog.csdn.net/qq_45943022/article/details/124845316
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin:0px;padding:0px;}
			body,html{
				height:100%;
				width:100%;
				overflow:hidden;
				background:url(imgs/bg.jpg);
				background-size:cover;
			}
			.balloon{
				
				width:96px;
				height:123px;
				position:absolute;
				left:0px;
				top:0px;
				background:url(imgs/balloon.png) no-repeat 0px 0px;
				/* border:1px solid red; */
			}
			.scoreDom{
				position:absolute;
				top:0px;left:0px;
				width:210px;
				height:45px;
				font-size:20px;
				color:white;
				background:red;
				border-radius:8px;
				z-index:1;
				text-align:center;
				line-height:45px;
			}
			.centerDom{
				position:absolute;
				top:50%;left:50%;
				margin-left:-200px;
				margin-top:-100px;
				width:400px;
				height:200px;
				font-size:20px;
				color:red;
				background:white;
				text-align:center;
				line-height:100px;
				border-radius:8px;
			}
			.endDom{
				position:absolute;
				top:50%;left:50%;
				margin-left:-200px;
				margin-top:-100px;
				width:400px;
				height:200px;
				font-size:20px;
				color:red;
				background:white;
				text-align:center;
				line-height:100px;
				border-radius:8px;
			}
			.Dtime{
				position:absolute;
				top:0px;right:0px;
				width:210px;
				height:45px;
				font-size:20px;
				color:white;
				background:red;
				border-radius:8px;
				z-index:1;
				text-align:center;
				line-height:45px;
			}
			.button{
				display:block;
				border:none;
				margin:0px auto;
				width:80px;
				height:40px;
				border-radius:8px;
				background:red;
				color:white;
				font-size:24px;
				cursor: pointer;
				
			}
			.zhezhao{
				display:block;
				width:100%;
				height:100%;
				position:absolute;
				top:0px;left:0px;
				background:rgba(0,0,0,0.6);
				z-index:2;
			}
		</style>
	</head>
	<body>
	</body>
</html>
<script>
	//气球对象
	//属性：定位属性，定时器，参数，分数
	//方法：初始化 飞 死亡
	function Balloon(){
		this.dom = null;
		this.maxLeft = document.documentElement.clientWidth - 96;
		this.l = Math.random() * this.maxLeft;
		this.t = document.documentElement.clientHeight - 100;
		// console.log(this.t);
		//随机气球的分数
		this.score = Math.floor(Math.random() * 8 + 1);
		// console.log(this.score);
		
		this.bgL = (this.score - 1) % 4 * 96;
		this.bgT = this.score > 4 ? 123 : 0;
		
		this.timer = null;
		this.interval = 30;
		// 调用初始化方法
		this.init();
		// 调用运动方法
		this.fly();
	}
	// 初始化方法
	Balloon.prototype.init = function(){
		this.dom = document.createElement('div');
		this.dom.className = "balloon";
		this.dom.style.left = this.l + 'px';
		this.dom.style.top = this.t + 'px'
		this.dom.style.backgroundPosition = -this.bgL + 'px ' + -this.bgT + 'px';
		document.body.appendChild(this.dom);
		var that = this;
		this.dom.onclick = function(){
			game.voice2.load();
			game.voice2.play();
			game.scoreAll += that.score;
			console.log(game.scoreAll);
			game.scoreDom.innerHTML = `分数：${game.scoreAll}`
			that.goDie();
		}
	}
	// 飞行方法
	Balloon.prototype.fly = function(){
		var that = this;
		this.timer = setInterval(function(){
			that.t -= that.score;
			if(that.t < -123){
				that.goDie();
			}
			that.dom.style.top = that.t + 'px';
		},this.interval)
	}
	// 死亡方法
	Balloon.prototype.goDie = function(){
		clearInterval(this.timer);
		this.dom.parentNode.removeChild(this.dom);
	}
	
	// new Balloon();
	function Game(){
		//属性
		this.scoreDom = null;
		this.Dtime = null;
		//定时器 A B  
		this.timeA = null;
		this.timeB = null;
		this.time = 20;
		//this.分数DOM
		this.scoreAll = 0;
		this.scoreDom = null;
		this.init();

	}
	
	Game.prototype.init = function(){
		var that = this;
		this.scoreDom = document.createElement('div');
		//创建分数DOM = 0
		this.scoreDom.className = 'scoreDom';
		document.body.appendChild(this.scoreDom);
		this.scoreDom.innerHTML = `分数：${this.scoreAll}`;
		//创建倒计时DOM
		this.Dtime = document.createElement('div');
		this.Dtime.className = 'Dtime';
		document.body.appendChild(this.Dtime);
		this.Dtime.innerHTML = `倒计时：${this.time}`;
		//创建两个音频DOM bgM 爆炸（无音频源可忽略）
		this.voice1 = document.createElement('audio');
		this.voice1.src = 'imgs/bgm.mp3';
		document.body.appendChild(this.voice1);
		
		this.voice2 = document.createElement('audio');
		this.voice2.src = 'imgs/c.wav';
		document.body.appendChild(this.voice2);
		//创建中间区间结构 里面有点击开始的按钮，调用startGame方法
		this.zhezhao = document.createElement('div');
		this.zhezhao.className = 'zhezhao';
		document.body.appendChild(this.zhezhao);
		this.centerDom = document.createElement('div');
		this.centerDom.className = 'centerDom';
		this.zhezhao.appendChild(this.centerDom);
		this.centerDom.innerHTML = `点击开始游戏`;
		this.startBtn = document.createElement('button');
		this.startBtn.className = 'button';
		this.centerDom.appendChild(this.startBtn);
		this.startBtn.innerHTML = 'START';
		this.startBtn.onclick = function(){
			that.zhezhao.style.display = 'none';
			that.startGame();
		}
	}
	
	//开始游戏方法
	Game.prototype.startGame = function(){
		
		var that = this;
		// 开背景音乐
		that.voice1.play();
		//生产气球 用一个定时器
		this.timeA = setInterval(function(){
			// this.Balloon();
			new Balloon();
		},500)
		
		//倒计时 用一个定时器
		this.timeB = setInterval(function(){
			that.time --;
			that.Dtime.innerHTML = `倒计时：${that.time}`;
			if(that.time == 0){
				that.gameover();
			}
			console.log(that.time);
		},1000)
	};
	
	//游戏结束方法
	Game.prototype.gameover = function(){
		// var that = this;
		//停止定时器
		clearInterval(this.timeA);
		clearInterval(this.timeB);
		//弹框
		this.zhezhao = document.createElement('div');
		this.zhezhao.className = 'zhezhao';
		document.body.appendChild(this.zhezhao);
		this.endDom = document.createElement('div');
		this.endDom.className = 'endDom';
		this.zhezhao.appendChild(this.endDom);
		this.endDom.innerHTML = `当前分数为：${this.scoreAll}`;
		this.btn = document.createElement('button');
		this.btn.className = 'button';
		this.endDom.appendChild(this.btn);
		this.btn.innerHTML = 'AGAIN';
		this.btn.onclick = function(){
			location.reload();
		}
		//隐藏多余的气球
		var doms = document.querySelectorAll('.balloon');
		for(var i = 0; i < doms.length; i++){
			doms[i].style.display = 'none';
		}
		// 暂停音乐
		this.voice1.pause();
		
	};
	
	//Game对象中，要改变分数
	var game = new Game();
	
	
</script>
图像素材：