ethanlin-twer / frontend-nanodegree-arcade-game

http://linesh.tw/frontend-nanodegree-arcade-game

frontend-nanodegree-arcade-game

这是 Udacity 前端进阶纳米学位的第一个项目：Arcade Game。项目主要是用于训练学生编写面向对象的 JavaScript 代码的能力。本仓库加入了 ES6、自动化测试、CI/CD 流水线以支持任务分解、TDD、小步集成等敏捷实践；此外，我还对代码进行了刻意练习，并使用工具来记录刻意练习的时间并进行了分析提高，是为特色。

Installation 安装

首先请确保你本地安装了全局的 npm 或 yarn。如果没有，请参考下面章节进行安装。

正确安装完 npm/yarn 之后，请在项目的根目录下运行下面的命令以启动游戏：

npm install
npm run serve

Install NPM

• 通过安装包安装：进行 Node.js 的官网，下载最新版本的安装包，下载完成后双击安装
• 通过 nvm 安装：请参考 nvm 仓库 的文档，或参考 这篇文章

Install Yarn

npm install -g yarn

这需要你先安装一个全局的 npm。

Reference 参考资料

关于游戏的完成，以下博客记录了我的思考思路、分析方法、完成过程、刻意练习和优化过程。推荐一读：

• Classic Arcade Game 经典街机游戏克隆 第一弹 - 个人思路与完整实现
• Classic Arcade Game 经典街机游戏克隆 第二弹 - ES6 + TDD
• Classic Arcade Game 经典街机游戏克隆 第三弹 - 刻意练习三倍速

项目描述与需求文档：

• Game Rubric/Specification
• Startup Guide

Contribution 我想贡献代码

PR。并请确保新添加的代码有测试覆盖，并且通过了 Travis 的 lint 和测试。

Licenses 经营执照

MIT。

frontend-nanodegree-arcade-game's Issues

Submit the homework

1 on 1 scheduled: https://calendly.com/udacity-china/1-on-1/03-20-2017

Infra: Introduce Babel to support ES6 and beyond

• yad babel-core babel-preset-es2015 babel-preset-stage-0
• touch .babelrc with presets es2015 and stage-0

Code review

上次的 code review

• https://github.com/beautify-web/js-beautify
• https://gist.github.com/PurpleBooth/109311bb0361f32d87a2
• https://github.com/matiassingers/awesome-readme
• https://github.com/eslint/eslint
• http://ife.baidu.com/
• http://usejsdoc.org/about-getting-started.html
• https://review.udacity.com/#!/reviews/406997

自残

Read recommended es6 styleguide and eslint configurations:

• https://github.com/airbnb/javascript
• https://github.com/feross/standard
• https://github.com/feross/eslint-config-standard
• https://github.com/ouvens/es6-code-style-guide
• https://github.com/starriness/es6-coding-style

Infra: Introduce ESLint

• http://eslint.org/docs/user-guide/getting-started
• https://docs.travis-ci.com/user/languages/javascript-with-nodejs/
• existing eslint styleguide: https://github.com/linesh-simplicity/frontend-nanodegree-arcade-game/blob/master/.eslintrc.json

---

• npm install -g eslint
• yad eslint
• run eslint --init or copy existing eslint styleguide
• add eslint js/ test/ to npm scripts
• add npm run lint to .travis.yml but disable it for the moment
• enable eslint in IDE

Skeleton: Run the game in browser with transformed code

Error Handling: Enemies should be able to cross the screen

Sharing: Write a blog again

EthanLin-TWer/ethanlin-twer.github.io#141

Infra: Introduce browserify to transform import/export code in browser

• introduce browserify, babelify, watchify
• add npm build script: browserify js/*.js -o dist/bundle.js
• add npm buildDev script: watchify js/*.js -o dist/bundle.js -t babelify

code to copy:

• https://github.com/linesh-simplicity/peak-chrome-extension/blob/master/package.json
• https://github.com/linesh-simplicity/frontend-nanodegree-arcade-game/blob/master/package.json

Core Feature: Collision detection

Core Feature: Player should be able to move

work with es7 for babel:

• https://github.com/babel/babel-eslint
• http://eslint.org/docs/user-guide/configuring

Core Feature: Reset player when collision happens

Tasking

Error Handling: Player should not move out of the canvas

Core Feature: Enemy should be able to move

Create issues through ghi representing the tasking

Skeleton: Refactor game engine into ES6

• include 'dist/bundle.js' in index.html
• fix browser errors

Core Feature: Enemy speed should be configurable

Clone repo and opened with Intellij

Infra: Introduce Mocha/Chai/Sinon to support TDD

• yad mocha chai sinon

Infra: Create/Update project

Post Styleguide: Update README.md

Infra: Introduce npm/yarn

• npm init
• npm install -g yarn
• commit yarn.lock file
• run npm test in travis script section
• add node_modules to .gitignore file
• cache yarn in travis

Pitfall: use yarn to install dependencies every time after yarn.lock is introduced instead of using npm. Otherwise dependencies can't get resolved correctly by travis calling yarn

Infra: Git commit message check

• https://gist.github.com/pgilad/5d7e4db725a906bd7aa7
• https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks
• http://stackoverflow.com/questions/29568414/git-hook-commit-msg-to-ensure-the-commit-message-contains-a-string-that-conforms

---

• 必须有自己的名字
• 必须有 issue number（没需求就不做卡）
• 必须有 前缀（feature/refactor/fix/chore/style/docs）
• 前缀后面必须有冒号
• 冒号后面必须有一个空格
• 空格后面必须小写开头
• 必须不多于70个字符
• 详细的错误信息

后两个太难，暂时放弃了。

#!/bin/sh

commit_regex="\[Linesh\]\[#\d*\]\s\(Chore\|Feature\|Fix\|Docs\|Style\|Refactor\|Test\):\s[a-z]"
error_msg="Aborting commit, please double check your commit message."

if ! echo "$1" | grep -iqE "$commit_regex" ;
then
        echo "$error_msg" >&2
        exit 1
fi

Post Styleguide: Update to Udacity Styleguide

https://github.com/udacity/frontend-nanodegree-styleguide-zh/blob/master/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88%E7%BA%B3%E7%B1%B3%E5%AD%A6%E4%BD%8D%E6%A0%B7%E5%BC%8F%E6%8C%87%E5%8D%97%20-%20JavaScript.md

自己根据 ES6 Styleguide 进行了一些取舍：

• UTF-8。不知道如何使用 ESLint 验证
• 注释。我觉得注释蛮没有必要的，保留意见
• 分号。我觉得始终不采用分号
• 变量命令。完全遵循同意
• 字符串使用单引号。完全同意
• 尽量使用 const。 prefer-const
• 始终不使用 var。no-var
• http://eslint.org/docs/rules/quote-props.html

Infra: Create Travis pipeline

https://docs.travis-ci.com/user/languages/javascript-with-nodejs/

Infra: Run the first test

• yad babel-register for mocha to compile es6 tests
• create test directory and a sample test file
• import { expect } from 'chai'
• import { describe, it } from 'mocha'
• add npm test script: "test": "mocha test/ --recursive --compilers js:babel-core/register"

Post Styleguide: Code Refactor

Core Feature: Reset player when he/she wins the game

http://legacy.sinonjs.org/docs/