临近期末了,写一个鸿蒙大作业,我想着玩别人写的游戏,不如自己写一个游戏用来玩。我把源码放下面了,想要的可以自取。
项目介绍
首先进入的是游戏须知界面,知道游戏的规则,然后点击开始玩游戏,首先是进图游戏,然后选着游戏难度,点击开始计时才能选着翻开图片,若两张卡片一样就翻开,若是不一样就返回
具体实现
1.登录创建
创建View文件夹并创建 loginView.ets
import promptAction from '@ohos.promptAction';//创建文本提示框,对话框,操作菜单
import router from '@ohos.router';
@Component
export struct loginView{
@State email:string=''
@State password:string=''
@State isLoading:Boolean=false//提示
build(){
Column(){
Image($r('app.media.earth')).width("100%").height("25%")
Blank()
Column(){
Blank()
Text($r('app.string.title_login_label')).fontSize(26).fontColor(Color.Orange)
.fontWeight(FontWeight.Medium)
Blank()
TextInput({placeholder:$r('app.string.email_placeholder_label')})//邮箱
.width("100%").height(50)
.type(InputType.Email)//文本类型
.caretColor(Color.Black)//文本颜色
.onChange((value)=>{
this.email=value
})
Blank()
TextInput({placeholder:$r('app.string.pwd_placeholder_label')})//密码
.width("100%").height(50)
.type(InputType.Password)//文本类型
.caretColor(Color.Black)//文本颜色
.onChange((value)=>{
this.password=value
})
Blank()
Button()
{
Text($r('app.string.login_label')).fontColor(Color.White).fontSize(18)
}.width("100%").height(50)
.onClick(()=>{
if (this.email=='lkl',this.password=='lkl') {
router.pushUrl({
url:"pages/begin_play"
})
}
if(this.email==='')
{
promptAction.showToast({message:$r('app.string.email_err_label')})
return
}
if(this.password==='')
{
promptAction.showToast({message:$r('app.string.pwd_placeholder_label')})
return
}
if(this.password=='lkl'&& this.email=='lkl'){
this.isLoading=true
return this.isLoading
}
})
Blank()
Row(){
Text($r('app.string.subtitle_login_label')).fontColor(Color.Black).fontSize(18)
.onClick(()=>{
router.pushUrl({
url:"pages/RegisterPage"
})
})
Blank()
Text($r('app.string.forget_pwd_label')).fontColor(Color.Black).fontSize(18)
}.width("100%").height(50)
}
.backgroundColor(Color.White)
.width("95%").height("45%")
.padding({left:10,right:10})
.borderRadius(18)
.shadow({radius:10,color:Color.Gray,offsetX:4,offsetY:8})
Blank()
Row(){
Blank()
Divider().width(100)//分割线
Text($r('app.string.other_label')).margin({left:10,right:10})
.fontColor(Color.Black).fontSize(16)
Divider().width(100)
Blank()
}.width("100%")
Blank()
Row(){
Blank()
Image($r('app.media.QQ')).height(60).width(60)
Blank()
Image($r('app.media.wechat')).height(60).width(60)
Blank()
}.width("100%").margin({top:10})
Blank()
}.width("100%").height("100%")
}
}
2.创建注册RegisterView.ets
import promptAction from '@ohos.promptAction';//创建文本提示框,对话框,操作菜单
//路由跳转
import router from '@ohos.router';
@Component
export struct RegisterView{
@State email:string=''
@State password:string=''
@State name:string=''
build(){
Column({ space: 40 }){
Image($r('app.media.earth')).width("100%").height("25%")
// Blank()
Column(){
Blank()
Text($r('app.string.title_register_label')).fontSize(26).fontColor(Color.Orange)
.fontWeight(FontWeight.Medium)
Blank()
TextInput({placeholder:$r('app.string.name_register_label')})//用户名
.width("100%").height(50)
.type(InputType.Email)//文本类型
.caretColor(Color.Black)//文本颜色
.onChange((value)=>{
this.name=value
})
Blank()
TextInput({placeholder:$r('app.string.email_placeholder_label')})//邮箱
.width("100%").height(50)
.type(InputType.Email)//文本类型
.caretColor(Color.Black)//文本颜色
.onChange((value)=>{
this.email=value
})
Blank()
TextInput({placeholder:$r('app.string.pwd_placeholder_label')})//密码
.width("100%").height(50)
.type(InputType.Password)//文本类型
.caretColor(Color.Black)//文本颜色
.onChange((value)=>{
this.password=value
})
Blank()
Button()
{
Text($r('app.string.register_label')).fontColor(Color.White).fontSize(18)
}.width("100%").height(50)
.onClick(()=>{
if(this.name==='')
{
promptAction.showToast({message:$r('app.string.name_err_label')})
return
}
if(this.email=='')
{
promptAction.showToast({message:$r('app.string.email_err_label')})
return
}
if(this.password=='')
{
promptAction.showToast({message:$r('app.string.pwd_placeholder_label')})
return
}
})
Blank()
Row(){
Text($r('app.string.subtitle_register_label')).fontColor(Color.Black).fontSize(18)
.onClick(()=>{
router.pushUrl({
url:"pages/LoginPage"
})
})
Blank()
Text($r('app.string.forget_pwd_label')).fontColor(Color.Black).fontSize(18)
}.width("100%").height(50)
}
.backgroundColor(Color.White)
.width("95%").height("50%")
.padding({left:10,right:10})
.borderRadius(18)
.shadow({radius:10,color:Color.Gray,offsetX:4,offsetY:8})
Blank()
}.width("100%").height("100%")
}
}
在page页面内创建Loginpage,和Register文件,进行运行,查看结果
在page里面可以查看RegisterView()或者 loginView(),,页面运行信息
import { RegisterView } from '../view/RegisterView'
@Entry
@Component
struct LoginPage {
build() {
Column()
{
RegisterView()// loginView()
}
}
}
3.Game项目的创建。
创建game文件夹创建game_test(这个原本是game项目的测试,我不想改了)创建
相关代码如下,其中创建JS是为了生成随机数
import rand_card_sl from './Randint_L'
import rand_card_sr from './Randint_R'
@Component
export struct game_test{
@State choose1:Cards=new Cards(-1,false)
@State choose2:Cards=new Cards(-1,false)
@State choose_err:boolean=false
@State successful_card:number=0
ran_sl:number[]=rand_card_sl
ran_sr:number[]=rand_card_sr
@State i:number=0
@State j:number=0
@State click_two:boolean[]=[false,false]
@State game_over:boolean=false
@State begin:boolean=true
//难度选择
@State choice:boolean[]=[true,false,false]
@State game_c:boolean[]=[false,false,false]
@State play_game:boolean=true
@State memory_time:boolean=false
@State game_time:boolean=false
@State picture_L:boolean=false
textTimerController0: TextTimerController = new TextTimerController()
textTimerController1: TextTimerController = new TextTimerController()
textTimerController2: TextTimerController = new TextTimerController()
textTimerController_game0: TextTimerController = new TextTimerController()
textTimerController_game1: TextTimerController = new TextTimerController()
textTimerController_game2: TextTimerController = new TextTimerController()
textTimerController_game3: TextTimerController = new TextTimerController()
@State format: string = 'ss.SS'
@State arr_l:Cards[]=[new Cards(this.ran_sl[0],true),new Cards(this.ran_sl[1],true),new Cards(this.ran_sl[2],true), new Cards(this.ran_sl[3],true)
,new Cards(this.ran_sl[4],true),new Cards(this.ran_sl[5],true),new Cards(this.ran_sl[6],true),new Cards(this.ran_sl[7],true),
new Cards(this.ran_sl[8],true),new Cards(this.ran_sl[9],true),new Cards(this.ran_sl[10],true),new Cards(this.ran_sl[11],true)]
@State arr_r:Cards[]=[new Cards(this.ran_sr[0],true),new Cards(this.ran_sr[1],true),new Cards(this.ran_sr[2],true), new Cards(this.ran_sr[3],true)
,new Cards(this.ran_sr[4],true),new Cards(this.ran_sr[5],true),new Cards(this.ran_sr[6],true),new Cards(this.ran_sr[7],true),
new Cards(this.ran_sr[8],true),new Cards(this.ran_sr[9],true),new Cards(this.ran_sr[10],true),new Cards(this.ran_sr[11],true)]
build(){
Stack(){
if (this.successful_card==12){
Row(){
Text('你真是太棒了!,游戏成功').fontSize(30).fontColor(Color.Orange)
}.height('70%').width('70%').alignItems(VerticalAlign.Center).backgroundColor(Color.Pink).justifyContent(FlexAlign.Center).zIndex(1)
}
// 难度设置
if (this.play_game){
Column({space:15}){
Row({space:20}){
Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true).height(35).width(35)
.onChange((isChecked: boolean) => {
if(isChecked){
this.choice[0]=true
this.choice[1]=false
this.choice[2]=false
}
console.log('Radio1 status is ' + isChecked+this.choice[0]+this.choice[1]+this.choice[2])
})
Text('简单').width(70)
}.width(400).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center)
Row({space:20}){
Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false).height(35).width(35)
.onChange((isChecked: boolean) => {
if(isChecked){
this.choice[0]=false
this.choice[1]=true
this.choice[2]=false
}
console.log('Radio2 status is ' + isChecked+this.choice[0]+this.choice[1]+this.choice[2])
})
Text('一般').width(70)
}.width(400).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center)
Row({space:20}){
Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false).height(35).width(35)
.onChange((isChecked: boolean) => {
if(isChecked){
this.choice[0]=false
this.choice[1]=false
this.choice[2]=true
}
console.log('Radio3 status is ' + isChecked+this.choice[0]+this.choice[1]+this.choice[2])
})
Text('困难').width(70)
}.width(400).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center)
Button() {
Text('开始游戏')
}.width(50).height(50).onClick(() => {
console.info(`choice:${this.choice}`)
if (this.choice[0]){
this.textTimerController0.start()
this.game_c[0]=true
console.info('choice[0]执行')
}
if (this.choice[1]){
this.textTimerController1.start()
this.game_c[1]=true
console.info('choice[1]执行')
}
if (this.choice[2]) {
this.textTimerController2.start()
this.game_c[2] = true
}
this.click_two[this.i++]=true
this.memory_time=true
if(this.click_two[0]&&this.click_two[1]){
this.play_game=false
}
}).width(100).height(50)
}.height('70%').width('70%').alignItems(HorizontalAlign.Center).backgroundColor(Color.Pink).justifyContent(FlexAlign.Center)
.zIndex(1)
}
Row() {
Blank()
Column() {
Row() {
if (this.arr_l[0].dad) {
Image(`/image/common/${this.arr_l[0].get_id()}.png`).image_style()
} else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`前picture_L:${this.picture_L}`)
if (this.picture_L) {
this.arr_l[0]=new Cards(this.arr_l[0].get_id(), true)
this.choose1=this.arr_l[0]
this.i=0
this.picture_L=false
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()
}
if (this.arr_l[1].dad){
Image(`/image/common/${this.arr_l[1].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`picture_L:${this.picture_L}`)
if (this.picture_L) {
this.picture_L = false
this.arr_l[1]=new Cards(this.arr_l[1].get_id(), true)
this.choose1=this.arr_l[1]
this.i=1
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()
}
if (this.arr_l[2].dad){
Image(`/image/common/${this.arr_l[2].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_L:${this.picture_L}`)
if (this.picture_L) {
this.picture_L = false
this.arr_l[2]=new Cards(this.arr_l[2].get_id(), true)
this.choose1=this.arr_l[2]
this.i=2
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()}
if (this.arr_l[3].dad){
Image(`/image/common/${this.arr_l[3].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_L:${this.picture_L}`)
if (this.picture_L){
this.arr_l[3]=new Cards(this.arr_l[3].get_id(), true)
this.choose1=this.arr_l[3]
this.i=3
this.picture_L=false
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()}
}.row_style()
Row() {
if (this.arr_l[4].dad) {
Image(`/image/common/${this.arr_l[4].get_id()}.png`).image_style()
} else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`前picture_L:${this.picture_L}`)
if (this.picture_L) {
this.arr_l[4]=new Cards(this.arr_l[4].get_id(), true)
this.choose1=this.arr_l[4]
this.i=4
this.picture_L=false
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()
}
if (this.arr_l[5].dad){
Image(`/image/common/${this.arr_l[5].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`picture_L:${this.picture_L}`)
if (this.picture_L) {
this.picture_L = false
this.arr_l[5]=new Cards(this.arr_l[5].get_id(), true)
this.choose1=this.arr_l[5]
this.i=5
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()
}
if (this.arr_l[6].dad){
Image(`/image/common/${this.arr_l[6].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_L:${this.picture_L}`)
if (this.picture_L) {
this.picture_L = false
this.arr_l[6]=new Cards(this.arr_l[6].get_id(), true)
this.choose1=this.arr_l[6]
this.i=6
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()}
if (this.arr_l[7].dad){
Image(`/image/common/${this.arr_l[7].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_L:${this.picture_L}`)
if (this.picture_L){
this.arr_l[7]=new Cards(this.arr_l[7].get_id(), true)
this.choose1=this.arr_l[7]
this.i=7
this.picture_L=false
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()}
}.row_style()
Row() {
if (this.arr_l[8].dad) {
Image(`/image/common/${this.arr_l[8].get_id()}.png`).image_style()
} else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`前picture_L:${this.picture_L}`)
if (this.picture_L) {
this.arr_l[8]=new Cards(this.arr_l[8].get_id(), true)
this.choose1=this.arr_l[8]
this.i=8
this.picture_L=false
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()
}
if (this.arr_l[9].dad){
Image(`/image/common/${this.arr_l[9].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`picture_L:${this.picture_L}`)
if (this.picture_L) {
this.picture_L = false
this.arr_l[9]=new Cards(this.arr_l[9].get_id(), true)
this.choose1=this.arr_l[9]
this.i=9
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()
}
if (this.arr_l[10].dad){
Image(`/image/common/${this.arr_l[10].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_L:${this.picture_L}`)
if (this.picture_L) {
this.picture_L = false
this.arr_l[10]=new Cards(this.arr_l[10].get_id(), true)
this.choose1=this.arr_l[10]
this.i=10
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()}
if (this.arr_l[11].dad){
Image(`/image/common/${this.arr_l[11].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_L:${this.picture_L}`)
if (this.picture_L){
this.arr_l[11]=new Cards(this.arr_l[11].get_id(), true)
this.choose1=this.arr_l[11]
this.i=11
this.picture_L=false
}
console.info(`后picture_L:${this.picture_L}`)
}).image_style()}
}.row_style()
}.column_style()
Blank()
//记忆开始
if (this.memory_time){
if(this.choice[0]){
TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController0 })
.format(this.format)
.fontColor(Color.Black)
.fontSize(15)
.onTimer((utc: number, elapsedTime: number) => {
if (elapsedTime-30000>=0&&elapsedTime-30000<=20){
this.play_game=false
this.choice[0]=false
this.memory_time=false
this.game_time=true
this.arr_l=[new Cards(this.ran_sl[0],false),new Cards(this.ran_sl[1],false),new Cards(this.ran_sl[2],false), new Cards(this.ran_sl[3],false)
,new Cards(this.ran_sl[4],false),new Cards(this.ran_sl[5],false),new Cards(this.ran_sl[6],false),new Cards(this.ran_sl[7],false),
new Cards(this.ran_sl[8],false),new Cards(this.ran_sl[9],false),new Cards(this.ran_sl[10],false),new Cards(this.ran_sl[11],false)]
this.arr_r=[new Cards(this.ran_sr[0],false),new Cards(this.ran_sr[1],false),new Cards(this.ran_sr[2],false), new Cards(this.ran_sr[3],false)
,new Cards(this.ran_sr[4],false),new Cards(this.ran_sr[5],false),new Cards(this.ran_sr[6],false),new Cards(this.ran_sr[7],false),
new Cards(this.ran_sr[8],false),new Cards(this.ran_sr[9],false),new Cards(this.ran_sr[10],false),new Cards(this.ran_sr[11],false)]
}
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
this.play_game=false
})
}
if(this.choice[1]){
TextTimer({ isCountDown: true, count: 15000, controller: this.textTimerController1 })
.format(this.format)
.fontColor(Color.Black)
.fontSize(15)
.onTimer((utc: number, elapsedTime: number) => {
if (elapsedTime-15000>=0&&elapsedTime-15000<=20){
this.play_game=false
this.choice[1]=false
this.memory_time=false
this.game_time=true
this.arr_l=[new Cards(this.ran_sl[0],false),new Cards(this.ran_sl[1],false),new Cards(this.ran_sl[2],false), new Cards(this.ran_sl[3],false)
,new Cards(this.ran_sl[4],false),new Cards(this.ran_sl[5],false),new Cards(this.ran_sl[6],false),new Cards(this.ran_sl[7],false),
new Cards(this.ran_sl[8],false),new Cards(this.ran_sl[9],false),new Cards(this.ran_sl[10],false),new Cards(this.ran_sl[11],false)]
this.arr_r=[new Cards(this.ran_sr[0],false),new Cards(this.ran_sr[1],false),new Cards(this.ran_sr[2],false), new Cards(this.ran_sr[3],false)
,new Cards(this.ran_sr[4],false),new Cards(this.ran_sr[5],false),new Cards(this.ran_sr[6],false),new Cards(this.ran_sr[7],false),
new Cards(this.ran_sr[8],false),new Cards(this.ran_sr[9],false),new Cards(this.ran_sr[10],false),new Cards(this.ran_sr[11],false)]
}
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
this.play_game=false
})
}
if(this.choice[2]){
TextTimer({ isCountDown: true, count: 5000, controller: this.textTimerController2 })
.format(this.format)
.fontColor(Color.Black)
.fontSize(15)
.onTimer((utc: number, elapsedTime: number) => {
if (elapsedTime-5000>=0&&elapsedTime-5000<=20){
this.play_game=false
this.choice[2]=false
this.memory_time=false
this.game_time=true
this.arr_l=[new Cards(this.ran_sl[0],false),new Cards(this.ran_sl[1],false),new Cards(this.ran_sl[2],false), new Cards(this.ran_sl[3],false)
,new Cards(this.ran_sl[4],false),new Cards(this.ran_sl[5],false),new Cards(this.ran_sl[6],false),new Cards(this.ran_sl[7],false),
new Cards(this.ran_sl[8],false),new Cards(this.ran_sl[9],false),new Cards(this.ran_sl[10],false),new Cards(this.ran_sl[11],false)]
this.arr_r=[new Cards(this.ran_sr[0],false),new Cards(this.ran_sr[1],false),new Cards(this.ran_sr[2],false), new Cards(this.ran_sr[3],false)
,new Cards(this.ran_sr[4],false),new Cards(this.ran_sr[5],false),new Cards(this.ran_sr[6],false),new Cards(this.ran_sr[7],false),
new Cards(this.ran_sr[8],false),new Cards(this.ran_sr[9],false),new Cards(this.ran_sr[10],false),new Cards(this.ran_sr[11],false)]
}
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
this.play_game=false
})
}
}
// 游戏时间
if(this.game_time){
if (this.game_c[0]){
Column({ space: 30 }) {
if(this.begin){
Button() {
Text('开始计时').fontColor(Color.White).fontSize(18)
}.width(50).height(50).onClick(() => {
this.textTimerController_game0.start()
this.picture_L=true
this.begin=false
})
}
TextTimer({ isCountDown: true, count: 60000, controller: this.textTimerController_game0 })
.format(this.format)
.fontColor(Color.Black)
.fontSize(15)
.onTimer((utc: number, elapsedTime: number) => {
console.info('game2执行')
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
if(0<elapsedTime-60000&&elapsedTime-60000<20){
//游戏结束
this.game_over=true
}
})
Button() {
Text('暂停').fontColor(Color.White).fontSize(18)
}.width(50).height(50).onClick(() => {
this.textTimerController_game0.pause()
})
}.height('100%').width(50).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
}
if (this.game_c[1]){
Column({ space: 30 }) {
if(this.begin){
Button() {
Text('开始计时').fontColor(Color.White).fontSize(18)
}.width(50).height(50).onClick(() => {
this.textTimerController_game0.start()
this.picture_L=true
this.begin=false
})
}
TextTimer({ isCountDown: true, count: 60000, controller: this.textTimerController_game0 })
.format(this.format)
.fontColor(Color.Black)
.fontSize(15)
.onTimer((utc: number, elapsedTime: number) => {
console.info('game2执行')
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
if(0<elapsedTime-60000&&elapsedTime-60000<20){
//游戏结束
this.game_over=true
}
})
Button() {
Text('暂停').fontColor(Color.White).fontSize(18)
}.width(50).height(50).onClick(() => {
this.textTimerController_game0.pause()
})
}.height('100%').width(50).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
}
if (this.game_c[2]){
Column({ space: 30 }) {
if(this.begin){
Button() {
Text('开始计时').fontColor(Color.White).fontSize(18)
}.width(50).height(50).onClick(() => {
this.textTimerController_game2.start()
this.picture_L=true
this.begin=false
})
}
TextTimer({ isCountDown: true, count: 20000, controller: this.textTimerController_game2 })
.format(this.format)
.fontColor(Color.Black)
.fontSize(15)
.onTimer((utc: number, elapsedTime: number) => {
console.info('game2执行')
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
if(0<elapsedTime-20000&&elapsedTime-20000<20){
//游戏结束
this.game_over=true
}
})
Button() {
Text('暂停').fontColor(Color.White).fontSize(18)
}.width(50).height(50).onClick(() => {
this.textTimerController_game2.pause()
})
}.height('100%').width(50).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)
}
}
Blank()
Column() {
Row() {
if (this.arr_r[0].dad) {
Image(`/image/common/${this.arr_r[0].get_id()}.png`).image_style()
} else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.picture_L = true
this.arr_r[0] = new Cards(this.arr_r[0].get_id(), true)
this.choose2=this.arr_r[0]
this.j=0
this.successful_card+=1
this.textTimerController_game3.start()
}
}).image_style()
}
if (this.arr_r[1].dad){
Image(`/image/common/${this.arr_r[1].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.arr_r[1] = new Cards(this.arr_r[1].get_id(), true)
this.choose2=this.arr_r[1]
this.j=1
this.picture_L = true
this.successful_card+=1
this.textTimerController_game3.start()
}
}).image_style()
}
if (this.arr_r[2].dad){
Image(`/image/common/${this.arr_r[2].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.arr_r[2] = new Cards(this.arr_r[2].get_id(), true)
this.choose2=this.arr_r[2]
this.j=2
this.picture_L = true
this.successful_card+=1
this.textTimerController_game3.start()
}}).image_style()}
if (this.arr_r[3].dad){
Image(`/image/common/${this.arr_r[3].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.arr_r[3]=new Cards(this.arr_r[3].get_id(),true)
this.choose2=this.arr_r[3]
this.j=3
this.picture_L = true
this.successful_card+=1
this.textTimerController_game3.start()
}}).image_style()}
}.row_style()
Row() {
if (this.arr_r[4].dad) {
Image(`/image/common/${this.arr_r[4].get_id()}.png`).image_style()
} else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.picture_L = true
this.arr_r[4] = new Cards(this.arr_r[4].get_id(), true)
this.choose2=this.arr_r[4]
this.j=4
this.successful_card+=1
this.textTimerController_game3.start()
}
}).image_style()
}
if (this.arr_r[5].dad){
Image(`/image/common/${this.arr_r[5].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.arr_r[5] = new Cards(this.arr_r[5].get_id(), true)
this.choose2=this.arr_r[5]
this.j=5
this.successful_card+=1
this.picture_L = true
this.textTimerController_game3.start()
}
}).image_style()
}
if (this.arr_r[6].dad){
Image(`/image/common/${this.arr_r[6].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.arr_r[6] = new Cards(this.arr_r[6].get_id(), true)
this.choose2=this.arr_r[6]
this.j=6
this.successful_card+=1
this.picture_L = true
this.textTimerController_game3.start()
}}).image_style()}
if (this.arr_r[7].dad){
Image(`/image/common/${this.arr_r[7].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.arr_r[7]=new Cards(this.arr_r[7].get_id(),true)
this.choose2=this.arr_r[7]
this.j=7
this.successful_card+=1
this.picture_L = true
this.textTimerController_game3.start()
}}).image_style()}
}.row_style()
Row() {
if (this.arr_r[8].dad) {
Image(`/image/common/${this.arr_r[8].get_id()}.png`).image_style()
} else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.picture_L = true
this.arr_r[8] = new Cards(this.arr_r[8].get_id(), true)
this.choose2=this.arr_r[8]
this.j=8
this.successful_card+=1
this.textTimerController_game3.start()
}
}).image_style()
}
if (this.arr_r[9].dad){
Image(`/image/common/${this.arr_r[9].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(() => {
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.arr_r[9] = new Cards(this.arr_r[9].get_id(), true)
this.choose2=this.arr_r[9]
this.j=9
this.picture_L = true
this.successful_card+=1
this.textTimerController_game3.start()
}
}).image_style()
}
if (this.arr_r[10].dad){
Image(`/image/common/${this.arr_r[10].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.arr_r[10] = new Cards(this.arr_r[10].get_id(), true)
this.choose2=this.arr_r[10]
this.j=10
this.picture_L = true
this.successful_card+=1
this.textTimerController_game3.start()
}}).image_style()}
if (this.arr_r[11].dad){
Image(`/image/common/${this.arr_r[11].get_id()}.png`).image_style()
}else {
Image(`/image/common/unknown.png`).onClick(()=>{
console.info(`picture_R:${!this.picture_L}`)
if (!this.picture_L) {
this.arr_r[11]=new Cards(this.arr_r[11].get_id(),true)
this.choose2=this.arr_r[11]
this.j=11
this.picture_L = true
this.successful_card+=1
this.textTimerController_game3.start()
}}).image_style()}
}.row_style()
}.column_style()
Blank()
}.height('100%').width('100%').zIndex(0)
//游戏结束
if(this.game_over){
Column(){
Text('很遗憾,游戏结束').fontColor(Color.Black).fontSize(20).textAlign(TextAlign.Center)
// Button('返回主界面').onClick(()=>{
// router.pushUrl({
// url:"pages/RegisterPage"
// })
// })
}.height('70%').width('70%').alignItems(HorizontalAlign.Center).backgroundColor(Color.Pink).justifyContent(FlexAlign.Center).zIndex(1)
}
if(this.choose1.get_id()!=this.choose2.get_id()){
Row(){
TextTimer({ isCountDown: true, count: 500, controller: this.textTimerController_game3 })
.format(this.format)
.fontColor(Color.White)
.fontSize(0)
.onTimer((utc: number, elapsedTime: number) => {
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
if(0<elapsedTime-500&&elapsedTime-500<20){
this.arr_l[this.i]=new Cards(this.choose1.get_id(),false)
this.arr_r[this.j]=new Cards(this.choose2.get_id(),false)
this.choose1=new Cards(-1,false)
this.choose2=new Cards(-1,false)
this.successful_card-=1
}
})
}
.zIndex(-1)
}
}
}
}
//图片的格式
@Extend(Image) function image_style(){
.height('100%').width('25%').border({ width: 2 }).margin(2)
}
//Row的格式
@Extend(Row) function row_style()
{
.height('30%').width('100%').margin(4)
}
@Extend(Column) function column_style(){
.height('100%').width('40%')
}
@Observed
class Cards{
public id:number
public dad:boolean
constructor(index=0,dad=false) {
this.id=index;
this.dad=dad;
}
get_id(){
return this.id
}
get_dad(){
return this.dad
}
set_id(id){
this.id=id
}
set_dad(dad:boolean) {
this.dad=dad
}
}
4.创建game文件
我在app.media.1文件里面也放了相关素材。和image里面的素材是一样的。
import router from '@ohos.router';
@Component
export struct Game_Begin{
build() {
Row() {
Column() {
Row() {
Image($r('app.media.1')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.2')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.3')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.4')).height('100%').width('25%').border({ width: 2 }).margin(2)
}.height('30%').width('100%').margin(4)
Row() {
Image($r('app.media.5')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.6')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.7')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.8')).height('100%').width('25%').border({ width: 2 }).margin(2)
}.height('30%').width('100%').margin(4)
Row() {
Image($r('app.media.9')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.10')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.11')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.12')).height('100%').width('25%').border({ width: 2 }).margin(2)
}.height('30%').width('100%').margin(4)
}.height('100%').width('40%')
Column() {
Text('游戏规则:在一定时间内尽可能地记住左右两边各12张卡牌的对应位置,并在限定时间内将两边相同的牌一一配对。').fontColor(Color.Black).fontSize(20).textAlign(TextAlign.Center)
Button('开始游戏').onClick(()=>{
router.pushUrl({
url:"pages/Play"
})
})
}.width('15%').height('100%').backgroundColor(Color.Pink)
Column() {
Row() {
Image($r('app.media.1')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.2')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.3')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.4')).height('100%').width('25%').border({ width: 2 }).margin(2)
}.height('30%').width('100%').margin(4)
Row() {
Image($r('app.media.5')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.6')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.7')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.8')).height('100%').width('25%').border({ width: 2 }).margin(2)
}.height('30%').width('100%').margin(4)
Row() {
Image($r('app.media.9')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.10')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.11')).height('100%').width('25%').border({ width: 2 }).margin(2)
Image($r('app.media.12')).height('100%').width('25%').border({ width: 2 }).margin(2)
}.height('30%').width('100%').margin(4)
}.height('100%').width('40%').alignItems(HorizontalAlign.End)
}.height('100%').width('100%').alignItems(VerticalAlign.Center)
}
}
这样项目就大概完成了。
5.相关源码
链接: https://pan.baidu.com/s/1rZ9is66vLdn93WeClUW0Gg?pwd=6gbx 提取码: 6gbx