16-11-30 第一個小游戲太空船

寫一篇關(guān)于小游戲的博客，通過介紹我寫這個游戲的過程，來幫助想入門寫小游戲的盆友，同時培養(yǎng)遇到問題將問題分解的能力。
我寫這第二篇時已經(jīng)距離找到工作整整兩個月了，在這兩個月里，有時心血來潮，喜歡跑去圖書館看書學習，有時喜歡拉一幫人出去玩、逛，這一玩，心就很難收回來，過個兩個周的調(diào)整，思考一下人生啊、未來啊······于是繼續(xù)投身學習中，就這樣來來回回折騰了好久。
昨天知道了卓越女生實驗室學習了寫小游戲，這個我可是很感興趣的，之前林老師老早都讓我去實驗室，但我每次都感覺自己事好多，課也多，就不宜從西區(qū)跑到東區(qū)了，唉，現(xiàn)在想想浪費了兩個月的時間，好悲哀！可是我喜歡做小游戲，無論我有多不想跑路，也得跑，我決定要去實驗室去請教同學做做小游戲。
這個游戲是基礎(chǔ)叫：太空船游戲

一、總?cè)蝿?wù)

  • 橙色代表太空船
  • 藍色代表碎片
  • 碎片隨機下落
  • 太空船移動躲避碎片

二、用到的知識+小demo

<b>干貨：</b>html（H5里的canvas重點）、css、js。（ok是不是很簡單）
<b>demo:</b>

三、任務(wù)功能分解

  • 按鍵控制太空船移動

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}];  //產(chǎn)生的隨機碎片坐標

//清空坐標  清空畫布內(nèi)容
function clearAdd(){
  ctx.clearRect(0,0,200,400);
}

//產(chǎn)生多個隨機碎片
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;
  }
}

//創(chuàng)建太空船
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;
}

五、初步作品展示

初步展示
結(jié)果圖

六、真正大神的作品展示

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

改進版

七、總結(jié)

在實現(xiàn)這一個很小的游戲中，通過將問題分解，整合，體現(xiàn)了老師教我們的敏捷Tasking大法，同時可以很好的鍛煉人的思維能力，將js也很好的用在了實踐上面，很喜歡這種感覺，因此，沒事了寫寫小游戲也很好，同時很感謝黃麗珍學妹的熱心指導，也體驗了在ThoughtWorks實驗室學習的氛圍，不得不說條件真好，我現(xiàn)在突然很珍惜在這里有限的學習時間。
加油，我會的～_～

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容