[Canvas前端游戏开发]——FlappyBird详解 - WEB前端 - 伯乐在线
& [Canvas前端游戏开发]——FlappyBird详解
一直想自己做点小东西，直到最近看了本《》，才了解游戏开发中的一点点入门知识。
本篇就针对学习的几个样例，自己动手实践，做了个FlappyBird， ；也可以参考，里面有更多的游戏样例。
HTML5之Canvas
Canvas是Html5中用于绘图的元素，它可以绘制各种图形，比如长方形，多边形，圆形等等。如果想要了解Canvas的使用可以参考：
//如果想要使用canvas,首先需要获得上下文对象：
ctx = document.getElementById('canvas').getContext('2d');
//然后使用这个ctx绘制图形
//如果想要使用canvas,首先需要获得上下文对象：ctx = document.getElementById('canvas').getContext('2d');//然后使用这个ctx绘制图形
在cavas每个绘制都是独立的操作。比如下图的两个绘制图形，第二个会以覆盖的形式绘制，因此绘制图形的顺序就显得十分重要了。
canvas之drawImage()
本篇的游戏开发中，主要使用的是依据图片绘制的api:drawImage()，它有两个基本的使用方法：
ctx.drawImage(image,this.bx,this.by,this.bwidth,this.bheight);
ctx.drawImage(image,x,y,width,height,this.px,this.py,this.pwidth,this.pheight);
ctx.drawImage(image,this.bx,this.by,this.bwidth,this.bheight);ctx.drawImage(image,x,y,width,height,this.px,this.py,this.pwidth,this.pheight);
第一个api中，指定Image对象，然后给出绘制图片的x,y坐标以及宽度和高度即可。
第二个api中，第一组x,y,width,height则指定了裁剪图片的坐标尺寸，这在使用多元素的矢量图时很常用。比如：
上面的图片中为了减少图片资源的请求数量，把很多的元素放在了一个图片中，此时就需要通过裁剪的方式，获取指定的图片元素。
FlappyBird原理解析
其实这个游戏很简单，一张图就可以看懂其中的奥妙：
其中背景和地面是不动的。
小鸟只有上和下两个动作，可以通过控制小鸟的y坐标实现。
上下的管子只会向左移动，为了简单实现，游戏中一个画面仅仅会出现一对管子，这样当管子移出左边的背景框，就自动把管子放在最右边！
if(up_pipe.px+up_pipe.pwidth&0){
up_pipe.px -=
down_pipe.px -=
up_pipe.px = 400;
down_pipe.px = 400;
up_pipe.pheight = 100+Math.random()*200;
down_pipe.py = up_pipe.pheight+pipe_
down_pipe.pheight = 600-down_pipe.
1234567891011
if(up_pipe.px+up_pipe.pwidth&0){&&&&&&&&&&&&&&&&up_pipe.px -= velocity;&&&&&&&&&&&&&&&&down_pipe.px -= velocity;&&&&&&&&&&&&}else{&&&&&&&&&&&&&&&&up_pipe.px = 400;&&&&&&&&&&&&&&&&down_pipe.px = 400;&&&&&&&&&&&&&&&&up_pipe.pheight = 100+Math.random()*200;&&&&&&&&&&&&&&&&down_pipe.py = up_pipe.pheight+pipe_height;&&&&&&&&&&&&&&&&down_pipe.pheight = 600-down_pipe.py;&&&&&&&&&&&&&&&&isScore = true;&&&&&&&&&&&&}
很简单吧！
由于该游戏一共就这几个元素，因此把他们都放入一个Objects数组中，通过setInteral()方法，在一定间隔时间内，执行一次重绘。
重绘的时候会先清除画面中的所有元素，然后按照新的元素的坐标一次绘制图形，这样就会出现移动的效果。
模拟小鸟重力
由于这个游戏不涉及小鸟横向的运动，因此只要模拟出小鸟下落的动作以及上升的动作就可以了。
上升：这个很简单，只要把小鸟的y坐标减去一定的值就可以了
下落：其实重力不需要使用gt^2来模拟，可以简单的指定两个变量，v1和gravity，这两个变量与setInterval()中的时间共同作用，就能模拟重力。
ver2 = ver1+
bird.by += (ver2+ver1)*0.5;
ver2 = ver1+gravity;bird.by += (ver2+ver1)*0.5;
游戏中小鸟碰到管子或者地面都会算游戏结束：
其中条件1上管道的检测为：
((bird.bx+bird.bwidth&up_pipe.px)&&(bird.by&up_pipe.py)&&(bird.bx+bird.bwidth&up_pipe.px+up_pipe.pwidth)&&(bird.by&up_pipe.py+up_pipe.pheight))||
((bird.bx+bird.bwidth&up_pipe.px)&&(bird.by&up_pipe.py)&&(bird.bx+bird.bwidth&up_pipe.px+up_pipe.pwidth)&&(bird.by&up_pipe.py+up_pipe.pheight))
((bird.bx+bird.bwidth&up_pipe.px)&&(bird.by&up_pipe.py)&&(bird.bx+bird.bwidth&up_pipe.px+up_pipe.pwidth)&&(bird.by&up_pipe.py+up_pipe.pheight))||((bird.bx+bird.bwidth&up_pipe.px)&&(bird.by&up_pipe.py)&&(bird.bx+bird.bwidth&up_pipe.px+up_pipe.pwidth)&&(bird.by&up_pipe.py+up_pipe.pheight))
条件2下管道的检测为：
((bird.bx&down_pipe.px)&&(bird.by&down_pipe.py)&&(bird.bx&down_pipe.px+down_pipe.pwidth)&&(bird.by&down_pipe.py+down_pipe.pheight))||
((bird.bx&down_pipe.px)&&(bird.by+bird.bheight&down_pipe.py)&&(bird.bx&down_pipe.px+down_pipe.pwidth)&&(bird.by+bird.bheight&down_pipe.py+down_pipe.pheight))
((bird.bx&down_pipe.px)&&(bird.by&down_pipe.py)&&(bird.bx&down_pipe.px+down_pipe.pwidth)&&(bird.by&down_pipe.py+down_pipe.pheight))||((bird.bx&down_pipe.px)&&(bird.by+bird.bheight&down_pipe.py)&&(bird.bx&down_pipe.px+down_pipe.pwidth)&&(bird.by+bird.bheight&down_pipe.py+down_pipe.pheight))
条件3地面的检测最简单，为：
bird.by+bird.bheight&ground.bgy
bird.by+bird.bheight&ground.bgy
如果满足这三个条件，就算游戏结束，会清除循环以及提示游戏结束信息。
分数的计算与碰撞检测类似，设置一个开关，当管子重新出现时，设置为true。当分值加1时，设置为false。
小鸟的最左边的x坐标如果超出了管子的x+width，就认为成功通过。
if(isScore && bird.bx&up_pipe.px+up_pipe.pwidth){
score += 1;
if(score&0 && score%10 === 0){
velocity++;
if(isScore && bird.bx&up_pipe.px+up_pipe.pwidth){&&&&&&&&&&&&&&&&score += 1;&&&&&&&&&&&&&&&&isScore = false;&&&&&&&&&&&&&&&&if(score&0 && score%10 === 0){&&&&&&&&&&&&&&&&&&&&velocity++;&&&&&&&&&&&&&&&&}&&&&&&&&&&&&}
通过后，分值加1，速度+1。
&!DOCTYPE html&
&title&Flappy Bird&/title&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&script type="text/javascript"&
// Edit by xingoo
// Fork on my github:/xinghalo/CodeJS/tree/master/HTML5
var cwidth = 400;
var cheight = 600;
var objects = [];
var birdIndex = 0;
var ver1 = 10;
var gravity = 2;
var pipe_height = 200;
var velocity = 10;
var score = 0;
var isScore =
var birds = ["./images/0.gif","./images/1.gif","./images/2.gif"];
var back = new Background(0,0,400,600,"./images/bg.png");
var up_pipe = new UpPipe(0,0,100,200,"./images/pipe.png");
var down_pipe = new DownPipe(0,400,100,200,"./images/pipe.png");
var ground = new Background(0,550,400,200,"./images/ground.png");
var bird = new Bird(80,300,40,40,birds);
objects.push(back);
objects.push(up_pipe);
objects.push(down_pipe);
objects.push(ground);
objects.push(bird);
function UpPipe(x,y,width,height,img_src){
this.pwidth =
this.pheight =
this.img_src = img_
this.draw = drawUpP
function DownPipe(x,y,width,height,img_src){
this.pwidth =
this.pheight =
this.img_src = img_
this.draw = drawDownP
function drawUpPipe(){
var image = new Image();
image.src = this.img_
ctx.drawImage(image,150,500,150,800,this.px,this.py,this.pwidth,this.pheight);
function drawDownPipe(){
var image = new Image();
image.src = this.img_
ctx.drawImage(image,0,500,150,500,this.px,this.py,this.pwidth,this.pheight);
function Background(x,y,width,height,img_src){
this.bgx =
this.bgy =
this.bgwidth =
this.bgheight =
var image = new Image();
image.src = img_
this.img =
this.draw =
function drawbg(){
ctx.drawImage(this.img,this.bgx,this.bgy,this.bgwidth,this.bgheight);
function Bird(x,y,width,height,img_srcs){
this.bwidth =
this.bheight =
this.imgs = img_
this.draw =
function drawbird(){
birdIndex++;
var image = new Image();
image.src = this.imgs[birdIndex%3];
ctx.drawImage(image,this.bx,this.by,this.bwidth,this.bheight);
function calculator(){
if(bird.by+bird.bheight&ground.bgy ||
((bird.bx+bird.bwidth&up_pipe.px)&&(bird.by&up_pipe.py)&&(bird.bx+bird.bwidth&up_pipe.px+up_pipe.pwidth)&&(
bird.by&up_pipe.py+up_pipe.pheight))||
((bird.bx+bird.bwidth&up_pipe.px)&&(bird.by&up_pipe.py)&&(bird.bx+bird.bwidth&up_pipe.px+up_pipe.pwidth)&&(
bird.by&up_pipe.py+up_pipe.pheight))||
((bird.bx&down_pipe.px)&&(bird.by&down_pipe.py)&&(bird.bx&down_pipe.px+down_pipe.pwidth)&&(bird.by&down_pipe.py+down_pipe.pheight))||
((bird.bx&down_pipe.px)&&(bird.by+bird.bheight&down_pipe.py)&&(bird.bx&down_pipe.px+down_pipe.pwidth)&&(bird.by+bird.bheight&down_pipe.py+down_pipe.pheight))){
clearInterval(tid);
ctx.fillStyle = "rgb(255,255,255)";
ctx.font = "30px Accent";
ctx.fillText("You got "+score+"!",110,100)
ver2 = ver1+
bird.by += (ver2+ver1)*0.5;
if(up_pipe.px+up_pipe.pwidth&0){
up_pipe.px -=
down_pipe.px -=
up_pipe.px = 400;
down_pipe.px = 400;
up_pipe.pheight = 100+Math.random()*200;
down_pipe.py = up_pipe.pheight+pipe_
down_pipe.pheight = 600-down_pipe.
if(isScore && bird.bx&up_pipe.px+up_pipe.pwidth){
score += 1;
if(score&0 && score%10 === 0){
velocity++;
ctx.fillStyle = "rgb(255,255,255)";
ctx.font = "30px Accent";
if(score&0){
score%10!==0?ctx.fillText(score,180,100):ctx.fillText("Great!"+score,120,100);
function drawall(){
ctx.clearRect(0,0,cwidth,cheight);
for(i=0;i&objects.i++){
objects[i].draw();
calculator();
function keyup(e){
var e = e||
var currKey = e.keyCode||e.which||e.charC
switch (currKey){
bird.by -= 80;
function init(){
ctx = document.getElementById('canvas').getContext('2d');
document.onkeyup =
drawall();
tid = setInterval(drawall,80);
&body onLoad="init();"&
&canvas id="canvas" width="400" height="600" style="margin-left:200"&
Your browser is not support canvas!
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
&!DOCTYPE html&&html&&head&&&&&&title&Flappy Bird&/title&&&&&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&&&&&script type="text/javascript"&&&&&&&&&// Edit by xingoo&&&&&&&&// Fork on my github:/xinghalo/CodeJS/tree/master/HTML5&&&&&&&&var ctx;&&&&&&&&var cwidth = 400;&&&&&&&&var cheight = 600;&&&&&&&&var objects = [];&&&&&&&&var birdIndex = 0;&&&&&&&&var ver1 = 10;&&&&&&&&var ver2;&&&&&&&&var gravity = 2;&&&&&&&&var pipe_height = 200;&&&&&&&&var velocity = 10;&&&&&&&&var tid;&&&&&&&&var score = 0;&&&&&&&&var isScore = false;&&&&&&&&var birds = ["./images/0.gif","./images/1.gif","./images/2.gif"];&&&&&&&&var back = new Background(0,0,400,600,"./images/bg.png");&&&&&&&&var up_pipe = new UpPipe(0,0,100,200,"./images/pipe.png");&&&&&&&&var down_pipe = new DownPipe(0,400,100,200,"./images/pipe.png");&&&&&&&&var ground = new Background(0,550,400,200,"./images/ground.png");&&&&&&&&var bird = new Bird(80,300,40,40,birds);&&&&&&&&objects.push(back);&&&&&&&&objects.push(up_pipe);&&&&&&&&objects.push(down_pipe);&&&&&&&&objects.push(ground);&&&&&&&&objects.push(bird);&&&&&&&&function UpPipe(x,y,width,height,img_src){&&&&&&&&&&&&this.px = x;&&&&&&&&&&&&this.py = y;&&&&&&&&&&&&this.pwidth = width;&&&&&&&&&&&&this.pheight = height;&&&&&&&&&&&&this.img_src = img_src;&&&&&&&&&&&&this.draw = drawUpPipe;&&&&&&&&}&&&&&&&&function DownPipe(x,y,width,height,img_src){&&&&&&&&&&&&this.px = x;&&&&&&&&&&&&this.py = y;&&&&&&&&&&&&this.pwidth = width;&&&&&&&&&&&&this.pheight = height;&&&&&&&&&&&&this.img_src = img_src;&&&&&&&&&&&&this.draw = drawDownPipe;&&&&&&&&}&&&&&&&&function drawUpPipe(){&&&&&&&&&&&&var image = new Image();&&&&&&&&&&&&image.src = this.img_src;&&&&&&&&&&&&ctx.drawImage(image,150,500,150,800,this.px,this.py,this.pwidth,this.pheight);&&&&&&&&}&&&&&&&&function drawDownPipe(){&&&&&&&&&&&&var image = new Image();&&&&&&&&&&&&image.src = this.img_src;&&&&&&&&&&&&ctx.drawImage(image,0,500,150,500,this.px,this.py,this.pwidth,this.pheight);&&&&&&&&}&&&&&&&&function Background(x,y,width,height,img_src){&&&&&&&&&&&&this.bgx = x;&&&&&&&&&&&&this.bgy = y;&&&&&&&&&&&&this.bgwidth = width;&&&&&&&&&&&&this.bgheight = height;&&&&&&&&&&&&var image = new Image();&&&&&&&&&&&&image.src = img_src;&&&&&&&&&&&&this.img = image;&&&&&&&&&&&&this.draw = drawbg;&&&&&&&&}&&&&&&&&function drawbg(){&&&&&&&&&&&&ctx.drawImage(this.img,this.bgx,this.bgy,this.bgwidth,this.bgheight);&&&&&&&&}&&&&&&&&function Bird(x,y,width,height,img_srcs){&&&&&&&&&&&&this.bx = x;&&&&&&&&&&&&this.by = y;&&&&&&&&&&&&this.bwidth = width;&&&&&&&&&&&&this.bheight = height;&&&&&&&&&&&&this.imgs = img_srcs;&&&&&&&&&&&&this.draw = drawbird;&&&&&&&&}&&&&&&&&function drawbird(){&&&&&&&&&&&&birdIndex++;&&&&&&&&&&&&var image = new Image();&&&&&&&&&&&&image.src = this.imgs[birdIndex%3];&&&&&&&&&&&&ctx.drawImage(image,this.bx,this.by,this.bwidth,this.bheight);&&&&&&&&}&&&&&&&&function calculator(){&&&&&&&&&&&&if(bird.by+bird.bheight&ground.bgy ||&&&&&&&&&&&&&&&&((bird.bx+bird.bwidth&up_pipe.px)&&(bird.by&up_pipe.py)&&(bird.bx+bird.bwidth&up_pipe.px+up_pipe.pwidth)&&(&&&&bird.by&up_pipe.py+up_pipe.pheight))||&&&&&&&&&&&&&&&&((bird.bx+bird.bwidth&up_pipe.px)&&(bird.by&up_pipe.py)&&(bird.bx+bird.bwidth&up_pipe.px+up_pipe.pwidth)&&(&&&&bird.by&up_pipe.py+up_pipe.pheight))||&&&&&&&&&&&&&&&&((bird.bx&down_pipe.px)&&(bird.by&down_pipe.py)&&(bird.bx&down_pipe.px+down_pipe.pwidth)&&(bird.by&down_pipe.py+down_pipe.pheight))||&&&&&&&&&&&&&&&&((bird.bx&down_pipe.px)&&(bird.by+bird.bheight&down_pipe.py)&&(bird.bx&down_pipe.px+down_pipe.pwidth)&&(bird.by+bird.bheight&down_pipe.py+down_pipe.pheight))){&&&&&&&&&&&&&&&&clearInterval(tid);&&&&&&&&&&&&&&&&ctx.fillStyle = "rgb(255,255,255)";&&&&&&&&&&&&&&&&ctx.font = "30px Accent";&&&&&&&&&&&&&&&&ctx.fillText("You got "+score+"!",110,100)&&&&&&&&&&&&&&&&return;&&&&&&&&&&&&}&&&&&&&&&&&&ver2 = ver1+gravity;&&&&&&&&&&&&bird.by += (ver2+ver1)*0.5;&&&&&&&&&&&&if(up_pipe.px+up_pipe.pwidth&0){&&&&&&&&&&&&&&&&up_pipe.px -= velocity;&&&&&&&&&&&&&&&&down_pipe.px -= velocity;&&&&&&&&&&&&}else{&&&&&&&&&&&&&&&&up_pipe.px = 400;&&&&&&&&&&&&&&&&down_pipe.px = 400;&&&&&&&&&&&&&&&&up_pipe.pheight = 100+Math.random()*200;&&&&&&&&&&&&&&&&down_pipe.py = up_pipe.pheight+pipe_height;&&&&&&&&&&&&&&&&down_pipe.pheight = 600-down_pipe.py;&&&&&&&&&&&&&&&&isScore = true;&&&&&&&&&&&&}&&&&&&&&&&&&if(isScore && bird.bx&up_pipe.px+up_pipe.pwidth){&&&&&&&&&&&&&&&&score += 1;&&&&&&&&&&&&&&&&isScore = false;&&&&&&&&&&&&&&&&if(score&0 && score%10 === 0){&&&&&&&&&&&&&&&&&&&&velocity++;&&&&&&&&&&&&&&&&}&&&&&&&&&&&&}&&&&&&&&&&&&ctx.fillStyle = "rgb(255,255,255)";&&&&&&&&&&&&ctx.font = "30px Accent";&&&&&&&&&&&&if(score&0){&&&&&&&&&&&&&&&&score%10!==0?ctx.fillText(score,180,100):ctx.fillText("Great!"+score,120,100);&&&&&&&&&&&&}&&&&&&&&}&&&&&&&&function drawall(){&&&&&&&&&&&&ctx.clearRect(0,0,cwidth,cheight);&&&&&&&&&&&&var i;&&&&&&&&&&&&for(i=0;i&objects.length;i++){&&&&&&&&&&&&&&&&objects[i].draw();&&&&&&&&&&&&}&&&&&&&&&&&&calculator();&&&&&&&&}&&&&&&&&function keyup(e){&&&&&&&&&&&&var e = e||event;&&&&&&&&&&&&&& var currKey = e.keyCode||e.which||e.charCode;&&&&&&&&&&&&&& switch (currKey){&&&&&&&&&&&&&&&&case 32:&&&&&&&&&&&&&&&&&&&&bird.by -= 80;&&&&&&&&&&&&&&&&&&&&break;&&&&&&&&&&&&}&&&&&&&&}&&&&&&&&&&&&function init(){&&&&&&&&&&&&ctx = document.getElementById('canvas').getContext('2d');&&&&&&&&&&&&document.onkeyup = keyup;&&&&&&&&&&&&drawall();&&&&&&&&&&&&tid = setInterval(drawall,80);&&&&&&&&}&&&&&/script&&/head&&body onLoad="init();"&&canvas id="canvas" width="400" height="600" style="margin-left:200"&&&&&Your browser is not support canvas! &/canvas&&/body&&/html&
在学习游戏开发的时候，我突然怀念起大学的物理。当时很纳闷，学计算机学什么物理，后来再接触游戏开发才知道，没有一定的物理知识，根本无法模拟游戏中的各个场景。
而通过这个简单的小游戏，也捡起来了很多旧知识。
【2】：《》
【3】：EdisonChou的
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线文章开头，请允许我随便扯扯。
一来，开头从来都是最难写的，二来，描述我现在的心情和状态以及工作背景啥的，对于大家理解后面的内容也许会有所帮助~
大学毕业，工作4年了，一直都是做游戏前端开发。从03年PC网游《传奇》，到11、12年的web页游《神仙道》的火爆，再到13年的《MT》等手游的崛起，我见证了中国游戏行业的3个重要发展阶段，现在又来到一个新的阶段&&h5游戏。
这样看来，我是幸运的，作为一个玩家；但从一个游戏开发者的角度，显然，我对这几年的工作经历，并不满意。因为我对游戏真正的热爱，只在玩的时候；而做游戏，只是一种谋生的手段罢了。
【我对游戏的热爱，是深入骨髓的】
1990年，我出生在一个普通的工薪家庭，爸爸是公务员，妈妈是造纸厂销售。这样的家境，虽然不算光鲜，但也能在当地的小镇上过的很好了。
记得有一张我2岁时候的照片，大夏天，光溜溜的屁股就那样坐在客厅的地上，一双小手就在那一堆麻将里翻来覆去。我妈说是胎教，自我打小就是一边抱着我一边打牌，一直到现在，我对麻将，也有种说不出的亲切感:D
如果麻将能算做一种游戏的话，那它可以说就是我的启蒙游戏了。
再大一点，上小学的时候，掌机开始流行，我开始接触俄罗斯方块。院子里的小伙伴一人一盘，看谁分数最高，哄哄~那个时代就有竞技游戏了。
掌机之外，小镇还有一家临街的&大游戏机厅&，和若干家非法的&大游戏机厅&，至于为啥叫&大游戏机厅&，当时想着，也许是因为那里的游戏机确实又大又沉的缘故罢！现在大家都知道，是街机，不过为啥叫街机，也不甚明了，难道就因为游戏机厅在街面上？
回忆起街机，不得不说有很多遗憾，因为那个时候社会的共识是：游戏厅是地痞流氓去的地方，乱得很。加上我从小就是听话的小孩，以至于直到初中，我才开始接触到街机，拳皇97、恐龙快打的技术，已经被同龄人甩好几条街了。
【原谅我这人喜欢怀旧，过去美好的事物总能够在某种程度上能治愈现实中的不如意，而且回忆过去的成长历程，也让我逐渐理解为什么我会成为今天的我。我特羡慕这样的人：在生命弥留之际，回忆这一生，有那么几件让我心潮澎湃，满满幸福感的事情，如此足矣！】
街机不能玩，掌机太单一，这时候，小霸王的流行就顺理成章了。
&小霸王其乐无穷啊！&现在想想，多么振奋人心的一句话。一台机器或者说游戏平台，配上无数的游戏卡带，就是一片浩瀚的游戏世界！魂斗罗、超级玛丽、双截棍、街霸、热血系列...无数经典的游戏涌现，
任天堂（Nintendo）、小霸王、红白机、FC（FamilyComputer）游戏、小游戏机，这些名词，创造出了那个时代我心中最亮的色彩！
【而正在此时，杨致远和大卫.费罗成立Yahoo，开创了互联网的新时代！】
【这种时间线上的横向对比，感觉还是蛮有意思的。比如，《盛大传奇》火的那会，还是初中生的我们在网吧用win95的操作系统、双飞燕鼠标打CS1.5、玩星际、传奇；而地球另一端，马克.扎克伯格已经在哈佛校园里上线facebook的雏形，玩起了对全校女孩图片的选美】
对游戏世界的追寻热度在我上初中的时候达到了极致，父母离异，我寄宿在姑姑家，常常早上5点多就起来了，然后偷偷溜进学校旁边的&小龙女&网吧玩上1个小时。
在游戏的虚拟世界中，能得到现实中无法得到的满足感！游戏，是人类的第二世界！
多年以后，在央视的纪录片《游戏.人生》中，也提到了这一点。很欣慰，在无数游戏玩家前赴后继地追寻自己的游戏梦之后，日,国家体育总局正式批准,将电子竞技列为第99个正式体育竞赛项。2011年被国家体育总局将电子竞技改批为第78个正式体育竞赛项。
游戏俱乐部、职业化、游戏视频直播平台、游戏主播、以及各类的全球性赛事的风靡，游戏第一次受到了社会的如此礼遇和认可！
高中三年对于我来说是叛逆的三年，高一谈恋爱、打游戏，成绩倒数；高二的一天爷爷去世，而接到噩耗的时候，我还在网吧打cs，悲伤痛苦过后，开始反思，慢慢成长，高二下学期开始奋力追赶；高三，全力冲刺的一年，高考超水平发挥，无奈落下的功课太多，饮恨高三，于是有了最黑暗也是最光明的高四，黑暗是从宿舍到教室的路通常是黑的，光明是在教室里的白炽灯从来都是敞亮在那里...
高中生涯结束，结果不算差，事实上，结果其实还不错。
初恋、组队得过一次网吧cs比赛亚军、发展打篮球的爱好、体会到从失败到成功的艰难经历！
不得不说，高四是我长这么大最最充实的一年，总结下来：目标明确，计划得当，实行坚决！
我想，这段经历不管在我未来人生中的任何阶段，都将是重要的参考和引导。
时间来到大学，机缘巧合或者说攒足人品才来到这所大学的我，对这段经历的记忆却是最模糊的。
大学四年，没有目标，做了很多事情，谈恋爱、学生会、篮球、上课、然后就是玩游戏了。大一不让带电脑的时候，去网吧玩；后来有了电脑，就长期宅在宿舍玩。
一天又一天，时间就这样在指尖流逝着，没有目的的，只是被动的等待着大学生涯的结束，这也许是我这辈子最遗憾的事。
想做的事情太多，而丧失目标。英语、篮球、学业、恋爱、学生会、游戏，每一样都没有真正用心去热爱去努力争取，大学那几年看似忙忙碌碌，实则迷茫失落。
【一直到现在，我都无法摆脱完美主义的枷锁，想要的太多，往往结果是啥也做不好，也许这是大学生涯和工作这几年学到的最最重要的事情！】
如果非要列出大学期间的收获：
1、篮球赛冠军：学院大一&新生杯&的篮球赛冠军算一个，我是一个喜欢teamwork的人，在比赛中，虽然没有太多机会拿球得分，但在防守端起到的作用也不容小觑~
2、学生会部长：学生会的组织部部长算一个，我依然记得作为大一新生参加招新的时候，时任部长的问题，&你为什么要来组织部？&。怎么回答的我已不记得，但是两年的学生会经历，我可以自豪的说，西区各大宿舍楼下都有我贴的通知！还有，大四老生的宿舍有多脏，我都不想说！如果你要问我女生宿舍进去过没，这个还真没有。。。
3、心理学启蒙：从小是三号学生（听话的孩子），后来慢慢开始喜欢思考，却总也想不明白，为什么父母要离婚？为什么我喜欢的人不喜欢我？为什么很多事情，黑的，可以被说成白的？大二那会，失恋，大学同学石总推荐给我一本《少有人走的路》。我立马被吸引住了，生活中无数的没有想清楚的问题，在那本短短200多页的书中，有了答案！我的恋爱观、婚姻观、幸福观等都很大程度上受到这本书的影响。后来，又看过《遇见未知的自己》、《卡耐基人性的弱点》等等，哲学的发明源于人类对世界的无知，在科学如此发达的今天，仍有许多无法解释无法理解的事情，比如：我们是谁？从哪里来？要到哪里去？基督教、佛教等各大教派对世界的解释都是哲学的范畴，各类不同的信仰和对世界的理解也早就了人类多样的生活态度！
4、认识一群有梦想的年轻人和老师
5、学会了5v5类的竞技游戏：《群雄逐鹿》是我接触的第一款moba（Multiplayer Online Battle Arena，译为多人在线战术竞技游戏）类的游戏，大学期间，看着同学都在打dota，却觉得太复杂，不感兴趣，好在玩了这个游戏，大四实习期间立马上手Dota，刚刚的！
游戏？&&没有刻意训练的玩游戏都是浪费时间！比如打Dota，每把都选同一个英雄，使用同一套出装，10盘可以，100盘也行，要是500盘都这样，且不说自己打的没劲，队友对面的人也觉得无聊了。。。
跑题了...基本上把我这短短20多年的重大事件都聊了一遍:D
【总结下来就是】
　　1、喜欢玩游戏，不喜欢做游戏；
　　2、游戏行业4年，现在打算转行做web前端。
华丽丽的分割线
最后再贴下之前看过的一篇文章关于半路出家的讨论，跟我一样的童鞋可以参考下~
【半路出家的危与机】
　　然而，不管怎样，信心的树立不是一蹴而就的，对于转行做前端的人来说更是如此。俗话说，隔行入隔山。每个行业自有其道，自然不是想做就做。前端技术领域半路出家者非常多，我们来分析一下转行的心理。第一，看到前端技术入门简单、互联网对前端技术的需求缺口巨大；第二，前端技术所见即所得、感觉学习起来很快；第三，我身边的某某转行作前端看上去不错、我似乎也可以；第四，我不喜欢我现在做的工作、想换行业、正好前端技术上手较快，就选他吧；第五，我真的喜欢做Web前端，为它付出再多都是值得的。
　　转行者的心态比较容易走两个极端，一是只看到新行业的好，二是只觉得原工作很糟糕。但不管是什么行业的转行，对自己的职业规划的思考都应当先行一步。即务必首先清晰的回答这些问题：
1、我能做什么？
& & &- html+css+js
& & &- 简单页面
2、我不能做什么？
& & &- 切图（photoshop）
& & &- 前端js框架（jQuery、bootstrap、react）
& & &- 后端语言（php、nodejs）
& & &- http协议
& & &- js规范、标准（commonJs、ES6）
3、我的优势是什么？
& & &- 熟练js使用
& & &- 前端开发项目经验
& & &- 面向对象、代码规范、设计模式等编程思想
4、我的劣势是什么？
& & &- web前端项目经验
& & &- web前端行业知识及工作流
5、做新行业对我有何好处？
& & &- 价值观、成就感（web前端更贴近生活，应用范围广，用户量大，游戏行业更像是一种虚拟世界的繁荣，难以获得成就感）
& & &- web前端是朝阳行业，日新月异，有挑战性，让人兴奋（我喜欢尝试不同的事物，比如吃饭的时候不喜欢总吃一家）
& & &- web前端的职业路线更加清晰明确
6、换行会让我付出何种代价？
& & &- 失去游戏行业4年积累的人脉、行业知识、技术知识
& & &- 薪资可能会下降
& & &- 付出比别人更多时间和精力才能跟上web前端的步伐
& & &- 可能需要接外包才能维持现有的生活质量
7、如何定义转行成功
& & &1）了解web前端整个工作流，并有制作一个简单网站的解决方案；
& && 2）能够按时完成前端工作计划；
& && 3）维护一个个人网站和博客；
& & &4）独立接外包
　　因为面试的时候一定会被这些问题所挑战。如果支支吾吾说不清楚，要么是对自己未来不负责任，要么骨子里就是草根一族，习惯做什么都蜻蜓点水浅尝辄止，也难让人信服你的转行是一个权衡再三看起来合理的选择。我无法帮每个人回答这些问题，但至少有两点是确定的，第一，Web前端技术是一个朝阳行业，绝对值得义无反顾的坚持下去；第二，你将经历从未有过的枯燥、苛刻的历练，所谓痛苦的&行弗乱其所为&阶段。不过话说回来，经历过高考的人，还怕个屁啊。
　　有心之人自有城府、懂得放弃，看得清大势中的危机、识得懂繁华里的机遇。尤其当立足于Web前端技术时，这种感觉就愈发强烈。因为国内外前端技术领域从2000年至今一直非常活跃，前端技术前进的步伐也很快，对于一些人来说，不管你是在大公司供职还是创业，不管你是在接外包项目还是自己写开源项目，从转行到跟得上新技术的脚步是有一些方法和&捷径&的。
阅读(...) 评论()