HTML5Canvas打砖块小游戏
HTML5 写的打砖块小游戏源码,结构清晰,用的技术也挺实在。Canvas负责画图,JavaScript写逻辑,ES6语法加起来用着也舒服。
画面部分是用canvas
做的,像砖块、球、挡板,全靠代码一笔笔画出来。动画用requestAnimationFrame
,流畅度还不错,不掉帧。
事件监听这块,键盘控制挡板移动,按下左右键就能滑动。逻辑部分不复杂,适合入门练手。像addEventListener
、keydown
这些用法都能直接看到。
ES6 的写法也有,比如const
、箭头函数
这些,让代码更干净。你还可以看看怎么用模板字符串
动态展示分数,挺实用。
资源加载不是多,但如果你想加点音效或者图片,用fetch
或者XMLHttpRequest
都行。顺便还能练习下异步操作。
游戏整体就是一个典型的canvas + JS
组合项目,适合想搞懂小游戏怎么跑起来的人研究。如果你在学HTML5
或者想用canvas
做点交互的东西,可以把这个源码拆着玩一玩。
下载地址
用户评论