js案例：选字游戏

小姚学前端

于 2023-09-07 22:24:50 发布

阅读量366

点赞数 4

分类专栏： js案例文章标签：游戏

本文链接：https://blog.csdn.net/qq_52799985/article/details/132713146

版权

js案例专栏收录该内容

8 篇文章 2 订阅

订阅专栏

效果预览图

游戏规则

1.游戏时间为30s，30s倒计时结束弹出游戏结束和对应的游戏分数。

2.根据中间大字的颜色，点击下面对应的文字。大字的颜色 == 点击的文字（列如：大字的文字是绿，颜色为黄色，则点击下面的小字黄得分加一，如果点击其他文字则不加分，即使其他文字的颜色是黄色）分数加一分。

3.点击错误不加分，也不减分。

整体思路

定义变量和数组：

创建一个变量并初始化为零，用于记录得分。
创建一个数组，包含游戏中可能出现的颜色名称。
创建一个数组，包含游戏中可能出现的文字。

创建一个函数dx()开始游戏：

在函数中，使用 setInterval 函数设置一个计时器，每秒减少剩余时间。
定义一个变量num并初始化为 30，用于倒计时。
在计时器的回调函数中，更新剩余时间并将其显示在页面上，如果剩余时间为零，清除计时器，结束游戏。。

打乱数组的顺序

设置处理点击事件：

在函数中，获取点击的元素的文字和颜色。
如果颜色与文字匹配，将得分变量加一，并更新页面上的得分显示。
否则，不得分。

完整代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字游戏</title>
    <link rel="stylesheet" href="./css/style.css"> <!-- 引用外部样式表文件 -->
</head>
<body>
    <div class="rongqi">
        <h3 class="r">剩余时间:<var>30</var> S</h3> <!-- 显示剩余时间的元素 -->
        <h3 class="l">得分: <b>0</b> </h3> <!-- 显示得分的元素 -->
        <div id="dwz">
            <!-- 待选文字的容器 -->
        </div>
        <div id="xwz">
            <span></span> <!-- 选中文字的容器 -->
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>
<script src="./js/wzyx.js"></script> <!-- 引用外部 JavaScript 文件实现游戏逻辑 -->

js部分

// 定义选择器函数 $
function $(ele) {
  // 判断传入的参数是否为空字符串、undefined、或者是数字或对象
  if (ele == '' || ele == undefined || typeof ele == "number" || typeof ele == "object") {
    return; // 返回空值
  }
  // 获取传入参数的第一个字符
  let first = ele.charAt();
  if (first == '#') { // 如果第一个字符是 #
    // 返回通过 id 获取的元素
    return document.getElementById(ele.slice(1));
  } else if (first == '.') { // 如果第一个字符是 .
    // 返回通过 class 获取的元素集合
    return document.getElementsByClassName(ele.slice(1));
  } else {
    // 返回通过标签名获取的元素集合
    return document.getElementsByTagName(ele);
  }
}

// 剩余时间倒计时
let num = 30; // 初始倒计时时间
let n = null; // 用于存放计时器的标识
let sum = 0; // 得分初始化为 0
let timer;

n = setInterval(function() {
  num--; // 每秒减少剩余时间
  $('var')[0].innerHTML = num; // 更新倒计时显示

  if (num <= 0) { // 时间归零
    clearInterval(n); // 清除计时器
    // 弹出游戏结束的提示框，并显示得分
    alert(`游戏结束，您的得分为${sum}分`);
  }
}, 1000);

// 声明颜色数组 cols，存放五种颜色
let cols = ['red', 'yellow', 'blue', 'green', 'purple'];
// 声明文字数组 wz，用于存放点击时的文字
let wz = ['红', '黄', '蓝', '绿', '紫'];

// 打乱文字和颜色的数组，实现随机生成
function dx() {
  // 打乱文字数组
  wz.sort(function() {
    return Math.random() - 0.5;
  });
  // 打乱颜色数组
  cols.sort(function() {
    return Math.random() - 0.5;
  });

  // 随机设置大字的颜色
  let c = Math.floor(Math.random() * 5);
  $('#dwz').style.color = cols[c];
  console.log(cols[c]);

  // 随机设置小字的颜色和位置
  for (let i = 0; i < wz.length; i++) {
    $('span')[i].innerHTML = wz[i];
    $('span')[i].style.color = cols[i];
    $('#dwz').innerHTML = wz[i];
  }

  let anc = '';
  switch (cols[c]) {
    case 'red':
      anc = '红';
      break;
    case 'yellow':
      anc = '黄';
      break;
    case 'blue':
      anc = '蓝';
      break;
    case 'green':
      anc = '绿';
      break;
    case 'purple':
      anc = '紫';
      break;
    default:
      break;
  }

  // 设置小字的点击事件
  for (let i = 0; i < wz.length; i++) {
    $('span')[i].onclick = function() {
      console.log(wz[i]);
      if (wz[i] == anc) { // 如果点击的文字和大字的颜色相同
        sum += 1; // 增加得分
      }
      dx(); // 重新生成新的文字和颜色
    };
  }
  $('b')[0].innerHTML = sum; // 更新显示得分的元素
}

dx(); // 开始游戏，调用 dx() 函数