• js案例：选字游戏

    目录

    效果预览图

    游戏规则 

    整体思路 

    完整代码 

    html部分

    js部分

    效果预览图

    游戏规则 

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

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

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

    整体思路 

    1. 定义变量和数组：

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

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

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

    3. 打乱数组的顺序

    4. 设置处理点击事件：

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

    完整代码 

    html部分

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>文字游戏title>
    7.     <link rel="stylesheet" href="./css/style.css"> 
    8. head>
    9. <body>
    10.     <div class="rongqi">
    11.         <h3 class="r">剩余时间:<var>30var> Sh3> 
    12.         <h3 class="l">得分: <b>0b> h3> 
    13.         <div id="dwz">
    14.             
    15.         div>
    16.         <div id="xwz">
    17.             <span>span> 
    18.             <span>span>
    19.             <span>span>
    20.             <span>span>
    21.             <span>span>
    22.         div>
    23.     div>
    24. body>
    25. html>
    26. <script src="./js/wzyx.js">script>

    js部分

    1. // 定义选择器函数 $
    2. function $(ele) {
    3.   // 判断传入的参数是否为空字符串、undefined、或者是数字或对象
    4.   if (ele == '' || ele == undefined || typeof ele == "number" || typeof ele == "object") {
    5.     return; // 返回空值
    6.   }
    7.   // 获取传入参数的第一个字符
    8.   let first = ele.charAt();
    9.   if (first == '#') { // 如果第一个字符是 #
    10.     // 返回通过 id 获取的元素
    11.     return document.getElementById(ele.slice(1));
    12.   } else if (first == '.') { // 如果第一个字符是 .
    13.     // 返回通过 class 获取的元素集合
    14.     return document.getElementsByClassName(ele.slice(1));
    15.   } else {
    16.     // 返回通过标签名获取的元素集合
    17.     return document.getElementsByTagName(ele);
    18.   }
    19. }
    20.  
    21. // 剩余时间倒计时
    22. let num = 30; // 初始倒计时时间
    23. let n = null; // 用于存放计时器的标识
    24. let sum = 0; // 得分初始化为 0
    25. let timer;
    26.  
    27. n = setInterval(function() {
    28.   num--; // 每秒减少剩余时间
    29.   $('var')[0].innerHTML = num; // 更新倒计时显示
    30.  
    31.   if (num <= 0) { // 时间归零
    32.     clearInterval(n); // 清除计时器
    33.     // 弹出游戏结束的提示框，并显示得分
    34.     alert(`游戏结束，您的得分为${sum}分`);
    35.   }
    36. }, 1000);
    37.  
    38. // 声明颜色数组 cols，存放五种颜色
    39. let cols = ['red', 'yellow', 'blue', 'green', 'purple'];
    40. // 声明文字数组 wz，用于存放点击时的文字
    41. let wz = ['红', '黄', '蓝', '绿', '紫'];
    42.  
    43. // 打乱文字和颜色的数组，实现随机生成
    44. function dx() {
    45.   // 打乱文字数组
    46.   wz.sort(function() {
    47.     return Math.random() - 0.5;
    48.   });
    49.   // 打乱颜色数组
    50.   cols.sort(function() {
    51.     return Math.random() - 0.5;
    52.   });
    53.  
    54.   // 随机设置大字的颜色
    55.   let c = Math.floor(Math.random() * 5);
    56.   $('#dwz').style.color = cols[c];
    57.   console.log(cols[c]);
    58.  
    59.   // 随机设置小字的颜色和位置
    60.   for (let i = 0; i < wz.length; i++) {
    61.     $('span')[i].innerHTML = wz[i];
    62.     $('span')[i].style.color = cols[i];
    63.     $('#dwz').innerHTML = wz[i];
    64.   }
    65.  
    66.   let anc = '';
    67.   switch (cols[c]) {
    68.     case 'red':
    69.       anc = '红';
    70.       break;
    71.     case 'yellow':
    72.       anc = '黄';
    73.       break;
    74.     case 'blue':
    75.       anc = '蓝';
    76.       break;
    77.     case 'green':
    78.       anc = '绿';
    79.       break;
    80.     case 'purple':
    81.       anc = '紫';
    82.       break;
    83.     default:
    84.       break;
    85.   }
    86.  
    87.   // 设置小字的点击事件
    88.   for (let i = 0; i < wz.length; i++) {
    89.     $('span')[i].onclick = function() {
    90.       console.log(wz[i]);
    91.       if (wz[i] == anc) { // 如果点击的文字和大字的颜色相同
    92.         sum += 1; // 增加得分
    93.       }
    94.       dx(); // 重新生成新的文字和颜色
    95.     };
    96.   }
    97.   $('b')[0].innerHTML = sum; // 更新显示得分的元素
    98. }
    99.  
    100. dx(); // 开始游戏，调用 dx() 函数

  • 相关阅读:
    1.Kubeadm部署K8s集群
    Gradle复合构建
    Spark通过三种方式创建DataFrame
    类和对象12：容器方法
    面了个拿 30K 出来的测试，见识到了什么叫真正的测试天花板
    从理解js双重递归执行顺序到用递归方式实现二叉树中序遍历
    Excel表格密码保护解除
    程序员工作三年攒多少钱合适？
    Docker push的 http 413问题处理
    编写高性能C#代码 —— Span<T>
  • 原文地址：https://blog.csdn.net/qq_52799985/article/details/132713146