初学PHP问答小游戏小case-CSDN博客

本文链接：https://blog.csdn.net/weixin_43830193/article/details/85242858

本文介绍了一个使用PHP实现的看图答题小游戏，通过数组存储题目、选项和答案，结合HTML和JavaScript实现动态显示题目和反馈答题结果。游戏包括三道题目，每题包含图片和多个选择项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

php：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用数组看图答题小游戏</title>
	<style type="text/css">
		.hide{display: none}
		li{cursor: pointer;}
	</style>
</head>
<body>
<?php 
	// 题目的数组
	// 
	// n道题
	// 
	// 1.题目
	// 
	// 2.选项：a/b/c/d
	// 
	// 3.答案

$timu_list = [
	1 => [
		"timu"=>"图中的主人公是谁？<img style='width:120px;heigth:160px' src='https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2151645358,34560062&fm=58'>",
		"option"=>["曹操","狄仁杰","张飞"],
		"result"=>0,
	],
	2 => [
		"timu"=>"好牌怎么胡？<img style='width:120px;heigth:160px' src='https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=211917072,815486818&fm=85&app=60&f=JPEG?w=121&h=75&s=F3A324E4040E354944278A080300D0DF'>",
		"option"=>["3","6","9"],
		"result"=>1,
	],
	3 => [
		"timu"=>"你最适合那个英雄？<img style='width:120px;heigth:160px' src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2694240513,652565669&fm=27&gp=0.jpg'>",
		"option"=>["曹操","狄仁杰","张飞"],
		"result"=>2,
	],
];
 ?>	

 <div class="timu_box">
 	<?php 
 	foreach ($timu_list as $key => $value) {
 		if ($key == 1) {
 			$class = '';
 		}else{
 			$class = 'hide';
 		}
 		//php 统计数组的数量  count()

 		echo "
 	<ul class='{$class}'>
 		<li><h2 onclick='console.dir()'>$key/".count($timu_list)."</h2></li>
 		<li>
 			<h1>{$value['timu']}</h1>
 		</li>
 		<li onclick='doit({$value['result']},0)'>{$value['option'][0]}</li>
 		<li onclick='doit({$value['result']},1)'>{$value['option'][1]}</li>
 		<li onclick='doit({$value['result']},2)'>{$value['option'][2]}</li>
 		<li><button id='btn{$key}' onclick='go_next()'>下一题</button></li>
 		<li><button id='up-btn{$key}' onclick='go_re()'>上一题</button></li>
 	</ul>";
 	}
 	 ?>
 </div>
 <script type="text/javascript">
 	window.onload=function(){
 		var timu_ul = document.querySelectorAll('.timu_box ul')
		if(cur_timu_index == 0){
			document.getElementById('up-btn'+(cur_timu_index+1)).className="hide"
		}
		if (cur_timu_index == timu_ul.length-1) {
			document.getElementById('up-btn'+(cur_timu_index+1)).className=""
			// console.log(document.getElementById('up-btn'+(cur_timu_index+1)))
		}
 	}
	var cur_timu_index = 0
	function go_next(){
		var timu_ul = document.querySelectorAll('.timu_box ul');
		// console.log(timu_ul)

		if (cur_timu_index<timu_ul.length-1) {
		// 隐藏之前的题目ul,
		// 之前的 cur_timu_index
		timu_ul[cur_timu_index].className= "hide";
		// 显示下一个ul
		// timu_ul[++cur_timu_index].className= "";
		timu_ul[++cur_timu_index].setAttribute("class","");
	}if (cur_timu_index == timu_ul.length-1) {
		document.getElementById('btn'+(cur_timu_index+1)).className="hide"
	}
		// class里面的hide去掉就可以了
		// 
	}
	function go_re(){
		var timu_ul = document.querySelectorAll('.timu_box ul');
		// console.log(timu_ul)

		if (cur_timu_index<timu_ul.length) {
		// 隐藏之前的题目ul,
		// 之前的 cur_timu_index
		timu_ul[cur_timu_index].className= "hide";
		// 显示下一个ul
		// timu_ul[++cur_timu_index].className= "";
		timu_ul[--cur_timu_index].setAttribute("class","");
	}if (cur_timu_index == timu_ul.length-1) {
		document.getElementById('btn'+(cur_timu_index+1)).className="hide"
	}
		
	}
function doit(true_rsl,choise_rsl){
	var ul=document.querySelector('ul');
	ul.addEventListener('click',function(even){
		if(even.target.tagName.toLowerCase() === 'li'){
			//toLowerCase() 方法用于把字符串转换为小写。
			//判断到底选择的是不是正确答案
	if (choise_rsl == true_rsl) {
		alert(
			"你点击了"+even.target.outerText+'\n'+
			'答对了'
			)

	}else{
		alert(
			"你点击了"+even.target.outerText+'\n'+
			'答错了'
			)

	}
			
			}
		});


}


 </script>
</body>
</html>

效果：