可视化制作立体键盘，盲打交互仅需十行表达式！

前端

2023-09-29 07:38:41

想象一下，只需拖动和放置组件，就能创建令人惊叹的交互式键盘，无需一行 CSS 代码。这听起来像个梦想，对吧？但是，有了众触应用平台，这梦想就变成了现实！

在本文中，我们将逐步指导您制作一个立体键盘，它的静态页面无需编写 CSS 代码，交互逻辑只用了十行表达式！准备好了吗？让我们开始吧！

制作静态页面

首先，在众触应用平台创建一个空白项目。然后，从左侧面板中拖动一个键盘组件到画布上。该组件已经预先设计好，具有逼真的三维效果。

接下来，自定义键盘的外观。你可以调整键帽的颜色、大小和形状。还可以添加背景图像或纹理，以创建独特的外观。

添加交互逻辑

键盘准备好后，是时候添加交互逻辑了。众触应用平台使用了一种基于表达式的简单而强大的语言。以下是盲打练习的完整逻辑，仅需十行表达式：


on start
    initVars()
    addHandlers()

sub initVars
    keys = 'qwertyuiop[]asdfghjkl;'
    buttons = foreach(keys, key) return stringSplit(key)

sub addHandlers
    for(key, button) in buttons
        button.addEventHandler('click', function
            playKey(key)
            countKey()
        )

sub countKey
    count = localStorage.getItem('count')
    if(count == null) count = 0
    count = int(count) + 1
    localStorage.setItem('count', count)

sub playKey
    audioPlayer = system.getAudioPlayer()
    sound = system.loadSound(format('/sounds/%s.mp3', key))
    audioPlayer.play(sound)

这些表达式创建了当用户点击键盘上的键时会播放相应声音的效果。它们还跟踪了按下的键数，并将其存储在本地存储中。