JS小游戏之国旗练习

最新推荐文章于 2021-06-01 00:02:17 发布

一只小菜鸟ddd

最新推荐文章于 2021-06-01 00:02:17 发布

阅读量393

点赞数 1

文章标签： js 游戏

本文链接：https://blog.csdn.net/qq_38078190/article/details/104817465

版权

这个量真的大了，想要素材私信我吧

<html>

	<body>
		<div id="div1" style="left:30%;top:10%;position:absolute;margin:auto;">
			<p id="countryName" style="font-size:20px"></p>
			<img id="flagImg" style="width:130px;height:120px">
		</div>
		<button id="nextBtn" onclick="showFlag()" style="left:42%;top:28%;position:absolute;margin:auto;font-size:15px">下一个</button>
		<button id="startBtn" onclick="startGame()" style="left:42%;top:32%;position:absolute;margin:auto;font-size:15px">开始练习</button>
		<div id="btnDiv" style="left:28%;top:40%;position:absolute;margin:auto">
			<button id="div_0"></button><button id="div_1"></button><button id="div_2"></button><button id="div_3"></button>
		</div>
		<script>
			var countryList = [];
			var currentCountry = "";
			function initGame(){
				countryList.push("中国","美国","法国","英国","德国","澳大利亚","韩国","加拿大","巴西","缅甸","俄罗斯","瑞士");
				countryList.push("新西兰","日本","意大利","古巴","埃及","荷兰","丹麦","爱尔兰","西班牙","斐济","朝鲜","墨西哥");
				countryList.push("冈比亚","马来西亚","利比亚","希腊","瑞典","伊朗","南非","印度","波兰","秘鲁","新加坡","圭亚那");
				countryList.push("哥伦比亚","智利","以色列","格鲁吉亚","冰岛","奥地利","菲律宾","捷克","肯尼亚","梵蒂冈","挪威","葡萄牙");
				countryList.push("芬兰","阿根廷","蒙古","乌克兰","白俄罗斯","刚果","匈牙利","不丹","波斯尼亚和黑塞哥维那","爱沙尼亚","利比里亚","玻利维亚");
				countryList.push("委内瑞拉","马里","阿富汗","苏丹","立陶宛","卢旺达","阿尔及利亚","斯洛文尼亚","海地","乌干达","赞比亚","克罗地亚");
				countryList.push("坦桑尼亚","巴基斯坦","尼日利亚","哈萨克斯坦","贝宁","多哥","基里巴斯","图瓦卢","特立尼达和多巴哥","比利时","莫桑比克","印度尼西亚");
				countryList.push("布基纳法索","日尼尔","罗马尼亚","摩纳哥","哥斯达黎加","塞尔维亚","土耳其","加蓬","南苏丹","泰王国","列支敦士登","加纳");
				countryList.push("也门","尼泊尔","赤道几内亚","圣卢西亚","塞拉利昂","索马里","乍得","斯洛伐克","牙买加","密克罗尼西亚","越南","黑山");
				countryList.push("毛里塔尼亚","塞内加尔","卢森堡","科特迪瓦","摩尔多瓦","汤加","莱索托","吉尔吉斯斯坦","保加利亚","阿联酋","波多黎各","洪都拉斯");
				countryList.push("马拉维","科摩罗","津巴布韦","纳米比亚","厄瓜多尔","马达加斯加","老挝","科威特","安哥拉","帕劳","沙特阿拉伯","几内亚比绍");
				countryList.push("几内亚","瓦努阿图","乌拉圭","毛里求斯","巴哈马","巴勒斯坦","土库曼斯坦","马尔代夫","科索沃","马绍尔群岛","亚美尼亚","瑙鲁");
				countryList.push("尼加拉瓜","多米尼克","圣马力诺","乌兹别克斯坦","博茨瓦纳","喀麦隆","塔吉克斯坦","厄立特里亚国","中非共和国","佛得角","阿曼苏丹国","伯利兹");
				countryList.push("伊拉克","马其他","巴拉圭","拉脱维亚","突尼斯","埃塞俄比亚","格林纳达","马其顿","塞浦路斯共和国","安提瓜和巴布达","刚果共和国","阿尔巴尼亚");
				countryList.push("东帝汶民主共和国","约旦哈希姆王国","苏里南","巴拿马","斯里兰卡","黎巴嫩","摩洛哥","斯威士兰","叙利亚","安道尔","巴巴多斯","孟加拉");
				countryList.push("布隆迪共和国","圣基茨和尼维斯","危地马拉","塞舌尔","吉布提","阿塞拜疆","卡塔尔国","多米尼加","柬埔寨","萨摩亚","所罗门群岛","巴布亚新几内亚");
				countryList.push("萨尔瓦多","巴林王国","文莱达鲁萨兰国","圣文森特和格林纳丁斯","圣多美和普林西比");
				
				showFlag();
			}
			function guessCountry(temCountryList){
				//绑定按钮点击事件
				for(var i=0;i<temCountryList.length;i++){
					var btnDiv = document.getElementById("div_"+i);
					(function(val){
					btnDiv.onclick=function(){
						//重新获取元素
						var divs = document.getElementById("div_"+val);
						if(divs.innerText == currentCountry){
							//猜对了，显示下一个国旗
							showFlag();
							showCountry();
							new Audio("sound/正确.mp3").play();
						}else{
							new Audio("sound/错误.mp3").play();
						}
					}
				})(i);
				}
			}
			function showFlag(){
				//生成随机数，显示国旗
				var randomNum = Math.floor(Math.random()*(countryList.length));//从0开始
				document.getElementById("countryName").innerText = countryList[randomNum];
				document.getElementById("flagImg").src="img/"+countryList[randomNum]+".jpg";
				currentCountry = countryList[randomNum];
				if(document.getElementById("startBtn").innerText == "开始练习"){
					document.getElementById("countryName").style.visibility="visible";
				}else{
					document.getElementById("countryName").style.visibility="hidden";
				}
			}
			function startGame(){
				var startBtn = document.getElementById("startBtn");
				if(startBtn.innerText == "开始练习"){
					startBtn.innerText = "休息一下";
					document.getElementById("countryName").style.visibility="hidden";
				}else{
					startBtn.innerText = "开始练习";
					document.getElementById("countryName").style.visibility="visible";
				}
				showCountry();
			}
			function showCountry(){
				//先获取当前国家，再随机抽取另外三个国家，放在一起生成按钮
				var temCountryList = randomCountry(currentCountry,4);
				for(var i=0;i<temCountryList.length;i++){
					var div = document.getElementById("div_"+i);
					div.innerText=temCountryList[i];
				}
				//绑定点击事件
				guessCountry(temCountryList);
			}
			//返回随机国家
			function randomCountry(currentCountry,length){
				var newList = new Array();
				newList.push(currentCountry);
				while(newList.length != length){
					var countryName;
					while(newList.indexOf(countryName = returnRandomCountry()) == -1){
						newList.push(countryName);
						break;
					}
				}
				//删除掉第一个元素重新随机插入
				newList.splice(0,1);
				newList.splice(Math.floor(Math.random()*(length)),0,currentCountry);
				console.log(newList);
				return newList;
			}
			//随机抽取list的元素
			function returnRandomCountry(){
				return countryList[Math.floor(Math.random()*(countryList.length))];
			}
			//显示国旗
			initGame();
		</script>
	</body>
</html>

一只小菜鸟ddd

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS小游戏之国旗练习

这个量真的大了，想要素材私信我吧<html> <body> <div id="div1" style="left:30%;top:10%;position:absolute;margin:auto;"> <p id="countryName" style="font-size:20px"></p> <i...
复制链接

扫一扫