本次教程的内容:主要介绍怎样通过踢踏编程(playteka)平台上的踢踏动画(playDraw)软件,将前一次《踢踏动画(PlayDraw) 教程 007 弹球》教程中的弹球,经过本次教程改造为一个经典的弹球游戏;弹球游戏是当自由运行的球碰撞到位于画布底边的挡板时则反弹,当球运行至画布底边并且没有碰撞到挡板时则游戏Game Over,并且挡板随着鼠标移动沿画布底边左右移动。

  • 本次教程程序运行输出效果如下图所示:

QQ截图20160703155627


弹球游戏操作说明:

1、创建项目:本次是通过踢踏动画软件中的“再创建”功能来创建项目,在浏览器地址栏中输入:app.playteka.com ,在系统登录界面中输入用户名和密码进入到踢踏互动编程(playteka)平台选择踢踏动画(playDraw),在踢踏动画(playDraw)软件项目列表中选择之前已创建的弹球项目,进入到弹球项目编辑界面后鼠标点击“再创作”控件QQ截图20160607155558,创建本次教程的弹球游戏新项目。
2、创建弹球:本次教程的弹球游戏项目,是基于前一次《踢踏动画(PlayDraw) 教程 007 弹球》教程中的踢踏动画代码改造完成,所以怎样创建弹球不再说明。

3、创建挡板:挡板是长方形位于画布底边(如下图所示),在踢踏动画软件中绘制长方形挡板需要知道挡板的宽度、高度、和长方形挡板左上角坐标;

QQ截图20160702170840

  • 设置挡板宽度和高度:设置挡板宽度变量为挡板宽度,挡板宽度是整个画布宽度的十二分之一 ,则挡板宽度的计算方法为:挡板宽度 = 画布宽度 ÷ 12 ;设置挡板高度变量为挡板高度,挡板高度是整个画布高度的四十分之一,则挡板高度的计算方法为:挡板高度 = 画布高度 ÷ 40 ;将挡板宽度和挡板高度的初值化计算模块代码(如下图所示)嵌入到“开始”模块中,作为程序初始化数据;

屏幕截图 2016-07-01 08.45.30

  • 设置挡板左上角坐标:设置挡板左上角坐标变量为(挡板X,挡板Y),因为挡板随着鼠标的移动沿画布底边的X轴方向左右移动,鼠标移动的X轴值通过QQ截图20160606135344模块实时获取,所以挡板X的计算方法为:挡板X = 鼠标X – (挡板宽度 ÷ 2)  ,挡板Y的计算方法为:挡板Y = 画布高度 – 挡板高度;将挡板X和挡板Y计算赋值语句(下图所示)嵌入到“循环画”模块中;

屏幕截图 2016-07-01 08.46.06

  • 实例化挡板:通过“长方形”屏幕截图 2016-07-01 08.46.44模块实例化一个二维图形的长方形挡板,长方形左上角坐标为(挡板X,挡板Y),长方形宽度为挡板宽度,长方形高度为挡板高度;将“长方形”模块嵌入到“循环画”模块中;

4、创建球碰撞到挡板时反弹功能

  • 球碰撞到挡板的分析:如下图所示,只有当球碰撞到挡板顶部时才反弹,那么需要对球碰撞到挡板顶部的范围、以及球碰撞到挡板顶部的高度进行判断;球碰撞的范围是从挡板左上角坐标到挡板右上角坐标范围,也就是挡板宽度范围;球碰撞的高度是挡板的高度,也可以通过球圆心Y坐标 + 球半径 + 挡板高度是否超出画布高度来判断球碰撞的高度,如果圆心Y坐标 + 球半径 + 挡板高度 ≥ 画布高度,则说明球已在挡板顶部的高度位置;

QQ截图20160703112503

 

  • 球碰撞到挡板后反弹的逻辑算法:球碰撞到挡板顶部的范围判断逻辑算法是:圆心X坐标 ≥ 挡板X坐标 、并且 圆心X坐标  ≤ 挡板X坐标 + 挡板宽度 ,球碰撞到挡板顶部的高度判断逻辑算法是:圆心Y坐标 + 球半径 + 挡板高度 ≥ 画布高度;当以上两个判断逻辑都满足时,则说明球已碰撞到挡板,将球的Y轴速度改为另外一个方向的速度,球的Y速度值改为-2(即:Y速度 =  Y速度 × -1),如果之前球Y轴的速度为2时,当前球Y速度则被改为-2,从而让球向上反弹;需要在“循环画”模块中增加球是否碰撞到挡板的判断逻辑代码;

屏幕截图 2016-07-01 08.47.17

5、创建当球运行至画布底边并且没有碰撞到挡板时游戏结束功能:当球在向下运行到画布底边并且没有碰撞到挡板时,也就是当 圆心Y坐标  + 球半径 ≥ 画布高度 时,则使用“停止循环”模块来结束循环程序处理,从而停止游戏运行;下图中的绿色模块是游戏结束“Game Over”文字提示设置模块,其中的“字体大小”模块用于设置提示文字的大小,文字大小设置为20,“文字”模块用于设置具体的提示文字内容和提示文字在画布内显示的坐标位置,坐标位置设置为(300,150);

屏幕截图 2016-07-01 08.47.48


以下是本次踢踏动画创作教学视频: