写一篇关于小游戏的博客，通过介绍我写这个游戏的过程，来帮助想入门写小游戏的盆友，同时培养遇到问题将问题分解的能力。
我写这第二篇时已经距离找到工作整整两个月了，在这两个月里，有时心血来潮，喜欢跑去图书馆看书学习，有时喜欢拉一帮人出去玩、逛，这一玩，心就很难收回来，过个两个周的调整，思考一下人生啊、未来啊······于是继续投身学习中，就这样来来回回折腾了好久。
昨天知道了卓越女生实验室学习了写小游戏，这个我可是很感兴趣的，之前林老师老早都让我去实验室，但我每次都感觉自己事好多，课也多，就不宜从西区跑到东区了，唉，现在想想浪费了两个月的时间，好悲哀！可是我喜欢做小游戏，无论我有多不想跑路，也得跑，我决定要去实验室去请教同学做做小游戏。
这个游戏是基础叫：太空船游戏
一、总任务
- 橙色代表太空船
- 蓝色代表碎片
- 碎片随机下落
- 太空船移动躲避碎片
二、用到的知识+小demo
<b>干货：</b>html（H5里的canvas重点）、css、js。（ok是不是很简单）
<b>demo:</b>
- 放一个指定大小的画布（宽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/tami/1/edit?html,js,output
- 太空船与碎片碰撞game over
https://jsbin.excellence-girls.org/fuxe/2/edit?html,js,console,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实验室学习的氛围，不得不说条件真好，我现在突然很珍惜在这里有限的学习时间。
加油，我会的～_～
网友评论