网站开发分类现在的网站开发都用什么开发

任务要求

模拟积分抽奖程序，玩家首先输入玩家姓名，跳转到积分抽奖页面，玩家初始积分为1000分，在积分抽奖页面有红黄蓝灰四种卡片，抽中红卡加500分，抽中黄卡加200分，抽中蓝卡减500分，抽到灰卡积分清零。

抽卡规则：

1. 仅能抽3次
2. 积分清零不能继续

抽卡完毕后可以查看获奖情况：

L3（分数 ==2500）：笔记本

L2(分数>=1500)：智能手表

L1(分数>0)：钥匙扣

L0(分数<=0)：未中奖

界面原型：

1）入口页面：

2）抽卡页面：

3）开始抽卡：

4）抽卡结果：

涉及知识点

1. 常用属性方法，阴影设置

2. 线性布局，边距，内容对齐

3. @Styles、@Extend

4. 路由参数传递

5. 条件渲染

6. AlertDialog

1 入口页面

界面原型：

1）页面标题

在pages下面新建页面，命名为：ScoreGamePage，清除原有代码，仅留框架代码，然后添加如下代码，完成标题部分：

@Entry
@Component
struct ScoreGamePage {@State title: string = '积分抽奖'build() {Column(){Text(this.title).fontSize(44).fontWeight(FontWeight.Bolder).margin(20)}.width('100%').height('100%')}
}

预览效果：

2）布局【好运连连】部分

使用Row布局，【好运】占一行，【连连】占一行。

build() {Column({ space: 10 }) {Text(this.title)...Row({ space: 10 }) {Text('好').squareTxt(Color.Red)Text('运').squareTxt(Color.Yellow)}Row({ space: 10 }) {Text('连').squareTxt(Color.Blue)Text('连').squareTxt(Color.Gray)}}.width('100%').height('100%')}
}

使用@Extend定义全局样式（需要写在组件外面）：

@Extend(Text)
function squareTxt(color: Color) {.fontSize(50).width(150).height(150).borderRadius(12).backgroundColor(color).textAlign(TextAlign.Center).shadow({radius:8,color:'#ccc',offsetX:20,offsetY:20})}

[!NOTE]

关于@Extend

1、扩展原生组件

2、属于全局样式，需在组件外定义，必须加function

3、可以传递参数

4、仅可使用所扩展组件的属性方法和所有组件的通用属性方法

预览效果：

3）输入玩家名及开始抽奖按钮

继续添加文本输入框和按钮：

      TextInput({placeholder:'请输入您的名字'}).width('95%').margin(20)Button('开始抽奖').width('95%').height(50).fontSize(22)

预览效果：