主题:俄罗斯方块总结
自习内容:JavaScript、HTML、CSS、面向对象思想
热身小游戏:俄罗斯方块
学习周期:半个月
自身基础:JavaSE
我不喜欢写总结,我写总结不是出于师兄要求,当然师兄也是希望我写。只是我清楚的知道,总结至少有两个方面的好处:
1、 总结可以让你对学习的知识做一番梳理,甚至发现你学习过程中没注意的问题;
2、 上了大学基本不写文,文字能力相去甚远。
这段时间在师兄的指导下自学js、html、css一些前端的基础,前前后后用了十多天的时间,最后勉强完成了一个俄罗斯方块。
由于有了JavaSE及面向对象思想的一些基础,大致用了三天时间学习了html标记、css样式原理、js基本语法这三部分的知识,大部分是在W3School上学习的,W3School上不仅有教程可以学习,也可以作为手册来用。三天下来,大部分时间是在看,自己却很少动手,习惯上的惰性。此时的状态就是代码绝大部分都看的懂了,就是不会写。大致在这个时候,师兄来跟我要思路了,我还停留在理论的阶段,知识也零零碎碎,自然说不上什么思路,也无从下手。即使是师兄给了我一些他以往的总结,那也只能形成我大致的思路,而在实现方面,依然还是无从下手。
于是求助于网络,在网上找了一些俄罗斯方块的js代码,最终敲定了一个蓝本:120行的js代码,除了<head>部分的样式定义,其他的就是js了。虽然简陋,但是俄罗斯方块的核心都在里边。我首先要做的,就是理解这120行代码运行一个俄罗斯的机制。第一件事我就发现了代码的面向对象设计思想。
尽管Java跟JavaScript都有java,两者却是截然不同的语言。这个问题在学js的时候都会提到,JavaScript 是属于网络的脚本语言,而Java是sun公司开发的面向对象的高级语言。
接下来的工作就是在蓝本的基础上,写一个看起来不是那么简陋的、界面友好一些的、功能丰富一点的俄罗斯方块。而且,我感觉有必要调整一番,时间及进度都要重新把握。一开始我疏于自我管理,有些懒散,感觉不是在学习而是完成任务。
调整之后,对于实现也清晰了:
1) 设计一个俄罗斯方块对象模板Tetris:根据随机数生成不同的俄罗斯方块,模板的方法包括:方块平移、方块下移、方块旋转等;
2)设计一个游戏域对象模板Field:生成游戏面板,类的方法包括:边界检测、判断行满、消去一行、填充面板等;
3)方块共需要七块:直线、L、反L、Z、反Z、田、T,每种用一种颜色显示;
4) 分数统计:用一个全局变量score来保存分数,算法可自定义;
5)方向键的设置:up(keyCode 38)用于翻转、down(keyCode 40)用于下落一个单位、left(keyCode 37)用于左移一个单位、right(keyCode 39)用于右移一个单位。
6) 随机数生成函数调用:Math.floor(Math.random()*(shapes.length-0.00001))。
实现过程是集理论实践、编程、调试、游戏一身的过程。完成俄罗斯方块需要对样式、脚步编程有比较深入的理解,特别是样式中的定位、边缘设置、脚步编程中的类的设计、定时器的设置以及js与html的交互。样式的定位、布局可以让你在特定时刻将某个元素显示在特定位置,俄罗斯方块由四个方块组成,根据方块矩阵将四个方块显示在特定位置变成了俄罗斯方块,而游戏简单点说就是在特定时刻把具备特定行为的俄罗斯方块显示在面板的特定位置。编程是模仿基础上的创造,很多时候我们在模仿别人的代码的基础上创造自己的代码,这一阶段的学习很重要。我想说调试是最痛苦的一个环节,花时间最多也是在调试,一个问题好不容易解决了,新的问题又很唐突地出现,这个时候需要很大的细心跟耐心,但也需要适当的休息,一味苦干最终消磨的是意志跟热情。实现过程最幸福的要数调试时候的大战三百个回合了,这个时候要记得的是,游戏是为了发现问题,跟踪潜在的错误。
需要注意重视的问题:
1) js中变量的作用范围:全局变量、类变量、局部变量,另外js中如果赋值的变量还未进行过声明,该变量会自动声明。
2) 对于初学者,可以搜索js一些常用代码,对js的一些基本调用有个大致的了解。
3) js内建对象及自定义对象的id及class属性。
4) 自定义对象:如何创建自定义对象。
5) 调试工具:师兄推荐的套餐firefox+firebug,学会用调试工具测试代码。
6) 自我管理与时间观念。
最后的一些零碎:
1) 一个理所当然一厢情愿的想法往往导致思维盲区,要抛开这样的想法。
2) 错误往往发源于很不起眼的地方,要关注这些角落。
3) 苦苦追踪无果的时候,应该停下来休息,片刻的放松不只是心情的变化,思维也跟着活跃一些。
4) this.sh=shapes[random1]与this.sh=shapes[random1].split(","),只是因为少了split,深夜了都没发现,第二天才终于注意到。
5)实现代码贴在前端(分类),里边有详细的注释。
--2013.01.26