最近闲着没事嘛就想着自己动手搞个前端小游戏玩玩。以前看别人做过那种网页小游戏，感觉挺有意思的，这回我也来试试水。
准备工作
一开始啥也不懂，就到处找资料看。看半天，大概知道要做个啥样的，就先定个小目标，搞个最简单的，比方说，那种经典的方块移动消除游戏。
然后就是搭环境。也说不上搭环境，前端开发嘛浏览器就是现成的运行环境，编辑器的话，我平时用的是之前下载的一个挺普通的编辑器，感觉够用。
开始动手
先从最基本的页面结构开始。这块没啥难度，就是<body>里面套几个<div>，把页面分成几个区域，有的用来显示游戏画面，有的用来放操作按钮，再弄个地方显示得分啥的。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
我把页面大概分成左右两部分，左边放按钮，右边是游戏的主要区域。记得把每个盒子的内外边距都设置成0，这样看起来更舒服些：
{
margin: 0;
padding: 0;
接下来就是画游戏区域。我一开始想用canvas，后来发现，用div也能实现，就偷个懒，直接用div来画那些小方块。每个小方块就是一个div，设置好颜色和大小，然后通过控制它们的位置来显示或隐藏，就能做出那种方块移动和消除的效果。
让方块动起来
这部分是比较麻烦的。要控制方块的移动，还要判断什么时候该消除，什么时候游戏结束，这些逻辑都要写到JS代码里。我就边查资料边写，写一段就测试一下，看看效果对不对。
这里面用到定时器，每隔一段时间就让方块往下移动一格。然后还要监听键盘事件，当玩家按下方向键的时候，就改变方块的位置。这个过程挺考验耐心的，经常遇到各种小问题，改来改去，有时候改好这里，那里又出问题。
我还做一个计分的功能,每消除一行方块，就给玩家加点分。这个简单，就是操作一下DOM，把分数显示到页面上就行。
遇到的坑
- 刚开始的时候，方块移动老是出问题，一会儿快一会儿慢的，后来才发现是定时器没用对。
- 还有就是消除方块的逻辑，一开始写得不太有时候消不干净，有时候又多消，调试好久才搞定。
- 还有一个是键盘事件有的时候会失灵，按键没反应，让人非常郁闷。
最终效果
虽然过程挺曲折的，不过总算是做出一个能玩的小游戏。虽然画面比较简陋，功能也比较简单，但是毕竟是自己从零开始做出来的，还是挺有成就感的。以后有时间再慢慢完善，比如加个开始、暂停按钮，再美化一下界面啥的。
这回做小游戏的经历，让我对前端开发有更深的理解。以前觉得前端就是画画页面，现在才知道，里面的门道还挺多的。以后还要多学习，多实践，争取做出更有意思的东西。
