Qt es un marco multiplataforma, generalmente utilizado como un conjunto de herramientas gráficas, no solo es muy útil para crear aplicaciones CLI. Y también puede ejecutarse en los tres principales sistemas operativos de escritorio y sistemas operativos móviles (como Symbian, Nokia Belle, Meego Harmattan, MeeGo o BB10) y dispositivos integrados, puertos Android (Necessitas) e iOS. Ahora le proporcionamos una versión de prueba gratuita.
Descargue la última versión de prueba de Qt6
Recomendaciones de componentes de Qt:
- QtitanRibbon | Descargue y pruebe : Componentes de la interfaz de usuario de Ribbon que siguen el paradigma de la interfaz de usuario de Ribbon de Microsoft para la tecnología Qt, y se comprometen a proporcionar componentes de Ribbon con todas las funciones para Windows, Linux y Mac OS X.
- QtitanChart | Descargar y probar : es una biblioteca de C ++ que representa un conjunto de controles que le permiten proporcionar rápidamente gráficos hermosos y ricos para su aplicación. Y es compatible con todos los principales escritorios.
- QtitanNavigation | Descargar y probar : El componente QtitanNavigation que simula la interfaz de navegación de Microsoft Dynamics CRM-2016 / Office 365 y un conjunto de controles para mejorar la experiencia del usuario de las aplicaciones Qt.C ++.
A través de la explicación de los dos primeros capítulos ( creando el lienzo del juego y los bloques , llenando el lienzo del juego ), ahora tenemos todos los componentes del juego, podemos agregar la lógica del juego, que estipula cómo el jugador interactúa con los bloques y cómo jugar el juego. juego hasta que ganen o pierdan.
Con este fin, agregamos las siguientes funciones a samegame.js:
- handleClick (x, y)
- floodFill (xIdx, yIdx, tipo)
- shuffleDown ()
- VictoryCheck ()
- floodMoveCheck (xIdx, yIdx, tipo)
Dado que este es un tutorial sobre QML, no un tutorial sobre el diseño de juegos, solo discutiremos handleClick () y victoryCheck () a continuación porque interactúan directamente con los tipos de QML. Tenga en cuenta que, aunque la lógica del juego aquí está escrita en JavaScript.
Habilitar la interacción con el clic del mouse
Para una interfaz de código JavaScript y un tipo QML más convenientes, hemos agregado un proyecto llamado gameCanvas a samegame.qml. Reemplaza el fondo con el proyecto que contiene el bloque. También acepta la entrada del mouse del usuario. Este es el código del producto:
Item {
id: gameCanvas
property int score: 0
property int blockSize: 40
width: parent.width - (parent.width % blockSize)
height: parent.height - (parent.height % blockSize)
anchors.centerIn: parent
MouseArea {
anchors.fill: parent
onClicked: SameGame.handleClick(mouse.x, mouse.y)
}
}El elemento gameCanvas tiene el tamaño exacto del tablero, y tiene un atributo de puntuación y un MouseArea para manejar los clics del mouse. El bloque se crea ahora como su subelemento y su tamaño se usa para determinar el tamaño del tablero, de modo que la aplicación se pueda escalar de acuerdo con el tamaño de pantalla disponible. Debido a que su tamaño está vinculado a un múltiplo de blockSize, blockSize se mueve fuera de samegame.js y se mueve a samegame.qml como un atributo QML. Tenga en cuenta que aún se puede acceder desde el script.
Cuando se hace clic, MouseArea llamará a handleClick () en samegame.js, que determina si el clic del jugador hará que se eliminen los bloques y, si es necesario, actualizará gameCanvas.score con la puntuación actual. Aquí está la función handleClick ().
function handleClick(xPos, yPos) {
var column = Math.floor(xPos / gameCanvas.blockSize);
var row = Math.floor(yPos / gameCanvas.blockSize);
if (column >= maxColumn || column < 0 || row >= maxRow || row < 0)
return;
if (board[index(column, row)] == null)
return;
//If it's a valid block, remove it and all connected (does nothing if it's not connected)
floodFill(column, row, -1);
if (fillFound <= 0)
return;
gameCanvas.score += (fillFound - 1) * (fillFound - 1);
shuffleDown();
victoryCheck();
}Tenga en cuenta que si la puntuación es una variable global en el archivo samegame.js, no estará vinculada a ese archivo. Solo puede enlazar a atributos QML.
Actualizar puntuación
Cuando el jugador hace clic en un bloque y activa handleClick (), handleClick () también llamará a victoryCheck () para actualizar la puntuación y comprobar si el jugador ha completado el juego. Este es el código victoryCheck ():
function victoryCheck() {
//Award bonus points if no blocks left
var deservesBonus = true;
for (var column = maxColumn - 1; column >= 0; column--)
if (board[index(column, maxRow - 1)] != null)
deservesBonus = false;
if (deservesBonus)
gameCanvas.score += 500;
//Check whether game has finished
if (deservesBonus || !(floodMoveCheck(0, maxRow - 1, -1)))
dialog.show("Game Over. Your score is " + gameCanvas.score);
}gameCanvas.score Si el juego termina, el valor se actualiza y se muestra el cuadro de diálogo "Game Over".
El diálogo "Game Over" es Dialog.qml creado usando el tipo definido en Dialog. Este es el código Dialog.qml. Observe cómo forzar su uso desde el archivo de script a través de funciones y señales:
import QtQuick 2.0
Rectangle {
id: container
function show(text) {
dialogText.text = text;
container.opacity = 1;
}
function hide() {
container.opacity = 0;
}
width: dialogText.width + 20
height: dialogText.height + 20
opacity: 0
Text {
id: dialogText
anchors.centerIn: parent
text: ""
}
MouseArea {
anchors.fill: parent
onClicked: hide();
}
}Así es como se usa en el archivo principal samegame.qml:
Dialog {
id: dialog
anchors.centerIn: parent
z: 100
}Asignamos un valor z de 100 al cuadro de diálogo para asegurarnos de que se muestre encima de otros componentes. El valor z predeterminado del proyecto es 0.
Sprint de color
Si todos los bloques tienen el mismo color, no es divertido jugar al "mismo juego", así que modificamos la función createBlock (), samegame.js, para crear aleatoriamente diferentes tipos de bloques (para rojo, verde o azul). Block.qml también se ha modificado para que cada bloque contenga una imagen diferente, según su tipo:
import QtQuick 2.0
Item {
id: block
property int type: 0
Image {
id: img
anchors.fill: parent
source: {
if (type == 0)
return "../shared/pics/redStone.png";
else if (type == 1)
return "../shared/pics/blueStone.png";
else
return "../shared/pics/greenStone.png";
}
}
}Juego de trabajo
¡Ahora tenemos un juego que puede ejecutarse normalmente! Se puede hacer clic en el bloque, el jugador puede anotar, el juego puede terminar (luego puede comenzar uno nuevo). Esta es la captura de pantalla que se ha completado hasta ahora:
Así es como se ve el samegame.qml ahora:
import QtQuick 2.0
import "samegame.js" as SameGame
Rectangle {
id: screen
width: 490; height: 720
SystemPalette { id: activePalette }
Item {
width: parent.width
anchors { top: parent.top; bottom: toolBar.top }
Image {
id: background
anchors.fill: parent
source: "../shared/pics/background.jpg"
fillMode: Image.PreserveAspectCrop
}
Item {
id: gameCanvas
property int score: 0
property int blockSize: 40
width: parent.width - (parent.width % blockSize)
height: parent.height - (parent.height % blockSize)
anchors.centerIn: parent
MouseArea {
anchors.fill: parent
onClicked: SameGame.handleClick(mouse.x, mouse.y)
}
}
}
Dialog {
id: dialog
anchors.centerIn: parent
z: 100
}
Rectangle {
id: toolBar
width: parent.width; height: 30
color: activePalette.window
anchors.bottom: screen.bottom
Button {
anchors { left: parent.left; verticalCenter: parent.verticalCenter }
text: "New Game"
onClicked: SameGame.startNewGame()
}
Text {
id: score
anchors { right: parent.right; verticalCenter: parent.verticalCenter }
text: "Score: Who knows?"
}
}
}El juego funciona, pero ahora es un poco aburrido. ¿Dónde está la transición suave de la animación? ¿Dónde están las puntuaciones más altas? Si es un experto en QML, puede escribirlos en la primera iteración, pero en este tutorial, lo explicaremos en el siguiente capítulo: ¡su aplicación cobrará vida aquí!
================================================ ==
El grupo de intercambio técnico Qt ya está abierto, el grupo de búsqueda QQ número "765444821 " o escanee el código QR a continuación para unirse
