simplified the UI structure

master
Qiaoyong Zhong 11 years ago
parent 05e4d2e405
commit c1fcb03490

1
.gitignore vendored

@ -0,0 +1 @@
2048_qt.pro.user

@ -0,0 +1,2 @@
# 2048-Qt
A clone of [2048](https://github.com/gabrielecirulli/2048), implemented in Qt.

@ -2,6 +2,7 @@ import QtQuick 2.2
import QtQuick.Controls 1.1 import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1 import QtQuick.Controls.Styles 1.1
import QtQuick.Dialogs 1.1 import QtQuick.Dialogs 1.1
import QtQuick.Window 2.1
import "2048.js" as MyScript import "2048.js" as MyScript
ApplicationWindow { ApplicationWindow {
@ -10,29 +11,31 @@ ApplicationWindow {
height: 730 height: 730
title: qsTr("2048 Game"); title: qsTr("2048 Game");
Rectangle { x: (Screen.width - width) / 2
anchors.fill: parent y: (Screen.height - height) / 2
Item { Item {
id: helper id: helper
property var myColors: {"bglight": "#FAF8EF", property var myColors: {"bglight": "#FAF8EF",
"bggray": Qt.rgba(238/255, 228/255, 218/255, 0.35), "bggray": Qt.rgba(238/255, 228/255, 218/255, 0.35),
"bgdark": "#BBADA0", "bgdark": "#BBADA0",
"fglight": "#EEE4DA", "fglight": "#EEE4DA",
"fgdark": "#776E62", "fgdark": "#776E62",
"bgbutton": "#8F7A66", // Background color for the "New Game" button "bgbutton": "#8F7A66", // Background color for the "New Game" button
"fgbutton": "#F9F6F2" // Foreground color for the "New Game" button "fgbutton": "#F9F6F2" // Foreground color for the "New Game" button
}
} }
}
color: helper.myColors.bglight
Item {
anchors.fill: parent
anchors.margins: 30
color: helper.myColors.bglight
focus: true focus: true
Keys.onPressed: MyScript.moveKey(event) Keys.onPressed: MyScript.moveKey(event)
Text { Text {
id: gameName id: gameName
x: 30
y: 30
font.pixelSize: 55 font.pixelSize: 55
font.bold: true font.bold: true
text: "2048" text: "2048"
@ -40,9 +43,7 @@ ApplicationWindow {
} }
Row { Row {
y: 30
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 30
spacing: 5 spacing: 5
Repeater { Repeater {
id: scoreBoard id: scoreBoard
@ -74,8 +75,7 @@ ApplicationWindow {
Text { Text {
id: banner id: banner
x: 30 y: 90
y: 120
height: 40 height: 40
text: "Join the numbers and get to the <b>2048 tile!</b>" text: "Join the numbers and get to the <b>2048 tile!</b>"
color: helper.myColors.fgdark color: helper.myColors.fgdark
@ -86,9 +86,8 @@ ApplicationWindow {
Button { Button {
width: 129 width: 129
height: 40 height: 40
y: 120 y: 90
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 30
style: ButtonStyle { style: ButtonStyle {
background: Rectangle { background: Rectangle {
@ -107,8 +106,7 @@ ApplicationWindow {
} }
Rectangle { Rectangle {
x: 30 y: 170
y: 200
width: 500 width: 500
height: 500 height: 500
color: helper.myColors.bgdark color: helper.myColors.bgdark

Loading…
Cancel
Save