打地鼠锅打灰太狼面向对象（工厂方法）

最新推荐文章于 2022-03-31 15:43:17 发布

敲代码的皮皮

最新推荐文章于 2022-03-31 15:43:17 发布

阅读量207

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/cc12345_10/article/details/116275687

版权

1.锅打灰太狼


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锅打灰太狼</title>
		<link rel="stylesheet" type="text/css" href="css/lang.css"/>
	</head>
	<body>
		<div class="wp">
			<span id="score">0</span>
			<span id="time"></span>
			<!-- 开始游戏按钮 -->
			<div class="smark">
				<span id="start">开始游戏</span>
			</div>
			<!-- 结束游戏 -->
			<div class="game-over">
				<p>游戏结束</p>
				<span id="end">再来一局</span>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	// 获取元素
	var wp = document.querySelector('.wp');
	var score = document.querySelector('#score');
	var time = document.querySelector('#time');
	var start = document.querySelector('#start');
	var end = document.querySelector('#end');
	
	//列出洞的位置
	var d1 = {l:'98px',t:'115px'};
	var d2 = {l:'17px',t:'160px'};
	var d3 = {l:'15px',t:'220px'};
	var d4 = {l:'30px',t:'293px'};
	var d5 = {l:'122px',t:'273px'};
	var d6 = {l:'207px',t:'295px'};
	var d7 = {l:'200px',t:'211px'};
	var d8 = {l:'187px',t:'141px'};
	var d9 = {l:'100px',t:'185px'};
	
	var dArr = [d1,d2,d3,d4,d5,d6,d7,d8,d9];
	// 设置分数
	var s = 0;
	// 设置时间
	var t = 10;
	
	//设置计时器
	var timmer; // 游戏倒计时
	var wolfer; // 创建狼的计时器
	
	//随机数函数
	function rand(m,n){
		return Math.floor(Math.random()*(n-m+1)+m);
	}
	
	//点击开始游戏
	start.onclick = function(){
		//隐藏start的父级
		start.parentElement.style.display = 'none';
		//倒计时
		timmer = setInterval(function(){
			gameTime();
		},1000);
		
		//创建老狼
		wolfer = setInterval(function(){
			createWolf();
		},2000);
	};
	
	//设置倒计时函数
	function gameTime(){
		t--;
		time.style.width = t*180/10 + 'px';
		// 游戏结束
		if(t<=0){
			clearInterval(timmer);
			clearInterval(wolfer);
			// end 父级显示
			end.parentElement.style.display = 'flex';
		}
	}
	// 点击再来一局
	end.onclick = function(){
		//刷新
		location = location;
	};
	
	// 创建狼
	function createWolf(){
		var img = document.createElement('img');
		//设置img的位置
		var dArrIndex = rand(0,dArr.length-1);
		img.style.left = dArr[dArrIndex].l;
		img.style.top = dArr[dArrIndex].t;
		//设置当前是第几张图片
		var index = 0;
		
		//设置当前img显示的是h还是x
		img.show = Math.random()<0.8?'h':'x';
		img.src = 'img/'+img.show+index+'.png';
		//设置该元素是否被点击过
		img.da = false;
		
		wp.appendChild(img);
		
		// 设置露头动画，动画有向上和向下两种，需要声明一个动画方向
		var dir = true;
		//声明动画
		var anima = setInterval(function(){
			if(dir){
				index++;
				img.src = 'img/'+img.show+index+'.png';
				if(index==5){
					dir = false;
				}
			}else{
				index--;
				img.src = 'img/'+img.show+index+'.png';
				// 回到洞中，然后删除该img
				if(index==0){
					clearInterval(anima);
					wp.removeChild(img);
				}
			}
		},250);
		
		//点击图片
		img.onclick = function(){
			if(this.da){
				return;
			}else{
				this.da = true;
			}
			//清除计时器
			clearInterval(anima);
			index=5;
			var daTimmer = setInterval(function(){
				index++;
				img.src = 'img/'+img.show+index+'.png';
				if(index==9){
					clearInterval(daTimmer);
					//删除元素
					wp.removeChild(img);
				}
			},250);
			//设置分数，首先判断是灰太狼还是小灰灰
			if(img.show=='h'){ // 灰太狼
				s+=10;
				score.innerHTML = s;
			}else{
				s-=10;
				score.innerHTML = s;
			}
		};
	}
</script>

css样式

* {
	margin:0;
	padding:0;
}

.wp {
	width:320px;
	height:480px;
	background:url(../img/game_bg.jpg) no-repeat 0 0;
	border:1px #f00 solid;
	position: relative;
	margin: 50px auto 0;
}

/*  分数和时间  */
#score,#time,.wp img,.smark,.game-over { position: absolute; }
#score {
	left:58px;
	top:10px;
	color:#fff;
	font-size:20px;
}
#time {
	width:180px;
	height:16px;
	left:63px;
	top:66px;
	background-color: #04BE02;
	border-radius:8px;
}

/* 游戏的蒙版层 */
.smark,.game-over {
	left:0;
	top:0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.3);
	width:100%;
	height:100%;
	z-index:100;
}
.game-over {
	display: none;
}
.smark span,.game-over span {
	display: block;
	cursor:pointer;
	width:50%;
	height:50px;
	text-align: center;
	line-height:44px;
	font-size:30px;
	background: #f60;
	color:#fff;
}
.game-over {
	flex-direction: column;
}
.game-over p {
	color:#fff;
	font-size:30px;
	margin-bottom:50px;
}
/* 设置灰太狼的相关样式 */
.wp img {
	width:100px;
	height:100px;
}

2.面向对象


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>面向对象</title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	/*
	1.面向过程编程(POP),开发的时候，主要是分析编程的步骤
	2.面向对象编程(OOP),开发的时候，抽离出来参与开发的对象，使用对象的属性和方法进行编程
	
	类和对象
	类是对象的抽象化
	对象是类的实例化
	
	js不是完全的面向对象，ECMAScript6之前，没有类的概念，只有对象的概念
	*/
   // 1.字面量创建一个对象
   var obj = {
	   name:'旺财',
	   color:'黄色',
	   lei:'中华田园犬',
	   eat:function(){
		   console.log('吃肉');
	   }
   };
   obj.eat();
   
   //2.工厂方法创建一个对象
	function createDog(name,color){
		// 原材料
		var dog = new Object();
		
		//加工
		dog.name = name;
		dog.color = color;
		dog.eat = function(){
			console.log(this.name);
		};
		
		//出厂
		return dog;
	}
	
	var d1 = createDog('大黄','黑色');
	var d2 = createDog('小黑','白色');
	
	d1.eat();
	d2.eat();
	
	/*
	1.constructor
	查看调用对象的构造函数
	*/
   var arr = new Array();
   arr[0] = '哈士奇';
   console.log(arr.constructor);
</script>

敲代码的皮皮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
打地鼠锅打灰太狼面向对象（工厂方法）

1.锅打灰太狼<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>锅打灰太狼</title> <link rel="stylesheet" type="text/css" href="css/lang.css"/> </head> <body> <div class="wp"> <sp
复制链接

扫一扫