16-11-30 第一个小游戏太空船

写一篇关于小游戏的博客，通过介绍我写这个游戏的过程，来帮助想入门写小游戏的盆友，同时培养遇到问题将问题分解的能力。
我写这第二篇时已经距离找到工作整整两个月了，在这两个月里，有时心血来潮，喜欢跑去图书馆看书学习，有时喜欢拉一帮人出去玩、逛，这一玩，心就很难收回来，过个两个周的调整，思考一下人生啊、未来啊······于是继续投身学习中，就这样来来回回折腾了好久。
昨天知道了卓越女生实验室学习了写小游戏，这个我可是很感兴趣的，之前林老师老早都让我去实验室，但我每次都感觉自己事好多，课也多，就不宜从西区跑到东区了，唉，现在想想浪费了两个月的时间，好悲哀！可是我喜欢做小游戏，无论我有多不想跑路，也得跑，我决定要去实验室去请教同学做做小游戏。
这个游戏是基础叫：太空船游戏

一、总任务

• 橙色代表太空船
• 蓝色代表碎片
• 碎片随机下落
• 太空船移动躲避碎片

二、用到的知识+小demo

干货：html（H5里的canvas重点）、css、js。（ok是不是很简单）
demo:

• 放一个指定大小的画布（宽200，高400）
  https://jsbin.excellence-girls.org/vus/2/edit?html,css,js,output
• 在画布上放一个方块（10*10）
  https://jsbin.excellence-girls.org/vus/3/edit?html,css,js,output
• 在画布上放两个方块
  https://jsbin.excellence-girls.org/vus/4/edit?html,css,js,output
• 画出指定颜色的方块（一橙，一蓝）
  https://jsbin.excellence-girls.org/bom/2/edit?html,css,js,console,output
• javascript中如何生成随机数
  https://jsbin.excellence-girls.org/bom/1/edit?html,css,js,console,output
• 在画布顶端随机生成方块
  https://jsbin.excellence-girls.org/vus/9/edit?html,css,js,console,output
• 随机生成方块
  https://jsbin.excellence-girls.org/vus/7/edit?html,css,js,console,output
• 方块右移
  https://jsbin.excellence-girls.org/vus/10/edit?html,css,js,console,output
• 如何捕获上、下、左、右键盘事件
  https://jsbin.excellence-girls.org/vus/11/edit?html,css,js,console,output
• 触发键盘事件移动方块
  https://jsbin.excellence-girls.org/vus/12/edit?html,css,js,console,output
• 如何判断两个方块相撞
  https://jsbin.excellence-girls.org/zima/1/edit?html,css,js,console,output

三、任务功能分解

• 实现一个黑底画布宽200，高400
• 在画布里画一个太空船
  https://jsbin.excellence-girls.org/vus/14/edit?html,css,js,console,output

• 随机出现（一个）碎片自动下落
  https://jsbin.excellence-girls.org/taq/1/edit?html,js,output

• 随机出现（多个）碎片自动下落
  https://jsbin.excellence-girls.org/vus/16/edit?html,js,output

• 按键控制太空船移动

https://jsbin.excellence-girls.org/tami/1/edit?html,js,output

• 太空船与碎片碰撞game over
  https://jsbin.excellence-girls.org/fuxe/2/edit?html,js,console,output

四、代码整合

1. HTML

2. CSS

#square{
  background:#000;
  border:1px solid #000;
}

3. JavaScript

var square = document.getElementById("square");
var ctx = square.getContext("2d");

let spaceship = {x:100,y:300};
let splits = [{x:Math.random()*200,y:0}];  //产生的随机碎片坐标

//清空坐标  清空画布内容
function clearAdd(){
  ctx.clearRect(0,0,200,400);
}

//产生多个随机碎片
function creatAdd(){
  splits.push({x:Math.random()*200,y:0});
  for(let i=0;i=0)&&(spaceship.y<=(square.height-10))){
  if(event.keyCode===37){
  spaceship.x-=10
  }else if((event.keyCode===38)&&(spaceship.y>0)){
  spaceship.y-=10;
   
  }else if(event.keyCode === 39){
  spaceship.x+=10;
  }else if((event.keyCode===40)&&((spaceship.y<(square.height-10)))){
   spaceship.y+=10;
  }
 }
  if(spaceship.x<0){
    spaceship.x=square.width-10;
  }else if(spaceship.x>square.width){
    spaceship.x=0;
  }
}
//Game Over！
function over(){
  let flag=false;
  for(let i=0;i

五、初步作品展示

初步展示

结果图

六、真正大神的作品展示

https://jsbin.excellence-girls.org/bec/1/edit?js,output
https://jsbin.excellence-girls.org/tal/1/edit?js,console,output

改进版

七、总结

在实现这一个很小的游戏中，通过将问题分解，整合，体现了老师教我们的敏捷Tasking大法，同时可以很好的锻炼人的思维能力，将js也很好的用在了实践上面，很喜欢这种感觉，因此，没事了写写小游戏也很好，同时很感谢黄丽珍学妹的热心指导，也体验了在ThoughtWorks实验室学习的氛围，不得不说条件真好，我现在突然很珍惜在这里有限的学习时间。
加油，我会的～_～