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

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

一、总任务

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

二、用到的知识+小demo

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

三、任务功能分解

  • 按键控制太空船移动

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

四、代码整合

1. HTML
<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>taikong game</title>
</head>
<body onkeyDown='keyPress(event)'>
  <canvas id='square' width="200px" height = "400px"></canvas>
  
</body>
</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<splits.length;i++){
    ctx.fillStyle='blue';
    ctx.fillRect(splits[i].x,splits[i].y,10,10);
  splits[i].y+=10;
  }
}

//创建太空船
function creatSpaceship(){
  ctx.fillStyle='orange';
  ctx.fillRect(spaceship.x,spaceship.y,10,10);
}

//碎片下落
function move(){
  if(over()===true){
   clearInterval(start);
  }else{
    clearAdd();
    creatAdd();
  creatSpaceship();   } 
 
}
var start = setInterval(move,500);

//太空船移动
function keyPress(event){
  if((spaceship.y>=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<splits.length;i++){
    if((Math.abs(spaceship.x-splits[i].x)<10)&&(Math.abs(spaceship.y-splits[i].y)<10)){
      ctx.font = '30px Arial';
      ctx.fillStyle='#f60';
      ctx.fillText("Game Over!",20,100);
      flag = true;
    }
  }
  return flag;
}

五、初步作品展示

初步展示
结果图

六、真正大神的作品展示

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

改进版

七、总结

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容