摩斯电码翻译器

不掉马甲的NPC
300 阅读3分钟

我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：游戏创意投稿大赛

需求描述

国际摩尔斯密码定义一种标准编码方式，将每个字母对应于一个由一系列点和短线组成的字符串，  比如: "a" 对应 ".-", "b" 对应 "-...", "c" 对应 "-.-.", 等等。现在请你根据提供的摩尔斯密码实现一个翻译器，效果如下：

1.gif

下面的资料将为你提供帮助：

任务步骤

1. 技术栈选项

HTML5、CSS3、JavaScript

2. 翻译与加密

利用 JavaScript 实现摩斯码的翻译与加密工作。

  • 点击翻译按钮，可以把明文输入框中输入的内容翻译为摩尔斯密文
  • 点击点击解码按钮，可以把密文输入框中的摩尔斯码翻译为明文

3. 摩斯码播放

利用 JavaScript 操作 Audio 实现音频播放。

  • 点击播放按钮，在类名为 playlist 的 div 中，显示摩尔斯码，并且模仿摩尔斯电报音，摩尔斯高亮与音频同步，点播放短的音频，横线播放长音频

编码阶段

请根据提供的初始代码，index.html 初始代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摩尔斯码翻译器</title>
</head>

<body>
   <div class="panels">
        <div class="panel">
            <h3>Morse Code Translation</h3>
            <h1>摩尔斯码翻译器</h1>
            <textarea rows="4" placeholder="輸入英文" id="input">MorseCode</textarea>
            <div class="symbol">⇵</div>
            <textarea rows="4" placeholder="輸入密碼" id="output"></textarea>
            <div class="playlist"> </div>
            <div class="buttons">
                <button class="purple" id="btnMorse">翻译</button>
                <button class="yellow" id="btnEng">解密</button>
                <button class="white" id="btnPlay">播放</button>
            </div>
        </div>
        <div>
            <h3>翻译清单</h3>
            <hr />
            <ul class="morselist"></ul>
        </div>

        <script>
            //需要用到的摩尔斯加密列表
            var morseCode = "A;.-|B;-...|C;-.-.|D;-..|E;.|F;..-.|G;--.|H;....|I;..|J;.---|K;-.-|L;.-..|M;--|N;-.|O;---|P;.--.|Q;--.-|R;.-.|S;...|T;-|U;..-|V;...-|W;.--|X;-..-|Y;-.--|Z;--..|/;-..-.|1;.----|2;..---|3;...--|4;....-|5;.....|6;-....|7;--...|8;---..|9;----.|0;-----"
        </script>
</body>

</html>

进入到具体的编码后，首先要根据效果图完成 HTML+CSS 的布局，这一部分内容就不再赘述了。本文将重点解析 JavaScript 实现部分。

首先分析提供的摩尔斯码，可以发现其规律都是用 | 进行分割，可以通过数组 split() 方法进行分割，并与用户输入的内容进行匹配。

var morseCode = "A;.-|B;-...|C;-.-.|D;-..|E;.|F;..-.|G;--.|H;....|I;..|J;.---|K;-.-|L;.-..|M;--|N;-.|O;---|P;.--.|Q;--.-|R;.-.|S;...|T;-|U;..-|V;...-|W;.--|X;-..-|Y;-.--|Z;--..|/;-..-.|1;.----|2;..---|3;...--|4;....-|5;.....|6;-....|7;--...|8;---..|9;----.|0;-----"

实现思路如下：

let inputtxt = document.getElementById('input').value;
let arr = inputtxt.split('')
arr.forEach(element => {
    morseCodearr.forEach(code => {
        if (element == code.split(';')[0]) {
            morsePwd += code.split(';')[1] + ' '
        }
    })
});

摩尔斯码的加密与解密操作类似，不同点在于一个是通过提供的摩尔斯密码数组的字母/数字获取对应的编码，另一种是通过编码来获取对应的字母/数字。

在播放摩尔斯码的时候，可以使用 HTML5 提供的 <audio> 标签来实现音频的播放，其中点播放短的音频，横线播放长音频，也可以通过 JavaScript 直接创建音频对象，参考代码如下：

var short = new Audio("short.mp3");
short.play();

需要注意的是：在播放音频的时候可以把播放时间间隔 500ms 或自行调整合适的间隔时间。

点击这里获取完整代码。（对应的音频文件可以直接在仓库中获取）

avatar
文章
阅读
粉丝