JavaScript原生小项目之架子鼓游戏

简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。

CSDN有教学视频……

虽然没有付费观看，但在这里首先还是要感谢视频制作者分享的GitHub源码，以及每个任务附带的项目说明。

顺便一提——github上还有很多人做完了项目，并整理了教程，感兴趣的小伙伴可以去搜搜

此系列文章主要学习搬运从零到壹全栈部落，原作者视频地址

B站无字幕英文视频 ……这个，emmm放上来卖萌的

这里，仅以此记录每天的任务挑战与成长。



第一天的练习是用JS制作一个爵士鼓的页面，通过敲击键盘上不同的字母，会发出不同的声音，并且页面上会伴随着敲击的动画。

效果图如下：



想要实现以上效果，大致思路和解决方案如下：

首先要说经典的事件三要素

事件源：要触发的对象——键盘

事件：如何触发对象——按下键盘或抬起键盘

事件处理程序：触发会发生什么——音乐响起、键盘绑定的块级元素响应淡入淡出动画效果

解决方案

检测到键盘上什么键被按下–监听·keydown·事件

在按键被按下的时候，播放音效–·audio.play()·

在按键被按下的同时，播放动画–·Element.classList.add(‘className’)·

在动画结束后，移除动画，不然之后再点击不会有任何效果–·Element.classList.remove(‘className’);

一些 ES6 语法

const ：声明一个只读的常量，标识符的值只能赋值一次。

模板字面量（Template literals）中用于表示模板字符串的标识。特点是字符串首尾用反引号（`）,具体请看MDN文档

示例：

var a = 1;
var b = 2;
//不用模板的写法
console.log("三是" + (a + b) + "不是" + (2 * a + b));
//"三是3不是4"

//使用模板字符串的写法
console.log(`三是${a + b}不是${2 * a + b}`);
//"三是3不是4"

forEach 与箭头函数

使用 document.querySelector 获取一组符合 CSS 选择符的元素快照，类型为 NodeList（此对象是对于文档的实时运行的动态查询），对其进行遍历时可采用 forEach 方法。

注意：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

// Code from http://es6-features.org/#StatementBodies // ES6    注意：箭头函数有两个方面的作用：更简短的函数并且不绑定this。
//             箭头函数=> 省略了function(e)传参
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
})

// ES5
nums.forEach(function (v) {
if (v % 5 === 0)
five.push(v);
})

页面布局基础

绑定键值与样式

data-

可以自定义标签属性

①

data-*

属性用于存储页面或应用程序的私有自定义数据。

②

data-*

属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

③ 属性名不应该包含任何大写字母，并且在前缀

data-

“之后必须有至少一个字符

④ 属性值可以是任意字符串

<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>

绑定键值与audio标签

<audio></audio>

HTML5标签，用于绑定多媒体文件

<audio data-key="65" src="sounds/clap.wav"></audio>

<kbd>

标签定义键盘文本

<kbd>

标签，它用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。

<kbd>

标签经常用在于计算机相关的文档和手册中。例如：

键入 quit 来退出程序，或者键入 menu 来返回主菜单。

js代码

function removeTransition(e) { //删除动画
// 通过判断公共属性propertyName等于其中的一个值（例如'transform'），等于该值就移除playing类，也即移除动画。
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing'); // e.target事件目标，删除动画显示样式类名
}

//键盘点击事件绑定
function playSound(e) {
//querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素。
//${e.keyCode},可以动态的将按键的Keycode传过去
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); //绑定音乐标签
const key = document.querySelector(`div[data-key="${e.keyCode}"]`); // 绑定Key
if (!audio) return; // 按键未绑定音乐则停止，不运行下面语句

key.classList.add('playing'); // 动画增加样式
audio.currentTime = 0; //每次触发事件，总是从第零秒开始播放
audio.play(); //播放音乐
}

//获取所有的按键，并创建为数组（只执行一次，设为常量，状态不可更改）
//querySelectorAll()返回文档所有匹配元素
const keys = Array.from(document.querySelectorAll('.key'));

//监听所有按键是否拥有transitionend过渡动画属性，一旦触发动画就运行removeTransition
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
//箭头函数=> 省略了function(e)传参

// 监听页面的keydown事件，触发playAudio函数。
window.addEventListener('keydown', playSound);