栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

Egret制作足球游戏

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Egret制作足球游戏

soccerGame
项目介绍

soccerGame:一个基于egret(白鹭游戏引擎)开发的简单简单简单游戏(wu liao)项目,接着上面实现的卡牌游戏,趁热打铁,再次熟练eui(os: 拖拽操作)操作,同时使用tween来实现soccer的动画。

项目演示

项目功能结构

项目运行
$ egret build xxx(项目名)
$ egret startserver xxx(项目名) -a
项目剖析

简单来说就是用eui搭建好主要的场景页面,然后在用ts去控制之间的交互。

eui组成页面

拖拖拖点点点即可

ts控制交互

主要通过按钮状态控制游戏进度,和足球的随机进球,这里的随机进球很简单,通过Math.random,如果 > 0.5,则上半边win,否则下半边win

注意

下面介绍几个有意思的点。

1.tween

这里使用了tween来做soccer上下滚动的动画,参考对应TweenApi。

2.按钮状态

在通过按钮控制游戏进度的时候,我们用到了这行:

this.btn_start.currentState  =  "xxx(可选:up pause resume和reset)";

我们在按钮的源码中通过设置source.xxx来控制按钮不同状态下使用哪张图片。

3.按钮的大小缩放效果(不使用tween)

步骤:

1.找到对应button,在wing中点击上方的源码
2.找到对应源码,加上红框中的代码

接下来说这几行的意思:

width和height为90%,表示其最初大小只有原本的90%;width.down和height.down为100%,表示点击后按钮的大小会变为100%,也就是增大10%;horizontalCenter和verticalCenter为0,则表示其缩放点为正中心

项目源码

代码中写了很多注释,基本都能看懂就不再赘述啦~

源码地址

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/242200.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号