打砖块游戏
# 安装依赖
npm install
# 运行本地服务器
node server/bin/back.js
# 打包
npm start
- vue/vue-router
- axios
- express
- element-ui
- stylus
功能 | 分数 |
---|---|
Axios api | 3 |
Vue框架 | 5 |
express | 3 |
本地储存 | 3 |
响应式设计 | 2 |
restful api | 2 |
css预处理器 stylus | 3 |
- 多个关卡
- 排行榜
- 用户登录
- 本地储存用户积分
-
解决了Vue中兄弟组件之间的通信问题,
- 在子组件中通过this.$emit()触发父组件的方法,在父组件中通过this.$refs相应的调用兄弟子组件的方法实现数据的交换
-
解决了获取分数后分数存储的问题
- 主要代码如下(express框架)
app.get("/api/data",function (request,response) {
const change = parseInt(request.param('change'))
if (change === 1) {
const name = request.param('name')
if (name === '匿名') return
const score = request.param('score')
let newData = JSON.parse(data)
newData[name] = score
fs.writeFileSync(dataPath, JSON.stringify(newData)) // json文件的重写
} else {
response.send(data);
}
})
- 解决了跨域问题(webpack和express开启的服务器端口不同)
- 通过proxyTable代理转发
proxyTable: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
}
}
- 2个矩形的碰撞判断
function intersect(rect1, rect2) {
const half1Width = rect1.width / 2
const half1Height = rect1.height / 2
const half2Width = rect2.width / 2
const half2Height = rect2.height / 2
const cen1 = {
x: rect1.x + half1Width,
y: rect1.y + half1Height
}
const cen2 = {
x: rect2.x + half2Width,
y: rect2.y + half2Height
}
return Math.abs(cen2.x - cen1.x) <= half1Width + half2Width && Math.abs(cen2.y - cen1.y) <= half1Height + half2Height
}