JS:综合应用题：选字游戏 (运用倒计时，DOM 获取，if语句，for 循环等)

最新推荐文章于 2024-07-25 10:45:42 发布

一染星辰

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量195

点赞数 1

分类专栏： javascript试题

本文链接：https://blog.csdn.net/weixin_59519449/article/details/120078495

版权

css html html5

javascript试题专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选字游戏</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	html,body{
		height: 100%;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.clearfix:after{
		content: '';
		display: block;
		clear:both;
	}
	.wrap{
		position: relative;
		width: 500px;height: 98%;
		border: 5px solid #cef;
		margin:0 auto;
	}
	.countdown,.score{
		width: 50%;
		padding: 10px 0 30px;
		text-align: left;
		text-indent: 30px;
		font-size: 30px;
	}
	.txt{
		font-size: 60px;
		line-height: 180px;
		text-align: center;
	}
	.tip{
		text-align: center;
		font-size: 32px;
		margin-top: 60px;
	}
	.tip span{
		color:red;
	}
	.btns{
		width: 510px;
		height: 100px;
		position: absolute;
		left: 0;
		bottom: 30px;
		line-height: 100px;
		margin-left: -10px;
	}
	ul.btns li{
		float: left;
		width:92px;
		list-style: none;
		text-align: center;
		font-size: 42px;
		background: #ccc;
		border-radius: 5px;
		margin-left: 10px;
		cursor: pointer;

	}
	</style>
</head>
<body>
	<div class="wrap">
	<div class="header clearfix">
		<div class="countdown fl"></div>
		<div class="score fr"></div>
	</div>	
	<div class="main">
		<p class="txt">黄</p>
		<p ></p>
		<p class="tip">根据字体的颜色选出与其颜色对应的中文描述<span></span></p>
	</div>
	
	<ul class="btns">
		<li>红</li>
		<li>黄</li>
		<li>蓝</li>
		<li>绿</li>
		<li>黑</li>
	</ul>
</div>
</body>
<script>
    var txtArr=["红","黄","蓝","绿","黑"];
    var colorArr=["red","yellow","blue","green","black"];
    var txt=document.querySelector(".txt");//文字元素。
	var countdown=document.querySelector(".countdown");//倒计时元素
	var score=document.querySelector(".score");
	var btns=document.querySelectorAll(".btns li");
	var maxScore=document.querySelector(".tip span");
	var scoreNum=0;
	var timeNum=60;
   //localStorage.scoreMax=
	if(localStorage.scoreMax==undefined){
	    localStorage.scoreMax=0;
	}
    maxScore.innerHTML=localStorage.scoreMax;

	init();
    startGame();//开始游戏
	function startGame(){
        var timer=setInterval(function(){
            timeNum--;
            if(timeNum<0){
                clearInterval(timer);
                localStorage.scoreMax=Math.max(localStorage.scoreMax/1,scoreNum);
                maxScore.innerHTML=localStorage.scoreMax;
                alert("游戏结束！您获得分数是："+scoreNum+"还想玩，点击再玩一次！");
                timeNum=10;//游戏结束啦
				// if(localStorage.scoreMax<scoreNum){
                 //    localStorage.scoreMax=scoreNum;

			    scoreNum=0;
				startGame();

            }
            countdown.innerHTML="倒计时："+timeNum;

        },1000)
	}



	for(var i=0;i<btns.length;i++){
	    btns[i].onclick=function(){
	        //根据字体的颜色选出与其颜色对应的中文描述
			if(colorArr.indexOf(txt.style.color)==txtArr.indexOf(this.innerHTML)){
				//成功加2分
				scoreNum+=2;
			}else{
				//失败啦扣1分
				scoreNum-=1;
			}
			if(scoreNum<0)
			    scoreNum=0;
			init();
	        // console.log(colorArr.indexOf(txt.style.color));
	        // console.log(txtArr.indexOf(this.innerHTML));
		}
	}
	//初始化
	function init(){
        countdown.innerHTML="倒计时："+timeNum;
        score.innerHTML="得分："+scoreNum;


        //初始化文字的方法
        txt.innerHTML=txtArr[getRandomNum(0,4)];//初始颜色汉字
        txt.style.color=colorArr[getRandomNum(0,4)];//初始化文字的颜色


        //初始化下边的按钮
        var btnColor=getRandomArr();//获得0，1，2，3，4打乱后的数组 [0,3,1,2,4]
        var btnTxt=getRandomArr();  //获得0，1，2，3，4打乱后的数组[1,3,2,4,0]
        for(var i=0;i<btns.length;i++){
            btns[i].innerHTML=txtArr[btnTxt[i]];
            btns[i].style.color=colorArr[btnColor[i]];
        }
	}







	//获得0，1，2，3，4打乱后的数组
	function getRandomArr(){
	    var arr=[0,1,2,3,4];
	    var myArr=[];
	    while(arr.length>0){
	        var index=getRandomNum(0,arr.length-1);
	        myArr.push(arr[index]);
	        arr.splice(index,1);
		}
		return myArr;
	}


    //获得指定范围的数字
    function getRandomNum(min,max){
        return Math.floor(Math.random()*(max-min+1)+min);
	}
</script>
</html>

运转出来页面为：

一染星辰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS:综合应用题：选字游戏 (运用倒计时，DOM 获取，if语句，for 循环等)

<!doctype html><html><head><meta charset="utf-8"><title>选字游戏</title><style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; } .fl{ float: left; } .fr{ float: right; } ..
复制链接

扫一扫