JS小游戏，车名猜国家

最新推荐文章于 2024-05-23 16:03:07 发布

一只小菜鸟ddd

最新推荐文章于 2024-05-23 16:03:07 发布

阅读量139

点赞数

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

版权

我是真的无聊至极哈哈哈

<html>

	<body>
		<div id="div1" style="left:30%;top:3%;position:absolute;margin:auto;font-size:20px">
			<p id="carName"></p>
			<img id="carImg" style="width:60px;height:50px">
		</div>
		<div id="btnDiv" style="left:20%;top:20%;position:absolute;margin:auto"></div>
		<script>
			var carMap = new Map();//车名-国家Map
			var country = ["国产","日本","德国","法国","意大利","英国","美国","韩国","捷克"];
			var carList = [];

			function initGame(){
					carMap.set("广汽","国产");
					carMap.set("奇瑞","国产");
					carMap.set("一汽","国产");
					carMap.set("比亚迪","国产");
					carMap.set("长城","国产");
					carMap.set("MG(名爵)","国产");
					carMap.set("荣威","国产");
					carMap.set("五菱","国产");
					carMap.set("宝骏","国产");
					carMap.set("依维柯","国产");
					carMap.set("吉利","国产");
					carMap.set("帝豪","国产");
					carMap.set("金杯","国产");

					carMap.set("丰田","日本");
					carMap.set("本田","日本");
					carMap.set("马自达","日本");
					carMap.set("Nissan","日本");
					carMap.set("斯巴鲁","日本");
					carMap.set("雷克萨斯","日本");
					carMap.set("铃木","日本");
					carMap.set("三菱","日本");
					carMap.set("英菲尼迪","日本");

					carMap.set("劳斯莱斯","德国");
					carMap.set("保时捷","德国");
					carMap.set("奔驰","德国");
					carMap.set("宝马","德国");
					carMap.set("奥迪","德国");
					carMap.set("大众","德国");
					carMap.set("劳伦士","德国");
					carMap.set("迈巴赫","德国");

					carMap.set("标致","法国");
					carMap.set("雪铁龙","法国");
					carMap.set("布加迪","法国");
					carMap.set("雷诺","法国");

					carMap.set("法拉利","意大利");
					carMap.set("玛莎拉蒂","意大利");
					carMap.set("兰博基尼","意大利");

					carMap.set("宾利","英国");
					carMap.set("迷你","英国");
					carMap.set("捷豹","英国");
					carMap.set("路虎","英国");

					carMap.set("凯迪拉克","美国");
					carMap.set("雪佛兰","美国");
					carMap.set("福特","美国");
					carMap.set("别克","美国");
					carMap.set("悍马","美国");
					carMap.set("林肯","美国");
					carMap.set("吉普","美国");

					carMap.set("起亚","韩国");
					carMap.set("现代","韩国");
					carMap.set("双龙","韩国");

					carMap.set("斯柯达","捷克");

					carMap.forEach(function(value,key){
　　　　　　　　　　　　carList.push(key);
　　　　　　　　　	});
			}
			function guessCountry(){
				//绑定按钮点击事件
				for(var i=0;i<country.length;i++){
					var btnDiv = document.getElementById("div_"+i);
					(function(val){
					btnDiv.onclick=function(){
						//重新获取元素
						var divs = document.getElementById("div_"+val);
						var carName = document.getElementById("carName").innerText;
						var country = carMap.get(carName);
						if(divs.innerText == country){
							//猜对了，显示下一个车名
							showCar();
						}else{
							alert("猜错了，"+carName+"的国家是"+country);
							return;
						}
					}
				})(i);
				}
			}
			function showCar(){
				//生成随机数，显示车名
				var randomNum = Math.floor(Math.random()*(carList.length+1));
				document.getElementById("carName").innerText = carList[randomNum];
				document.getElementById("carImg").src="img/"+carList[randomNum]+".png";
			}
			function showCountry(){
				var divAll = document.getElementById("btnDiv");
				for(var i=0;i<country.length;i++){
					var div = document.createElement("button");
					div.id="div_"+i;
					div.innerText=country[i];
					divAll.appendChild(div);
				}
			}
			//初始化游戏
			initGame();
			//显示车名
			showCar();
			//显示国家
			showCountry();
			//绑定点击事件
			guessCountry();
		</script>
	</body>
</html>