×
Namespaces

Variants
Actions

Reflex game with QML

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code Example
Source file: Media:Reflex.zip
Compatibility
Platform(s):
Symbian
Article
Created: vasant21 (27 Feb 2011)
Last edited: hamishwillee (26 Jul 2012)

Contents

Introduction

This example is for QML beginners, shows how to develop a simple reflex test game including gaming logic. Reflex game is based on users reflexes, i.e. how quickly user is able to react to the changes on screen and act according, game screen shows 4 closed windows, at any given point, any of the window is opened randomly for a very short span of time, user has to tap on the open window while its open to get a point.

Pre-Conditions

  • Nokia Qt Sdk 1.1 Technology Preview is Installed
  • Assumption is that you have created a QT Quick Application using QT Creator template
   -> go to "File" -> "New File or Project" -> "Qt Quick Project" -> "Qt Quick Application"

UI Code

import QtQuick 1.0
 
Rectangle {
 
id: container
color : "red"
property variant score: 0
property variant systemScore : 0
property variant totalWindowsInRow : 2
property variant totalWindowsInColumn : 2
property variant windowBorderWidth : 5
property bool visited : false
 
 
/* GAME LOGIC */
Timer {
id: closeWindowTimer
running: false
repeat : false
interval: 400
onTriggered: {
hideImages()
}
}
 
Timer {
id: openWindowTimer
running: false
interval: 700
onTriggered: {
hideImages()
 
++systemScore
visited = false
 
var randNo = Math.floor(Math.random() * 100)
 
console.log("random no is " + randNo)
if( randNo % 4 == 0){
console.log("selecting 4th")
window_4_img.source = "open.jpg"
}
else if(randNo % 3 == 0){
console.log("selecting 3rd")
window_3_img.source = "open.jpg"
}
else if(randNo % 2 == 0){
console.log("selecting 2nd")
window_2_img.source = "open.jpg"
}
else{
console.log("selecting 1st")
window_1_img.source = "open.jpg"
}
 
startHideTimer();
refreshScore();
 
}
}
 
 
function hideImages(){
window_1_img.source = "closed.jpg"
window_2_img.source = "closed.jpg"
window_3_img.source = "closed.jpg"
window_4_img.source = "closed.jpg"
}
 
function onButtonClicked(){
if( openWindowTimer.running == false){
console.log("Game started")
systemScore = 0
container.score = 0
openWindowTimer.repeat = true
startBtnText.text = "Stop"
openWindowTimer.start()
refreshScore()
}else{
console.log("Game Stopped")
startBtnText.text = "Start"
openWindowTimer.stop();
 
}
}
 
function refreshScore(){
var txt = " Hits : " + container.score + " of " + systemScore;
scoreText.text = txt;
console.log(scoreText.text)
}
 
function onShoot(imgSource){
console.log("---------------- onShoot ------------")
if( visited == false){
console.log("Window.source " + imgSource)
var ss = new String(imgSource)
if( ss.indexOf("open.jpg") != -1 )
++container.score
visited = true
}
 
refreshScore();
}
 
function startHideTimer(){
closeWindowTimer.stop()
closeWindowTimer.start()
}
 
/* GAME UI */
Rectangle {
id : window_1
width: parent.width / totalWindowsInRow
height: (parent.height / totalWindowsInColumn ) - startBtn.height
border.color: "black"
border.width: windowBorderWidth
x:parent.x
 
 
Image {
id: window_1_img
source : "closed.jpg"
visible : true
x:windowBorderWidth
y:windowBorderWidth
height: parent.height - (windowBorderWidth * 2)
width: parent.width - (windowBorderWidth * 2)
 
}
MouseArea {
anchors.fill: parent
onClicked:{
console.log("pressed left rect")
onShoot(window_1_img.source)
}
}
 
}
 
Rectangle {
id: window_2
width: parent.width / totalWindowsInRow
height: (parent.height / totalWindowsInColumn ) - startBtn.height
border.color: "black"
border.width: windowBorderWidth
x: parent.width / (totalWindowsInRow)
Image {
id: window_2_img
source : "closed.jpg"
visible : true
x:windowBorderWidth
y:windowBorderWidth
height: parent.height - (windowBorderWidth * 2)
width: parent.width - (windowBorderWidth * 2)
 
}
 
MouseArea {
anchors.fill: parent
onClicked:{
console.log("pressed right rect")
onShoot(window_2_img.source)
}
}
 
}
 
Rectangle {
id : window_3
width: parent.width / totalWindowsInRow
height:(parent.height / totalWindowsInColumn ) - startBtn.height
border.color: "black"
border.width: windowBorderWidth
x:parent.x
y: (parent.height / totalWindowsInColumn ) - 10
Image {
id: window_3_img
source : "closed.jpg"
visible : true
x:windowBorderWidth
y:windowBorderWidth
height: parent.height - (windowBorderWidth * 2)
width: parent.width - (windowBorderWidth * 2)
 
}
MouseArea {
anchors.fill: parent
onClicked:{
console.log("pressed left rect")
onShoot(window_3_img.source)
}
}
 
}
 
Rectangle {
id : window_4
width: parent.width / totalWindowsInRow
height:(parent.height / totalWindowsInColumn ) - startBtn.height
border.color: "black"
border.width: windowBorderWidth
x:parent.width / (totalWindowsInRow )
y:parent.height / totalWindowsInColumn - 10
Image {
id: window_4_img
source : "closed.jpg"
visible : true
x:windowBorderWidth
y:windowBorderWidth
height: parent.height - (windowBorderWidth * 2)
width: parent.width - (windowBorderWidth * 2)
 
}
MouseArea {
anchors.fill: parent
onClicked:{
console.log("pressed left rect")
onShoot(window_4_img.source)
}
}
 
}
 
 
 
 
Rectangle {
id : startBtn
property variant text
height: startBtnText.height
width: (container.width / 2 ) - 5
border.width: 1
radius: 4
smooth: true
 
y: container.height - startBtnText.height
 
gradient: Gradient {
GradientStop {
position: 0.0
color: !mouseArea.pressed ? activePalette.light : activePalette.button
}
GradientStop {
position: 1.0
color: !mouseArea.pressed ? activePalette.button : activePalette.dark
}
}
 
SystemPalette { id: activePalette }
 
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: {
container.onButtonClicked();
}
}
 
Text {
id: startBtnText
anchors.centerIn:parent
font.pointSize: 10
text: "Start"
color: activePalette.buttonText
}
}
 
 
Rectangle {
id: score
border.color: "black"
border.width: 2
height: container.height - ( window_1.height * (totalWindowsInColumn-1) )
width: (container.width / 2 ) - 5
y: startBtn.y
x: container.width / 2
Text {
id: scoreText
text: "Hits : 0 of 0"
}
}
 
 
}

Sources and Installable File

Zip file below contains the game sources and sis, you can import the project with QT Creator and start studying/extending the example File:Reflex.zip

Screen Shots

Scr000001.jpg

Scr000004.jpg

This page was last modified on 26 July 2012, at 08:39.
56 page views in the last 30 days.
×