标题根据大字的颜色选择对应的小字,选对加1分
代码如下:
html和css代码
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 300px;
margin: 0 auto;
position: relative;
border: 1px solid #f00;
}
.time,.score{
position: absolute;
top: 2px;
font-size: 26px;
}
.time{
left: 0;
}
.score{
right: 0;
}
.bigText{
font-size: 150px;
text-align: center;
margin-top: 30px;
}
.rule{
font-size: 30px;
text-align: center;
}
.smallText{
text-align: center;
font-size: 40px;
/* margin-top: 20px; */
cursor: pointer;
margin: 20px 3px 0px;
}
</style>
<body>
<div class="wrap">
<span class='time'>时间:0</span>
<span class="score">分数:0</span>
<p class="bigText">哈</p>
<p class="rule">根据上面字的颜色,从下面选择正确的字</p>
<div class="smallText">
<span>哈</span>
<span>哈</span>
<span>哈</span>
<span>哈</span>
<span>哈</span>
</div>
</div>
</body>
javascript代码
<script>
// 获取元素的方式
function q(selector){
return document.querySelector(selector)
}
var myTime=q('.time');
var myScore=q('.score');
var myBigText=q('.bigText');
var mySmallText=document.querySelectorAll('.smallText span');
// 定义颜色和文本
var colorArr=['red','green','blue','yellow','black'];
var textArr=['红','绿','蓝','黄','黑'];
// 定义分数的变量
var gameScore=0;
// 游戏的总时间
var gameTime=null;
// 定时器
var games=null;
randBig()
// 大字的颜色和文字
function randBig(){
myBigText.innerHTML=textArr[rand(0,4)];
myBigText.style.color=colorArr[rand(0,4)];
}
randSmall()
// 小字的颜色和文字
function randSmall(){
// 定义两个空数组,用来存放随机出来的颜色和文字
var randColorArr=[];
var randTextArr=[];
// 随机颜色
while(randColorArr.length < 5){
var randSmallColor = colorArr[rand(0,4)];
if(randColorArr.indexOf(randSmallColor) == -1){
randColorArr.push(randSmallColor);
}
}
// 文字随机
while(randTextArr.length < 5){
var randSmallText=textArr[rand(0,4)]
if(randTextArr.indexOf(randSmallText) == -1){
randTextArr.push(randSmallText);
}
}
// 把随机到的颜色和文字赋值给小字
for(var i = 0; i<mySmallText.length;i++){
mySmallText[i].style.color = randColorArr[i];
mySmallText[i].innerHTML = randTextArr[i];
// 给小字添加点击事件
mySmallText[i].onclick=function(){
// 判断对错 大字的颜色 == 小字的文本/内容
var newBigColor = myBigText.style.color;
var newSmallText = this.innerHTML;
console.log(newBigColor,newSmallText);
// myBigText.style.color='red'
if(colorArr.indexOf(newBigColor) == textArr.indexOf(newSmallText)){
// 颜色和字匹配
// 加分
addScore(1);
// 重新计时
funTime();
// 重新随机大字和小字
randBig()
randSmall()
}else{
// 游戏结束,计算分数
gameOver();
}
}
}
}
// 加分
function addScore(num){
gameScore += num;
// return gameScore;
myScore.innerHTML = '分数:'+gameScore
}
// 重新计时
function funTime(){
gameTime = 10;
myTime.innerHTML = '时间:' + gameTime;
clearInterval(games)
games = setInterval(function(){
if(gameTime==0){
gameOver();
}else{
// 时间--
gameTime--
myTime.innerHTML = '时间:'+gameTime;
}
},1000);
}
// 游戏结束
function gameOver(){
// 清除定时器
clearInterval(games);
alert('游戏结束,您的分数为:' + gameScore);
for(var i=0; i<mySmallText.length;i++){
mySmallText[i].onclick=function(){
return false;
}
}
}
// 随机数
function rand(min,max){
return Math.floor(Math.random()*(max-min+1)+min)
}
</script>