Question

Web应用程序

这是一个基于Angular 4的基于Web的查找地图游戏网站。它具有多种选择游戏模式，并基于选择模式运行，许多区域可以选择/选择，或者仅一个区域然后填充国家/地区名称即可进行查找每个周期。

正确的行为是什么

*所有数据均来自SVG文档

页面加载后-选择['New Game'，'Achievement'，'HighScore']的选项
选择游戏模式[“学习”，“经典”，“时间”]
选择区域（一个或多个），然后按Play玩游戏
显示SVG地图和名称以从SVG中随机查找国家/地区
单击一个国家/地区，然后，如果用户单击正确的国家/地区通知，则单击“正确”；否则，用户将单击“正确”（存在可以计算正确/错误点的逻辑）
移动下一个要查找的国家（然后重复步骤5）
结束比赛
它应能在所有主要浏览器（Chrome，Firefox，Safari，Edge，Internet Explorer）中正常工作

游戏模式

LearningMode =总是重复游戏
ClassicMode =仅运行一次并结束
TimeMode =有时间限制，否则游戏结束

这是处理点击事件的部分代码

public handleClickEvent(event: any): void {
  if (this.gameStarted && event.path && event.path.length > 0) {
    const country = event.path[0].id;
    if (
      country !== null &&
      country !== 'europeanMap' &&
      country !== 'image97'
    ) {
      this.runGameLogic(country);
    }
  }
}

游戏运行逻辑

// The user clicked on the map, so run game logic on that

  private runGameLogic(selectedCountryName: string): void {
    const index = this.selectedCountries.findIndex(country => {
      return country.name === this.countryToFind.name;
    });
    this.selectedCountries[index].selected = true;
    // Only run logic if the game has started, there is a valid countryName object, and that object is not equal to an empty string
    if (selectedCountryName && selectedCountryName !== '') {
      if (selectedCountryName === this.countryToFind.name) {
        this.correctAnswerLogic(index);
        this.selectedCountries[index].correct = true;
      } else {
        this.incorrectAnswerLogic(index, selectedCountryName);
      }
    }
  }

我需要弄清楚如何制作跨浏览器功能的应用程序，或者浏览器确实支持我的应用程序的可能解决方案。

感谢您的帮助：）

Answer 1

我找到了Firefox浏览器的解决方案。原因是Firefox没有ffmpeg.exe -y -i C:\Users\Andy\Desktop\entrada\intros/intro_720.mp4 -i C:\Users\Andy\Desktop\entrada\videoplayback.mp4 -i watermark.png -filter_complex [1:v]subtitles=tmp/Heartstrings_1.ass[v1];[v1][2]overlay=x=0:y=0[v1]; [0:v] [0:a] [v1] [1:a] concat=n=2:v=1:a=1 [v] [a]; [v]split=2[v720][v360];[v720]scale=1280:720[v720];[v360]scale=640:360[v360];[a]asplit=2[a1][a2] -map [v720] -map [a1] C:\Users\Andy\Desktop\salida/720_videoplayback.mp4 -map [v360] -map [a2] C:\Users\Andy\Desktop\salida/360_videoplayback.mp4属性，虽然我发现event.path可以运行所有主流浏览器，但没有触发event.composedPath()事件，但Mozilla Documentation中的Edge / IE除外。。这是在Firefox上可以正常运行的实际代码。

public handleClickEvent(event: any): void {
  const path = event.path || event.composedPath();
  if (this.gameStarted && path && path.length > 0) {
    const country = path[0].id;;
    if (
      // some conditions
    ) {
      // do something
    }
  }
}

我仍然需要在Edge / IE浏览器中解决。谢谢

为什么在Firefox，Safari和Internet Explorer中不支持点击处理程序事件SVG元素？

1 个答案: