Warning, /webapps/qmlonline/qml/examples/pong.qml is written in an unsupported language. File is not indexed.
0001 import QtQuick 2.7 0002 import QtQuick.Controls 2.3 0003 0004 Rectangle { 0005 id: root 0006 color: "black" 0007 anchors.fill: parent 0008 0009 Text { 0010 id: player1Score 0011 text: "00" 0012 color: "white" 0013 anchors.top: parent.top 0014 anchors.left: parent.left 0015 font.family: pixelFontLoader.name 0016 font.pixelSize: 40 0017 0018 property int score: 0 0019 function increaseScore() { 0020 score += 1 0021 text = score < 10 ? "0" + score : score 0022 } 0023 } 0024 0025 Text { 0026 id: player2Score 0027 text: "00" 0028 color: "white" 0029 anchors.top: parent.top 0030 anchors.right: parent.right 0031 font.family: pixelFontLoader.name 0032 font.pixelSize: 40 0033 0034 property int score: 0 0035 function increaseScore() { 0036 score += 1 0037 text = score < 10 ? "0" + score : score 0038 } 0039 } 0040 0041 Item { 0042 z: 100000 0043 focus: true 0044 anchors.fill: parent 0045 0046 Keys.onPressed: { 0047 switch(event.key) { 0048 case Qt.Key_Up: { 0049 moveDelta(player1, -5) 0050 break; 0051 } 0052 case Qt.Key_Down: { 0053 moveDelta(player1, 5) 0054 break; 0055 } 0056 } 0057 } 0058 } 0059 0060 Rectangle { 0061 id: player1 0062 color: "white" 0063 width: 10 0064 height: 50 0065 y: (root.height - height) / 2 0066 anchors.left: parent.left 0067 anchors.margins: 4 0068 } 0069 0070 Rectangle { 0071 id: player2 0072 color: "white" 0073 width: 10 0074 height: 50 0075 anchors.right: parent.right 0076 anchors.margins: 4 0077 0078 y: { // You'll never win :P 0079 //(root.height - height) / 2 0080 return calculateCenter(rect).y - height / 2 - 25 * (calculateCenter(rect).y - root.height / 2) / (root.height / 2) 0081 } 0082 } 0083 0084 0085 Rectangle { 0086 id: rect 0087 width: 9 0088 height: width 0089 color: "white" 0090 x: (root.width - width) / 2 0091 y: (root.height - height) / 2 0092 0093 property point direction: { 0094 return Qt.point(-1, 0) 0095 } 0096 } 0097 0098 transitions: Transition { 0099 AnchorAnimation { duration: 500 } 0100 } 0101 0102 function moveDelta(player, delta) { 0103 if (player.y + delta < 0) { 0104 player.y = 0 0105 return 0106 } 0107 if (player.y + delta > root.height - player.height) { 0108 player.y = root.height - player.height 0109 return 0110 } 0111 0112 player.y += delta 0113 } 0114 0115 function reset(item) { 0116 item.x = (root.width - item.width) / 2 0117 item.y = (root.height - item.height) / 2 0118 item.direction = Qt.point(-1, 0) 0119 } 0120 0121 function calculateCenter(item) { 0122 return Qt.point(item.width / 2 + item.x, item.height / 2 + item.y) 0123 } 0124 0125 function calculateHitVector(first, second) { 0126 // We calculate the radius only based in width 0127 // since the game is mostly horizontal 0128 var firstRadius = first.width / 2 0129 var secondRadius = first.width / 2 0130 0131 // Vertical collision detection 0132 if(first.y < second.y + second.height 0133 && first.y + first.height > second.y) { 0134 // Horizontal collision detection 0135 if(first.x + first.width >= second.x 0136 && first.x <= second.x + second.width) { 0137 rect.direction.x *= -1.1 0138 rect.direction.x = rect.direction.x > 8 ? 8 : rect.direction.x 0139 0140 var vector1 = calculateCenter(first) 0141 var vector2 = calculateCenter(second) 0142 var vector = Qt.point(vector1.x - vector2.x, vector1.y - vector2.y) 0143 var tan = Math.atan2(vector.x, vector.y) 0144 rect.direction.y = -Math.cos(tan) 0145 } 0146 } 0147 } 0148 0149 function calculateWallHitVector(item) { 0150 if(item.y <= 0 || item.y + item.height >= root.height) { 0151 rect.direction.y *= -1 0152 } 0153 0154 if(item.x > root.width) { 0155 player1Score.increaseScore() 0156 reset(rect) 0157 } 0158 0159 if(item.x + item.width < 0) { 0160 player2Score.increaseScore() 0161 reset(rect) 0162 } 0163 } 0164 0165 // 60Hz engine 0166 Timer { 0167 running: true; repeat: true; interval: 1000/60 0168 onTriggered: { 0169 calculateWallHitVector(rect) 0170 calculateHitVector(player1, rect) 0171 calculateHitVector(player2, rect) 0172 rect.x += rect.direction.x 0173 rect.y += rect.direction.y 0174 } 0175 } 0176 0177 FontLoader { 0178 id: pixelFontLoader 0179 source: "https://patrickelectric.work/qmlonline/resources/FreePixel.ttf" 0180 } 0181 }