Tic Tac Toe Game using HTML5 Quick Game - Part 2 - Huawei Developers

{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Introduction
In my last article, we can learn the following:
What is Quick game?
Feature and advantage of Quick game.
Development procedure.
Installing development tools.
If you have not yet read my previous article read it here to understand more about quick game. Just to summarize in my previous article we have installed project and created the application in Quick app IDE.
In this article, we can learn the following:
Creating Quick Game.
Generating and configuring a certificate fingerprint.
Enabling Game service and Account kit.
Creating Quick Game
Step 1: Sign in to AppGallery Connect and click My apps.
Step 2: Click New App.
Step 3: Add all required information, then click OK.
Parameters information
Step 4: Navigate to project setting > General information add package details.
Step 5: Add Default data processing location.
Generating and configuring a certificate fingerprint.
Create certificate
Step 1: Open Quick App IDE and open an existing project or create new project.
Step 2: Choose Tools > Certificate
Step 3: If signature is not yet created, select Create else if already exist select Import.
Step 4: Add necessary information and click Create.
Step 5: Copy SHA-256 certificate fingerprint from output.
Configure the Certificate fingerprint in AppGallery
Step 1: Sign in to AppGallery and click My project
Step 2: Select the project which you want to configure the certificate fingerprint.
Step 3: Navigate to Project Settings > General information in the App information and enter the copied SHA-256 certificate.
Enable Game service.
Step 1: Sign in to AppGallery and click My project.
Step 2: Select the project which you want to enable Game service and account kit.
Step 3: Navigate to Project Settings > Manage API and enable account kit and Game service.
Build the HTML5 Quick Game
HTML:
<!-- HTML5 Quick Game Access Guidance -->
<!-- https://developer.huawei.com/consumer/en/doc/development/quickApp-Guides/quickgame-develop-h5-game-->
<template>
<div class="doc-page">
<!-- Replace the link to the HTML5 game -->
<web class="web-page" src="{{gameUrl}}" type="game" trustedurl="{{list}}" onpagestart="onPageStart"
fullscreendirection="{{fullscreenDirection}}" jumppolicy="{{linkJumpPolicy}}" multiwindow="{{openMultiwindow}}"
onpagefinish="onPageFinish" ontitlereceive="onTitleReceive" onerror="onError" id="web"
allowthirdpartycookies="{{allowThirdPartyCookies}}">
</web>
</div>
</template>
<style>
.doc-page {
flex-direction: column;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
.web-page {
width: 100%;
height: 100%;
}
</style>
<script>
import router from "@system.router"
import prompt from '@system.prompt'
export default {
props: ['websrc'],
data: {
title: "",
// TODO Replace the link to the H5 game
gameUrl: "https://codepen.io/timrijkse/full/XjLGKv/",
// Attribute allowthirdpartycookies, indicates whether cookies can be delivered in cross-domain mode.
// If you need login Google Account or Other Account, Please set TRUE.
allowThirdPartyCookies: true,
//Attribute fullscreendirection,controls the direction when the webpage requests full screen.
//If you want the full screen orientation to be vertical, please set it to portrait.
//The default value is landscape
fullscreenDirection: "landscape",
//If you want the ads in the game to be opened in the browser, please set the value of openMultiwindow
// to true and the value of linkJumpPolicy to browser
linkJumpPolicy: "default",
openMultiwindow: false,
// Here the trust list settings, when the loading page has multiple addresses, such as the successful loading of the login address and the inconsistent entry address, it needs to set the trust list to do so.
list: ["new RegExp('https?.*')"],
},
onPageStart(e) {
console.info('pagestart: ' + e.url)
},
// Each page switch triggers
onPageFinish(e) {
console.info('pagefinish: ' + e.url, e.canBack, e.canForward)
},
onTitleReceive(e) {
this.title = e.title;
},
onError(e) {
console.info('pageError : ' + e.errorMsg)
},
onMessage(e) {
console.info('onmessage e = ' + e.message + ", url = " + e.url);
prompt.showToast({
message: e.message + ': ' + e.url
})
},
isCanForward() {
this.$element('web').canForward({
callback: function (e) {
if (e) {
this.$element('web').forward();
}
}.bind(this)
})
},
isCanBack() {
this.$element('web').canBack({
callback: function (e) {
if (e) {
this.$element('web').back();
} else {
router.back();
}
}.bind(this)
})
},
onShow: function () {
console.info(" onshow");
},
onHide: function () {
console.info(" onHide");
},
onBackPress() {
const prompt = require('@system.prompt')
prompt.showDialog({
message: 'Whether to quit the html5 game?',
buttons: [
{
text: 'Cancel'
},
{
text: 'Exit'
}
],
success: (data) => {
console.log('handling callback', data.index)
if (data.index === 1) {
this.$app.exit()
}
},
cancel: function () {
console.log('handling cancel')
},
fail: function (data, code) {
console.log(`handling fail, code = ${code}`)
}
})
return true
},
}
</script>
Result
Tips and Tricks
Understand About Quick Game.
Explore some Quick Game from phone.
Install all the required tools.
Make sure you have configured the adb in the desktop or laptop.
Command to install Quick App loader APK is adb install quickapploader.apk
Enable Game service and account kit.
Conclusion
In this article, we have learnt about creating Quick Game, generating and configuring the SHA-256 fingerprint certificate, Enabling game service and account kit and building HTML5 Quick Game application.
Reference
Quick Game official document
Download tools from here
Beginner: Find the Explanation of Quick Game Part 1

---

thanks for sharing