用JavaScript实现找不同小游戏

目录

倒计时的实现

找不同实现

对canvas的初始化

实现画布的分割,  父盒子>子盒子>canvas

找不同逻辑的判断

实现图片的导入

 DOM节点的监听

声明两个需要监听的节点 

 禁用页面点击事件的函数

DOM监听  

 实现勋章分数增加和生命的减少

 减命逻辑

死亡响应

websocket交互

定义给后端发送的数据包

断线重连

最后,调用封装好的websocket创建

---

初始之物，其行必丑
代码写的非常繁琐,有很多细节在复盘的时候也会想不起来为什么会这样写,今天算是梳理一遍所有的代码,时隔多日又写一篇还是很激动的

此小游戏由两位前端,和一位后端共同完成,我主要说明我写的部分(初学者，还是很水的）

完整源码:khatung/find difference - Gitee.com

效果实现图如下：

 

倒计时的实现

  setTimeout(function () {
      let fill = document.querySelector('.fill');,这个就是进度条盒子(div),减少div长度达到进度条递减的效果
      console.log(fill);

      document.querySelector('.overlay').style.display = 'none'

      //执行回调函数
      var timer = setInterval(function () {
        // 检测网络连接状态
        if (!navigator.onLine) {
          // clearInterval(timer); // 停止倒计时
          document.addEventListener('click', disableClickEvent, true);
          alertT.style.display = 'block';
        } else {
          alertT.style.display = 'none';
        }

        if (countdown == 0) {
          clearInterval(timer);
          // alert('加载完成');
          data.type = "endGame"
          data.data.time = 0
          // data.time = 0;
          ws.send(JSON.stringify(data))

          return;
        } else {
          countdown--; // 每秒减少计时器的值
          fill.style.width = (parseFloat(fill.style.width) - 1.2) + 'vw'; // 将宽度属性转换为数值类型并递减

          j.innerHTML = countdown + "s";
        }
      }, 1000);
    }, 0);


  };

找不同实现

对canvas的初始化

我最开始不相信这么麻烦，尝试了很多别的方法都失败了，最后还是用canvas画布实现吧

实现画布的分割,  父盒子>子盒子>canvas

function createCanvasPiece(img, containerId) {
  let container = document.getElementById(containerId);
  //创建一个父盒子
  let canvasPieceContainer = document.createElement('div');
  canvasPieceContainer.classList.add('canvasPiece');

  for (let row = 0; row < 6; row++) {
    for (let col = 0; col < 6; col++) {
      // 创建一个新的画布元素
      let canvas = document.createElement('canvas');
      let divBox = document.createElement('div'); // 创建 div 盒子
      divBox.className = `canvas_${row}_${col}`; // 设置盒子的类名

      // canvas.width = 80; // 设置画布宽度为100像素
      // canvas.height = 50; // 设置画布高度为100像素
      let ctx = canvas.getContext('2d'); // 获取画布的2D上下文

      // 在画布上绘制图像的一部分
      ctx.drawImage(
        img, // 图像对象
        col * img.width / 6, // 源图像的起始水平位置
        row * img.height / 6, // 源图像的起始垂直位置
        img.width / 6, // 源图像的宽度
        img.height / 6, // 源图像的高度
        0, // 目标图像的起始水平位置
        0, // 目标图像的起始垂直位置
        300, // 目标图像的宽度290
        150 // 目标图像的高度180
      );

      // 添加类名到画布容器元素

      // 将画布元素添加到画布容器元素
      divBox.appendChild(canvas);

      // 将画布容器元素添加到父容器中
      canvasPieceContainer.appendChild(divBox);
    }
  }
  container.appendChild(canvasPieceContainer);  // let huoq = document.querySelector('.canvasPiece');
}

找不同逻辑的判断

对所有子盒子取类名,根据类名来判断哪些是不同的盒子(一共八处不同,当然为了更加精确可以继续细分canvas)

//添加事件监听
//标记八个盒子，禁止重复生成
var boxCreated1 = false; // 用于标记盒子是否已经创建过
var boxCreated2 = false; // 用于标记盒子是否已经创建过
var boxCreated3 = false; // 用于标记盒子是否已经创建过
var boxCreated4 = false; // 用于标记盒子是否已经创建过
var boxCreated5 = false; // 用于标记盒子是否已经创建过
var boxCreated6 = false; // 用于标记盒子是否已经创建过
var boxCreated7 = false; // 用于标记盒子是否已经创建过
var boxCreated8 = false; // 用于标记盒子是否已经创建过

function ab() {
  let playerDiv = document.querySelector('.canvasPiece');

  console.log(playerDiv)
  //鼠标监听事件
  function handleClickone(event) {
    //获取到canvas
    let clickedElement = event.target;
    // console.log(clickedElement + "1111111111111111111");
    //获取到canvas的父级
    let divBox = clickedElement.parentNode;
    console.log(divBox.className)

    console.log(1111)
    // 检查是否为特定子盒子元素
    if (divBox.className == 'canva