我们是如何首次使用canvas实现一个小游戏
昨天参加了实验室组织的游戏预演活动,在老师的引导下和大家一起学习使用canvas制作一款简单的躲避碎片游戏,整个学习流程特别高效,就把这一套高效方法再总结回顾一下.
及时总结
下面是我使用canvas实现躲避碎片的截图
游戏截图
当然啦,还有试玩地址,供大家消遣,其中还附有源码哟.
现在大家可能对我们是如何学习陌生的canvas,并用它制作游戏更感兴趣, 我只能说任何高效学习都是有套路的，而我们制作游戏的整个流程就是按照如下的套路走的。
我们的套路
一 . 需求确认
在这个网站实现老师所给的躲避碎片游戏.
二 . 功能探索
1 . 小组探索功能
- 游戏上方的提示信息
- 有一定大小的太空
- 飞船可以上下左右移动
- 飞船移动到左右边界时从相反的位置出现
- 随即出现并下落的碎片
- 飞船与碎片碰撞后出现Game Over！，页面静止
2 . 画出原型图
躲避碎片原型图
3 . 事件列表
- 页面加载
- 页面载入出现游戏界面
- 游戏界面上方出现提示语句
- 飞船静止在太空中央
- 碎片随机出现
- 碎片从向向下垂直移动
- 按上下左右键
- 按上，下，左，右键,飞船向上，下，右，左移动
- 当飞船移动至最左最右
- 飞船出现在另一端
- 飞船移动至上下边界时
- 静止在上下边界
- 飞船撞上碎片
- 出现Game Over！
- 游戏结束，页面静止
4 . 画出组件图
躲避碎片组件图
5 . 数据结构
game{
isOver : false, // 判断游戏是否结束
spaceShip : {
x : number, // 飞船的x坐标
y : number // 飞船的y坐标
},
debris : [ {
x : number,
y : number
}] // 存放碎片坐标的数组
}
三 . 分解任务
按照上面的事件列表小组拆分任务做成故事卡，贴在看板上
看板
四 . 功能实现
1 . 概念学习
使用5W1H对新知识提出问题，然后小组内自己认领并解决问题，在这一阶段小组内使用石墨进行协作，大家提了一系列问题如下：
- canvas是什么？
- canvas是由谁推出的？
- canvas解决了什么问题？
- canvas为什么会出现？
- 该怎么使用canvas？
- 有没有什么入门教程、文档、小例子之类？
- 它有什么核心概念？
- 有没有别的替代方案，各有什么特点？
最后由认领问题的组员把答案贴在石墨上并为大家作出解答，这样就很明显的感受到组队学习的好处，特别节省时间，大家可以在这里查看相关答案
2 . DEMO预研
- 怎样画出指定高度和宽度的方块(已添加背景)
https://jsbin.excellence-girls.org/buk/1/edit?html,css,js,output
- 生成一个方块
https://jsbin.excellence-girls.org/kij/1/edit?html,css,js,output
- 如何在画布上同时画两个方块
https://jsbin.excellence-girls.org/fas/1/edit?html,css,js,output
https://jsbin.excellence-girls.org/wum/1/edit?html,css,js,output
- 生成一个指定颜色的方块
https://jsbin.excellence-girls.org/gik/1/edit?html,css,js,output
- 生成随机数
https://jsbin.excellence-girls.org/kiz/1/edit?html,css,js,output
- 从屏幕顶端随机生成碎片
https://jsbin.excellence-girls.org/paf/1/edit?html,css,js,output
- 碎片从上到下匀速移动
https://jsbin.excellence-girls.org/kot/1/edit?html,css,js,output
- 如何捕获键盘事件
https://jsbin.excellence-girls.org/xur/edit?html,css,js,output
- 如何捕获上下左右键盘事件
https://jsbin.excellence-girls.org/xur/edit?html,css,js,output
- 按上下左右方块移动
https://jsbin.excellence-girls.org/peja/1/edit?html,js,output
- 按上下左右到达边界事件
https://jsbin.excellence-girls.org/met/1/edit?html,js,output
- 如何判断碰撞
https://jsbin.excellence-girls.org/jaf/1/edit?html,css,js,output
3 . 业务逻辑实现
在前期准备结束后，接下来就是严格按照上面的数据结构和组件图并借助DEMO实现最终游戏啦。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
</head>
<body onKeyDown = "keyEvent(event)">
<div id="tip">
<p>使用上下左右键控制太空船躲避宇宙碎片</p>
<p>注意：需要先用鼠标点一下这个页面，让页面的焦点切换到这个游戏页面上</p>
</div>
<canvas id='canvas' width="300" height="420" />
</body>
</html>
解析：在id="tip"的div中写提示语句
使用canvas制作一个宽300，高420的矩形框
在整个页面添加监听键盘事件
body{
border:2px black solid;
}
#canvas {
border: 1px solid black;
background:#DCDCDC;
margin-left:120px;
}
#tip{
background:#FAEBD7;
}
p{
text-align:center;
}
解析： 给游戏添加一些简单的样式
const canvas = document.getElementById('canvas'); // 获取画布
const ctx = canvas.getContext('2d'); //获取该canvas的2D绘图环境对象
let game={ // 数据结构
isover:false,
spaceShip:{
x:120,
y:270
},
desire:[]
}
self.setInterval("move()",50); // 每50毫秒执行一次move()函数
function creatDesire(){ // 生成随即碎片
let num = Math.floor(Math.random()*300); //在飞船宽度产生随机数
game.desire.push({x:num,y:0}); //此随机数就是碎片的起始位置
}
function drawDesire(){ // 绘制碎片移动，并判断是否相撞
ctx.clearRect(0,0,300,420); // 重新渲染页面
for(let i = 0;i<game.desire.length;i++){
ctx.fillStyle='green';
ctx.fillRect(game.desire[i].x,game.desire[i].y++,30,30); //将desire[]数组重的碎片全部绘制在页面
if(Math.abs(game.desire[i].x-game.spaceShip.x)<=30 && Math.abs(game.desire[i].y++-game.spaceShip.y)<=30){ //判断碎片与飞船是否位置重叠
ctx.font="40px Arial";
ctx.fillStyle="blue";
ctx.fillText("Game over!",50,200);
game.isover=true; // 若相撞将isover置为true
}
}
}
function creatShip(){ //绘制飞船
ctx.fillStyle = '#F08080';
ctx.fillRect(game.spaceShip.x, game.spaceShip.y, 30,30);
}
function move(){
if(game.isover === true){ // 每50毫秒就会判断是否碰撞
return;
}
else if(Math.floor(Math.random()*30) % 30 === 1){ // 控制碎片随即出现的数量
creatDesire();
}
drawDesire();
creatShip();
}
function left(){ //飞船左移
if(game.spaceShip.x<30) // 飞船移至左边界出现在右边
game.spaceShip.x=canvas.width-30;
else
game.spaceShip.x-=5;
}
function up(){ //飞船上移
if(game.spaceShip.y === 0) // 飞船静止在上边界
game.spaceShip.y=0;
else
game.spaceShip.y-=5;
}
function right(){ //飞船右移
if(game.spaceShip.x===canvas.width-30) // 飞船移至右边界出现在左边
game.spaceShip.x=0;
else
game.spaceShip.x+=5;
}
function down(){ //飞船下移
if(game.spaceShip.y === canvas.height-30) // 飞船静止在下边界
y=canvas.height-5;
else
game.spaceShip.y+=5;
}
function keyEvent(event){ // 获取键盘事件
if(event.keyCode === 37){ // left键对应37
left();
}else if(event.keyCode === 38){
up();
}else if(event.keyCode === 39){
right();
}else if(event.keyCode === 40){
down();
}
}
五 . 总结分享
在之前接到一个任务时我可能会先了解下canvas如何使用，之后就直接上手敲代码了，可以预见的是肯定会陷入长时间的调bug，而通过暑期特训营和这次的训练更加觉得开发不仅仅是敲代码，前期的准备很重要。
我们的目的并不是只会做这一款游戏，而是通过写这个小游戏掌握老师交给我们的学习方法，并运用到以后的学习中。
更多关于学习方法可以看这篇我们在实验室是如何学习的。
