选文字游戏一个根据颜色来选择对应文字的小游戏

生成5个颜色和5个文字，分别对应，点击正确开始游戏，点击正确则加分，最后算出总分

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>选字文字游戏</title><style>.game {height: 500px;width: 400px;border: 1px solid black;margin: 0 auto;padding: 20px;text-align: center;}span {font-size: 20px;}.time {margin-right: 40px;}.big {font-size: 200px;}p {font-size: 25px;}.choose > span {font-size: 70px;cursor: pointer;}</style>
</head>
<body>
<div class="game"><span class="time"> 时间：<b id="time">30s</b></span><span class="score">分数：<b id="score">0</b></span><div class="big">黑</div><p>根据上面字的颜色从下面选择正确的字，选择正确自动开始,选错的话就会减一秒</p><div class="choose"><span>黑</span><span>黑</span><span>黑</span><span>黑</span><span>黑</span></div>
</div>
<script>var texts = ["黑", "绿", "黄", "蓝", "红"]var colors = ["black", "green", "yellow", "blue", "red"]var big = document.getElementsByClassName("big")[0];var choose = document.getElementsByClassName("choose")[0];var smalls = choose.getElementsByTagName("span");//大字的颜色和文字改变function ran() {  //随机var r = parseInt(Math.random() * 5);return r;}function bigChange() {big.innerHTML = texts[ran()];big.style.color = colors[ran()];}bigChange();//得到一个不重复的数组,可以用不重复的下标function ranArr() {//0 1 2 3 4var arr = [];while (arr.length < 5) {var random = ran();//字符串api:判断一个字符在字符组中的位置if (arr.indexOf(random) == -1) {//得到的随机数不存在数组中arr.push(random);//push()，将元素添加在数组末端}}return arr;}//小字的颜色和文字改变function smallsChange() {//把颜色只出现一次var textArr = ranArr();var colorArr = ranArr();for (var i = 0; i < smalls.length; i++) {smalls[i].innerHTML = texts[textArr[i]];smalls[i].style.color = colors[colorArr[i]];}}smallsChange();//判断第一步是否正确var timer = null;var count = 30;var isPlay = false;var time = document.getElementById("time");var score = document.getElementById("score");//通过本文本获取idfor (var i = 0; i < smalls.length; i++) {smalls[i].onclick = function () {var index = texts.indexOf(this.innerHTML);//黑var sColor = colors[index];//blackif (sColor == big.style.color) {smallsChange();bigChange();score.innerHTML = parseInt(score.innerHTML) + 1;if (timer == null) {timer = setInterval(function () {time.innerHTML = --count;//定时器if (count === 0) {clearInterval(timer);alert("游戏结束！！！" + "你的得分：" + score.innerHTML);}}, 1000);}} else {--count;}}}/*function time(){dd = getElementsByTagName(time)}*/
</script>
</body>
</html>

功能还没有完善，扣分、暂停等等功能还没有弄出来。瑕疵还很多，但已经尽力了…还要加油啊

选文字游戏一个根据颜色来选择对应文字的小游戏相关推荐

C语言写一个很好玩的皇帝的后宫小游戏
C语言写一个很好玩的皇帝的后宫小游戏前言先演示一下上源码总结前言只是单纯喜欢C语言,闲着无事把以前学习的时候的案例编了一下,都是很基础的代码,for,swich,if这些,基础好的看完后完 ...
前端代码实现的一个消除类型的图片滑滑乐小游戏分享
最近在个人网站butterpig实现了一个像素消除类型的小游戏,在移动端和PC端都可以玩.我给取名叫'图片滑滑乐'O(∩_∩)O哈哈~ 游戏的最开始,将图片持续抽象为'巨大'的像素点,这时候屏幕上只有 ...
该怎样选择适合自己的小游戏引擎？
随着微信生态中,小程序应用指数级的增长,许多休闲游戏变成为了众多游戏厂商流量变现的新手段.以近期很火的"羊了个羊"为例,它便是我们常常所说的小游戏. 游戏和小游戏的区别要盘点小游 ...
使用python写一个怎么猜都猜不对的数字小游戏-python趣用之法1
猜数字小游戏直接上源码了 lst = [] # 使用range函数生成一个含有数字1-10的列表 correct = list(range(1,11)) i = 0 while i < 9:d ...
习题35 一个if elif else 和函数的综合小游戏
# 从sys库中导入exit函数 from sys import exit# 定义gold_room()函数 def gold_room():print("这个房间里全是金子你要拿走多少?& ...
求助FC上的一个c++代码实现丧心病狂的走迷宫小游戏！
这篇文章主要介绍了基于C语言实现简单的走迷宫游戏,用到双向队列,方便在运行完毕后输出经过的点,感兴趣的小伙伴们可以参考一下,本文实例讲述了C语言实现简单的走迷宫游戏的方法,代码完整,便于读者理解. 要 ...
今天带大家用Python制作一个FlappyBird（飞翔的小鸟）的小游戏
相关文件源码分享,问题解答!! 关注小编,私信小编领取哟! 当然别忘了一件三连哟~~ 对了大家可以关注小编的公众号哟~~ 有很多资源可以领取的哟!! 大家也可以去b站看我的一些教学视频哟!! 更多P ...
python爬虫网页文字游戏_python爬虫下载某网站156个网页小游戏素材
本帖最后由三木猿于 2020-9-18 23:19 编辑有哪些游戏自己看吧↓ 一波网页小游戏(摸鱼专用) https://www.52pojie.cn/thread-1269936-1-1.ht ...
用C语言写了一个明日方舟的简略的抽卡小游戏
明日方舟抽卡小游戏目录明日方舟抽卡小游戏第一步创建菜单游戏的实现头文件的声明写这个程序的灵感来来自于<每天都要学一点哦>,本人不怎么完原神,就自己做了个明日方舟版的过程和猜 ...

选文字游戏一个根据颜色来选择对应文字的小游戏

选文字游戏一个根据颜色来选择对应文字的小游戏相关推荐

最新文章

热门文章

选文字游戏 一个根据颜色来选择对应文字的小游戏

选文字游戏 一个根据颜色来选择对应文字的小游戏相关推荐

最新文章

热门文章

选文字游戏一个根据颜色来选择对应文字的小游戏

选文字游戏一个根据颜色来选择对应文字的小游戏相关推荐