diff options
Diffstat (limited to 'examples/declarative/tutorials/samegame/samegame4')
18 files changed, 500 insertions, 0 deletions
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml new file mode 100644 index 0000000..2eb2ceb --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml @@ -0,0 +1,63 @@ +import Qt 4.6 + +Item { id:block + property int type: 0 + property bool dying: false + //![1] + property bool spawned: false + property int targetX: 0 + property int targetY: 0 + + x: SpringFollow { enabled: spawned; source: targetX; spring: 2; damping: 0.2 } + y: SpringFollow { source: targetY; spring: 2; damping: 0.2 } + //![1] + + //![2] + Image { id: img + source: { + if(type == 0){ + "pics/redStone.png"; + } else if(type == 1) { + "pics/blueStone.png"; + } else { + "pics/greenStone.png"; + } + } + opacity: 0 + opacity: Behavior { NumberAnimation { matchProperties:"opacity"; duration: 200 } } + anchors.fill: parent + } + //![2] + + //![3] + Particles { id: particles + width:1; height:1; anchors.centerIn: parent; + emissionRate: 0; + lifeSpan: 700; lifeSpanDeviation: 600; + angle: 0; angleDeviation: 360; + velocity: 100; velocityDeviation:30; + source: { + if(type == 0){ + "pics/redStar.png"; + } else if (type == 1) { + "pics/blueStar.png"; + } else { + "pics/greenStar.png"; + } + } + } + //![3] + + //![4] + states: [ + State{ name: "AliveState"; when: spawned == true && dying == false + PropertyChanges { target: img; opacity: 1 } + }, + State{ name: "DeathState"; when: dying == true + StateChangeScript { script: particles.burst(50); } + PropertyChanges { target: img; opacity: 0 } + StateChangeScript { script: block.destroy(1000); } + } + ] + //![4] +} diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Button.qml b/examples/declarative/tutorials/samegame/samegame4/content/Button.qml new file mode 100644 index 0000000..63cd555 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/Button.qml @@ -0,0 +1,25 @@ +import Qt 4.6 + +Rectangle { + id: container + + signal clicked + property string text: "Button" + + color: activePalette.button; smooth: true + width: txtItem.width + 20; height: txtItem.height + 6 + border.width: 1; border.color: Qt.darker(activePalette.button); radius: 8; + + gradient: Gradient { + GradientStop { + id: topGrad; position: 0.0 + color: if (mr.pressed) { activePalette.dark } else { activePalette.light } } + GradientStop { position: 1.0; color: activePalette.button } + } + + MouseRegion { id: mr; anchors.fill: parent; onClicked: container.clicked() } + + Text { + id: txtItem; text: container.text; anchors.centerIn: container; color: activePalette.buttonText + } +} diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml new file mode 100644 index 0000000..3371d53 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml @@ -0,0 +1,21 @@ +import Qt 4.6 + +Rectangle { + id: page + function forceClose() { + page.closed(); + page.opacity = 0; + } + function show(txt) { + myText.text = txt; + page.opacity = 1; + } + signal closed(); + color: "white"; border.width: 1; width: myText.width + 20; height: 60; + opacity: 0 + opacity: Behavior { + NumberAnimation { duration: 1000 } + } + Text { id: myText; anchors.centerIn: parent; text: "Hello World!" } + MouseRegion { id: mr; anchors.fill: parent; onClicked: forceClose(); } +} diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/background.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/background.png Binary files differnew file mode 100644 index 0000000..3734a27 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/background.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStar.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStar.png Binary files differnew file mode 100644 index 0000000..ff9588f --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStar.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStone.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStone.png Binary files differnew file mode 100644 index 0000000..20e43c7 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStone.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStar.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStar.png Binary files differnew file mode 100644 index 0000000..cd06854 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStar.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStone.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStone.png Binary files differnew file mode 100644 index 0000000..b568a19 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStone.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/redStar.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/redStar.png Binary files differnew file mode 100644 index 0000000..0a4dffe --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/redStar.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/redStone.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/redStone.png Binary files differnew file mode 100644 index 0000000..36b09a2 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/redStone.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/star.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/star.png Binary files differnew file mode 100644 index 0000000..defbde5 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/star.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/yellowStone.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/yellowStone.png Binary files differnew file mode 100644 index 0000000..b1ce762 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/yellowStone.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/samegame.js b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js new file mode 100755 index 0000000..2a0d718 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js @@ -0,0 +1,249 @@ +/* This script file handles the game logic */ +//Note that X/Y referred to here are in game coordinates +var maxX = 10;//Nums are for gameCanvas.tileSize 40 +var maxY = 15; +var maxIndex = maxX*maxY; +var board = new Array(maxIndex); +var tileSrc = "content/BoomBlock.qml"; +//var scoresURL = "http://qtfx-nokia.trolltech.com.au/samegame/scores.php"; +var scoresURL = ""; +var timer; +var component = createComponent(tileSrc); + +//Index function used instead of a 2D array +function index(xIdx,yIdx) { + return xIdx + (yIdx * maxX); +} + +function timeStr(msecs) { + var secs = Math.floor(msecs/1000); + var m = Math.floor(secs/60); + var ret = "" + m + "m " + (secs%60) + "s"; + return ret; +} + +function getTileSize() +{ + return tileSize; +} + +function initBoard() +{ + for(var i = 0; i<maxIndex; i++){ + //Delete old blocks + if(board[i] != null) + board[i].destroy(); + } + + //Calculate board size + maxX = Math.floor(gameCanvas.width/gameCanvas.tileSize); + maxY = Math.floor(gameCanvas.height/gameCanvas.tileSize); + maxIndex = maxY*maxX; + + //Close dialogs + scoreName.forceClose(); + dialog.forceClose(); + + var a = new Date(); + //Initialize Board + board = new Array(maxIndex); + gameCanvas.score = 0; + for(var xIdx=0; xIdx<maxX; xIdx++){ + for(var yIdx=0; yIdx<maxY; yIdx++){ + board[index(xIdx,yIdx)] = null; + createBlock(xIdx,yIdx); + } + } + timer = new Date(); + + print(timer.valueOf() - a.valueOf()); +} + +var fillFound;//Set after a floodFill call to the number of tiles found +var floodBoard;//Set to 1 if the floodFill reaches off that node +//NOTE: Be careful with vars named x,y, as the calling object's x,y are still in scope +function handleClick(x,y) +{ + var xIdx = Math.floor(x/gameCanvas.tileSize); + var yIdx = Math.floor(y/gameCanvas.tileSize); + if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0) + return; + if(board[index(xIdx, yIdx)] == null) + return; + //If it's a valid tile, remove it and all connected (does nothing if it's not connected) + floodFill(xIdx,yIdx, -1); + if(fillFound <= 0) + return; + gameCanvas.score += (fillFound - 1) * (fillFound - 1); + shuffleDown(); + victoryCheck(); +} + +function floodFill(xIdx,yIdx,type) +{ + if(board[index(xIdx, yIdx)] == null) + return; + var first = false; + if(type == -1){ + first = true; + type = board[index(xIdx,yIdx)].type; + + //Flood fill initialization + fillFound = 0; + floodBoard = new Array(maxIndex); + } + if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0) + return; + if(floodBoard[index(xIdx, yIdx)] == 1 || (!first && type != board[index(xIdx,yIdx)].type)) + return; + floodBoard[index(xIdx, yIdx)] = 1; + floodFill(xIdx+1,yIdx,type); + floodFill(xIdx-1,yIdx,type); + floodFill(xIdx,yIdx+1,type); + floodFill(xIdx,yIdx-1,type); + if(first==true && fillFound == 0) + return;//Can't remove single tiles + board[index(xIdx,yIdx)].dying = true; + board[index(xIdx,yIdx)] = null; + fillFound += 1; +} + +function shuffleDown() +{ + //Fall down + for(var xIdx=0; xIdx<maxX; xIdx++){ + var fallDist = 0; + for(var yIdx=maxY-1; yIdx>=0; yIdx--){ + if(board[index(xIdx,yIdx)] == null){ + fallDist += 1; + }else{ + if(fallDist > 0){ + var obj = board[index(xIdx,yIdx)]; + obj.targetY += fallDist * gameCanvas.tileSize; + board[index(xIdx,yIdx+fallDist)] = obj; + board[index(xIdx,yIdx)] = null; + } + } + } + } + //Fall to the left + fallDist = 0; + for(xIdx=0; xIdx<maxX; xIdx++){ + if(board[index(xIdx, maxY - 1)] == null){ + fallDist += 1; + }else{ + if(fallDist > 0){ + for(yIdx=0; yIdx<maxY; yIdx++){ + obj = board[index(xIdx,yIdx)]; + if(obj == null) + continue; + obj.targetX -= fallDist * gameCanvas.tileSize; + board[index(xIdx-fallDist,yIdx)] = obj; + board[index(xIdx,yIdx)] = null; + } + } + } + } +} + +function victoryCheck() +{ + //awards bonuses for no tiles left + var deservesBonus = true; + for(var xIdx=maxX-1; xIdx>=0; xIdx--) + if(board[index(xIdx, maxY - 1)] != null) + deservesBonus = false; + if(deservesBonus) + gameCanvas.score += 500; + //Checks for game over + if(deservesBonus || !(floodMoveCheck(0,maxY-1, -1))){ + timer = new Date() - timer; + scoreName.show("You won! Please enter your name: "); + //dialog.show("Game Over. Your score is " + gameCanvas.score); + } +} + +//only floods up and right, to see if it can find adjacent same-typed tiles +function floodMoveCheck(xIdx, yIdx, type) +{ + if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0) + return false; + if(board[index(xIdx, yIdx)] == null) + return false; + var myType = board[index(xIdx, yIdx)].type; + if(type == myType) + return true; + return floodMoveCheck(xIdx + 1, yIdx, myType) || + floodMoveCheck(xIdx, yIdx - 1, board[index(xIdx,yIdx)].type); +} + +function createBlock(xIdx,yIdx){ + // Note that we don't wait for the component to become ready. This will + // only work if the block QML is a local file. Otherwise the component will + // not be ready immediately. There is a statusChanged signal on the + // component you could use if you want to wait to load remote files. + if(component.isReady){ + var dynamicObject = component.createObject(); + if(dynamicObject == null){ + print("error creating block"); + print(component.errorsString()); + return false; + } + dynamicObject.type = Math.floor(Math.random() * 3); + dynamicObject.parent = gameCanvas; + dynamicObject.x = xIdx*gameCanvas.tileSize; + dynamicObject.targetX = xIdx*gameCanvas.tileSize; + dynamicObject.targetY = yIdx*gameCanvas.tileSize; + dynamicObject.width = gameCanvas.tileSize; + dynamicObject.height = gameCanvas.tileSize; + dynamicObject.spawned = true; + board[index(xIdx,yIdx)] = dynamicObject; + }else{//isError or isLoading + print("error loading block component"); + print(component.errorsString()); + return false; + } + return true; +} + +//![2] +function saveHighScore(name) { + if(scoresURL!="") + sendHighScore(name); + //OfflineStorage + var db = openDatabaseSync("SameGameScores", "1.0", "Local SameGame High Scores",100); + var dataStr = "INSERT INTO Scores VALUES(?, ?, ?, ?)"; + var data = [name, gameCanvas.score, maxX+"x"+maxY ,Math.floor(timer/1000)]; + db.transaction( + function(tx) { + tx.executeSql('CREATE TABLE IF NOT EXISTS Scores(name TEXT, score NUMBER, gridSize TEXT, time NUMBER)'); + tx.executeSql(dataStr, data); + + var rs = tx.executeSql('SELECT * FROM Scores WHERE gridSize = "12x17" ORDER BY score desc LIMIT 10'); + var r = "\nHIGH SCORES for a standard sized grid\n\n" + for(var i = 0; i < rs.rows.length; i++){ + r += (i+1)+". " + rs.rows.item(i).name +' got ' + + rs.rows.item(i).score + ' points in ' + + rs.rows.item(i).time + ' seconds.\n'; + } + dialog.show(r); + } + ); +} +//![2] + +//![1] +function sendHighScore(name) { + var postman = new XMLHttpRequest() + var postData = "name="+name+"&score="+gameCanvas.score + +"&gridSize="+maxX+"x"+maxY +"&time="+Math.floor(timer/1000); + postman.open("POST", scoresURL, true); + postman.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + postman.onreadystatechange = function() { + if (postman.readyState == postman.DONE) { + dialog.show("Your score has been uploaded."); + } + } + postman.send(postData); +} +//![1] diff --git a/examples/declarative/tutorials/samegame/samegame4/highscores/README b/examples/declarative/tutorials/samegame/samegame4/highscores/README new file mode 100644 index 0000000..eaa00fa --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/highscores/README @@ -0,0 +1 @@ +The SameGame example can interface with a simple PHP script to store XML high score data on a remote server. We do not have a publically accessible server available for this use, but if you have access to a PHP capable webserver you can copy the files (score_data.xml, score.php, score_style.xsl) to it and alter the highscore_server variable at the top of the samegame.js file to point to it. diff --git a/examples/declarative/tutorials/samegame/samegame4/highscores/score_data.xml b/examples/declarative/tutorials/samegame/samegame4/highscores/score_data.xml new file mode 100755 index 0000000..c3fd90d --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/highscores/score_data.xml @@ -0,0 +1,2 @@ +<record><score>1000000</score><name>Alan the Tester</name><gridSize>0x0</gridSize><seconds>0</seconds></record> +<record><score>6213</score><name>Alan</name><gridSize>12x17</gridSize><seconds>51</seconds></record> diff --git a/examples/declarative/tutorials/samegame/samegame4/highscores/score_style.xsl b/examples/declarative/tutorials/samegame/samegame4/highscores/score_style.xsl new file mode 100755 index 0000000..670354c --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/highscores/score_style.xsl @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="ISO-8859-1"?> +<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> +<xsl:template match="/"> + <html> + <head><title>SameGame High Scores</title></head> + <body> + <h2>SameGame High Scores</h2> + <table border="1"> + <tr bgcolor="lightsteelblue"> + <th>Name</th> + <th>Score</th> + <th>Grid Size</th> + <th>Time, s</th> + </tr> + <xsl:for-each select="records/record"> + <xsl:sort select="score" data-type="number" order="descending"/> + <tr> + <td><xsl:value-of select="name"/></td> + <td><xsl:value-of select="score"/></td> + <td><xsl:value-of select="gridSize"/></td> + <td><xsl:value-of select="seconds"/></td> + </tr> + </xsl:for-each> + </table> + </body> + </html> +</xsl:template> +</xsl:stylesheet> diff --git a/examples/declarative/tutorials/samegame/samegame4/highscores/scores.php b/examples/declarative/tutorials/samegame/samegame4/highscores/scores.php new file mode 100755 index 0000000..3cceb2d --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/highscores/scores.php @@ -0,0 +1,34 @@ +<?php + $score = $_POST["score"]; + echo "<html>"; + echo "<head><title>SameGame High Scores</title></head><body>"; + if($score > 0){#Sending in a new high score + $name = $_POST["name"]; + $grid = $_POST["gridSize"]; + $time = $_POST["time"]; + if($name == "") + $name = "Anonymous"; + //if($grid != "10x10"){ + //Need a standard, so as to reject others? + //} + $file = fopen("score_data.xml", "a"); #It's XML. Happy? + $ret = fwrite($file, "<record><score>". $score . "</score><name>" + . $name . "</name><gridSize>" . $grid . "</gridSize><seconds>" + . $time . "</seconds></record>\n"); + echo "Your score has been recorded. Thanks for playing!"; + if($ret == False) + echo "<br/> There was an error though, so don't expect to see that score again."; + }else{#Read high score list + #Now uses XSLT to display. So just print the file. With XML cruft added. + #Note that firefox at least won't apply the XSLT on a php file. So redirecting + $file = fopen("scores.xml", "w"); + $ret = fwrite($file, '<?xml version="1.0" encoding="ISO-8859-1"?>' . "\n" + . '<?xml-stylesheet type="text/xsl" href="score_style.xsl"?>' . "\n" + . "<records>\n" . file_get_contents("score_data.xml") . "</records>\n"); + if($ret == False) + echo "There was an internal error. Sorry."; + else + echo '<script type="text/javascript">window.location.replace("scores.xml")</script>'; + } + echo "</body></html>"; +?> diff --git a/examples/declarative/tutorials/samegame/samegame4/samegame.qml b/examples/declarative/tutorials/samegame/samegame4/samegame.qml new file mode 100644 index 0000000..19b929f --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/samegame.qml @@ -0,0 +1,77 @@ +import Qt 4.6 +import "content" + +Rectangle { + id: screen + width: 490; height: 720 + + SystemPalette { id: activePalette } + + Item { + width: parent.width; anchors.top: parent.top; anchors.bottom: toolBar.top + + Image { + id: background + anchors.fill: parent; source: "content/pics/background.png" + fillMode: Image.PreserveAspectCrop + } + + Item { + id: gameCanvas + property int score: 0 + property int tileSize: 40 + + Script { source: "content/samegame.js" } + + z: 20; anchors.centerIn: parent + width: parent.width - (parent.width % getTileSize()); + height: parent.height - (parent.height % getTileSize()); + + MouseRegion { + id: gameMR + anchors.fill: parent; onClicked: handleClick(mouse.x,mouse.y); + } + } + } + + Dialog { id: dialog; anchors.centerIn: parent; z: 21 } + Dialog { + id: scoreName; anchors.centerIn: parent; z: 22; + Text { + id: spacer + opacity: 0 + text: " You won! Please enter your name:" + } + TextInput { + id: editor + onAccepted: { + if(scoreName.opacity==1&&editor.text!="") + saveHighScore(editor.text); + scoreName.forceClose(); + } + anchors.verticalCenter: parent.verticalCenter + width: 72; focus: true + anchors.left: spacer.right + } + } + + Rectangle { + id: toolBar + color: activePalette.window + height: 32; width: parent.width + anchors.bottom: screen.bottom + + Button { + id: btnA; text: "New Game"; onClicked: {initBoard();} + anchors.left: parent.left; anchors.leftMargin: 3 + anchors.verticalCenter: parent.verticalCenter + } + + Text { + id: score + text: "Score: " + gameCanvas.score; font.bold: true + anchors.right: parent.right; anchors.rightMargin: 3 + anchors.verticalCenter: parent.verticalCenter + } + } +} |
