向clearwater 大师学习编程，和夏南离一起打BOSS，《第一版程序》

玖公子 · 发表于 2020-2-25 17:07

0x1源代码

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>玖公子</title>
		<style ></style>
		<script type="text/javascript">
			var len = 1;
			//1P操作
			function func1(a){
				var d = document.getElementsByTagName("div")[2];
				d.innerHTML = d.innerHTML + "<p>第" + len +"回合</p>";

				if (a == 1) {
					var x = Math.ceil(Math.random()*3);
					if(x == 1)
					{
						 var p1 = "<p>玖公子对BOSS小菜鸟一枚发动了攻击</p>";
						 var p2 = "<p>BOSS小菜鸟对玖公子一枚发动了攻击</p>";
						 var hp1 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[0].getElementsByTagName("a")[0];
						 hp1.innerText = hp1.innerText - 1;
						 var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						 hp2.innerText = hp2.innerText - 1;
						 len = len + 1;
						 d.innerHTML = d.innerHTML + p1 + p2;
					}else if(x ==2)
					{
						var p1 = "<p>玖公子对BOSS小菜鸟一枚发动了攻击</p>";
						var p2 = "<p>BOSS小菜鸟对玖公子一枚发动了防御</p>";
						var hp1 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[0].getElementsByTagName("a")[0];
						hp1.innerText = hp1.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}else
					{
						var p1 = "<p>玖公子对BOSS小菜鸟一枚发动了攻击</p>";
						var p2 = "<p>BOSS小菜鸟对玖公子一枚发动了挑衅</p>";
						var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						hp2.innerText = hp2.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}
				} else if(a == 2){
					if(x == 1)
					{
						 var p1 = "<p>玖公子对BOSS小菜鸟一枚发动了防御</p>";
						 var p2 = "<p>BOSS小菜鸟对玖公子一枚发动了攻击</p>";
						 var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						 hp2.innerText = hp2.innerText - 1;
						 len = len + 1;
						 d.innerHTML = d.innerHTML + p1 + p2;
					}else if(x ==2)
					{
						var p1 = "<p>玖公子对BOSS小菜鸟一枚发动了防御</p>";
						var p2 = "<p>BOSS小菜鸟对玖公子一枚发动了防御</p>";
						var hp1 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[0].getElementsByTagName("a")[0];
						hp1.innerText = hp1.innerText - 1;
						var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						hp2.innerText = hp2.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}else
					{
						var p1 = "<p>玖公子对BOSS小菜鸟一枚发动了防御</p>";
						var p2 = "<p>BOSS小菜鸟对玖公子一枚发动了挑衅</p>";
						var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						hp2.innerText = hp2.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}
				}
				else 
				{
					if(x == 1)
					{
						 var p1 = "<p>玖公子对BOSS小菜鸟一枚发动了挑衅</p>";
						 var p2 = "<p>BOSS小菜鸟对玖公子一枚发动了攻击</p>";
						 var hp1 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[0].getElementsByTagName("a")[0];
						 hp1.innerText = hp1.innerText - 1;
						 len = len + 1;
						 d.innerHTML = d.innerHTML + p1 + p2;
					}else if(x ==2)
					{
						var p1 = "<p>玖公子对BOSS小菜鸟一枚发动了挑衅</p>";
						var p2 = "<p>BOSS小菜鸟对玖公子一枚发动了防御</p>";
						var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						hp2.innerText = hp2.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}else
					{
						var p1 = "<p>玖公子对BOSS小菜鸟一枚发动了挑衅</p>";
						var p2 = "<p>BOSS小菜鸟对玖公子一枚发动了挑衅</p>";
						var hp1 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[0].getElementsByTagName("a")[0];
						hp1.innerText = hp1.innerText - 1;
						var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						hp2.innerText = hp2.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}
				}
			}
			
			//2P操作
			function func2(a){
				var d = document.getElementsByTagName("div")[2];
				d.innerHTML = d.innerHTML + "<p>第" + len +"回合</p>";
				
				if (a == 1) {
					var x = Math.ceil(Math.random()*3);
					if(x == 1)
					{
						 var p1 = "<p>夏南离对BOSS小菜鸟一枚发动了攻击</p>";
						 var p2 = "<p>BOSS小菜鸟对夏南离一枚发动了攻击</p>";
						 var hp1 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[1].getElementsByTagName("a")[0];
						 hp1.innerText = hp1.innerText - 1;
						 var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						 hp2.innerText = hp2.innerText - 1;
						 len = len + 1;
						 d.innerHTML = d.innerHTML + p1 + p2;
					}else if(x ==2)
					{
						var p1 = "<p>夏南离对BOSS小菜鸟一枚发动了攻击</p>";
						var p2 = "<p>BOSS小菜鸟对夏南离一枚发动了防御</p>";
						var hp1 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[1].getElementsByTagName("a")[0];
						hp1.innerText = hp1.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}else
					{
						var p1 = "<p>夏南离对BOSS小菜鸟一枚发动了攻击</p>";
						var p2 = "<p>BOSS小菜鸟对夏南离一枚发动了挑衅</p>";
						var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						hp2.innerText = hp2.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}
				} else if(a == 2){
					if(x == 1)
					{
						 var p1 = "<p>夏南离对BOSS小菜鸟一枚发动了防御</p>";
						 var p2 = "<p>BOSS小菜鸟对夏南离一枚发动了攻击</p>";
						 var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						 hp2.innerText = hp2.innerText - 1;
						 len = len + 1;
						 d.innerHTML = d.innerHTML + p1 + p2;
					}else if(x ==2)
					{
						var p1 = "<p>夏南离对BOSS小菜鸟一枚发动了防御</p>";
						var p2 = "<p>BOSS小菜鸟对夏南离一枚发动了防御</p>";
						var hp1 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[1].getElementsByTagName("a")[0];
						hp1.innerText = hp1.innerText - 1;
						var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						hp2.innerText = hp2.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}else
					{
						var p1 = "<p>夏南离对BOSS小菜鸟一枚发动了防御</p>";
						var p2 = "<p>BOSS小菜鸟对夏南离一枚发动了挑衅</p>";
						var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						hp2.innerText = hp2.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}
				}
				else 
				{
					if(x == 1)
					{
						 var p1 = "<p>夏南离对BOSS小菜鸟一枚发动了挑衅</p>";
						 var p2 = "<p>BOSS小菜鸟对夏南离一枚发动了攻击</p>";
						 var hp1 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[1].getElementsByTagName("a")[0];
						 hp1.innerText = hp1.innerText - 1;
						 len = len + 1;
						 d.innerHTML = d.innerHTML + p1 + p2;
					}else if(x ==2)
					{
						var p1 = "<p>夏南离对BOSS小菜鸟一枚发动了挑衅</p>";
						var p2 = "<p>BOSS小菜鸟对夏南离一枚发动了防御</p>";
						var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						hp2.innerText = hp2.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}else
					{
						var p1 = "<p>夏南离对BOSS小菜鸟一枚发动了挑衅</p>";
						var p2 = "<p>BOSS小菜鸟对夏南离一枚发动了挑衅</p>";
						var hp1 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[1].getElementsByTagName("a")[0];
						hp1.innerText = hp1.innerText - 1;
						var hp2 = document.getElementsByTagName("div")[1].getElementsByTagName("p")[2].getElementsByTagName("a")[0];
						hp2.innerText = hp2.innerText - 1;
						len = len + 1;
						d.innerHTML = d.innerHTML + p1 + p2;
					}
				}
			}
		</script>
	</head>
	<body>
		<div>
			<p style="text-align: center;font-size: 36px;">玖公子学javascript</p>
			<p style="font-size: 36px;">===============================================</p>
		</div>
		<div >
			<p>
				<button >玖&#8195;&#8195;公&#8195;&#8195;子&#8195;</button>血量：<a>10</a>
				<button>攻击</button>
				<button>防御</button>
				<button>挑衅</button>
			</p>
			<p>
				<button >夏&#8195;&#8195;南&#8195;&#8195;离&#8195;</button>血量：<a>10</a>
				<button>攻击</button>
				<button>防御</button>
				<button>挑衅</button>
			</p>
			<p>
				<button >BOSS小菜鸟一枚</button>血量：<a>100</a>
				<button >攻击</button>
				<button >防御</button>
				<button >挑衅</button>
			</p>
		</div>
		<div>
			
		</div>
	</body>
	
</html>

0x2效果图

0x3总结交流
1.document.getElementsByTagName（“标签名”）获取到的是一个数组，如果只有一个元素，也必须使用下标0来访问。
2.定义变量都是使用var，类型会自动匹配。
3.对于显示战斗内容的div，我每一个读取全部内容，再重新写回去，会不会影响执行效率，有没有办法直接在div内部的末尾直接插入标签？
4.程序字符串明显冗余，应该怎么优化，定义多个字符串感觉也麻烦。

PS：向@clearwater 大师学习编程，@夏南离一起来学习打boss了！

玖公子 · 发表于 2020-2-25 18:01

本帖最后由玖公子于 2020-2-25 18:04 编辑

clearwater 发表于 2020-2-25 17:41
厉害了，玖公子大神。

还是把贫僧下来了吧，别上架烤。贫僧不懂编程啊。

你是大佬，精通前端js+jquery，我这是看了大师你的代码，深受启发，虽然我不太会后端语言，但是前端是视觉效果，只要一个浏览器和记事本就能写代码。

最后我看了一下午的js对象参考手册和html dom参考手册才勉强，经过百度，才写出来，不像大师根基深厚，我这无根之萍，随时就倒，语法也不知道，最后推荐大师w3school和菜鸟教程这两个网站，我今天就是在上面查的对象和方法。

clearwater · 发表于 2020-2-25 18:08

本帖最后由 clearwater 于 2020-2-25 18:12 编辑

玖公子发表于 2020-2-25 18:01
你是大佬，精通前端js+jquery，我这是看了大师你的代码，深受启发，虽然我不太会后端语言，但是前端是视 ...

谢谢玖公子指教。

jquery我还没学呢。

没学，我在你口中就变成精通辣？我简直是天才辣。

对辣，你才是楼主。

我走辣，免得管理大大把贫僧当灌水抓起来。

走之前，受贫僧团团一拜，表达对玖公子的敬仰之情。

2982176321 · 发表于 2020-2-25 17:29

有点意思23333~

灵剑丹心 · 发表于 2020-2-25 17:37

看成7酱clearlove

clearwater · 发表于 2020-2-25 17:41

厉害了，玖公子大神。

还是把贫僧下来了吧，别上架烤。贫僧不懂编程啊。

plutominGW · 发表于 2020-2-25 17:41

有点东西，学习一下:

yanye123 · 发表于 2020-2-25 17:52

很适合新人学习非常赞！！！

clearwater · 发表于 2020-2-25 17:53

代码都看不懂。不过我看懂了标题，标题有一个bug

嘻嘻！

如果玖公子大师收我为徒，我就告诉你。

玖公子 · 发表于 2020-2-25 18:05

clearwater 发表于 2020-2-25 17:41
厉害了，玖公子大神。

还是把贫僧下来了吧，别上架烤。贫僧不懂编程啊。

不敢不敢，我只适合在水区浪

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] 向clearwater 大师学习编程，和夏南离一起打BOSS，《第一版程序》

免费评分