Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tanks #129

Open
wants to merge 7 commits into
base: Develop
Choose a base branch
from
Open

Tanks #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
58d8e53
custom tank color
jessicayzhao Nov 19, 2024
7f59ce0
tank background
jessicayzhao Dec 8, 2024
57b2ca1
scoring view
jessicayzhao Dec 9, 2024
89eea0b
color change
jessicayzhao Dec 9, 2024
f600b4c
win lose view
jessicayzhao Dec 9, 2024
f7d3b21
color change
jessicayzhao Dec 9, 2024
ddddb61
move to development
jessicayzhao Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
291 changes: 291 additions & 0 deletions NERODesign/content/Tank.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,291 @@
import QtQuick 2.15
import QtQuick.Studio.DesignEffects

Rectangle {
id: tank
anchors.fill: parent
focus: tank.isFocused
visible: true

width: 800
height: 600

property bool isFocused: false

property int playerScore: 0
property int aiScore: 0

property bool playerWin: false
property bool aiWin: false

Canvas {
id: background

anchors.fill: parent

onPaint: {
var ctx = getContext("2d");
ctx.clearRect(0, 0, width, height);

var scaleX = 50;
var scaleY = 100;
var offsetX = width / 2;
var offsetY = height / 2;

var A = Math.floor(3 + Math.random() * (6 - 3));
var B = Math.floor(3 + Math.random() * (6 - 3));
var C = Math.floor(3 + Math.random() * (6 - 3));
var D = Math.floor(3 + Math.random() * (6 - 3));
var E = Math.floor(Math.random() * (4));
var F = Math.random();

var points = [];
for (var i = 0; i < background.width; i++) {
var x = (i - offsetX) / scaleX;
var y = D * ((1 / 15) * (1 + 3 * Math.sin(x / A + E)) * Math.sin(x / B) * (1 / 2 + Math.sin(x / C))) - F;
var pixelY = offsetY - y * scaleY;
points.push({x: i, y: pixelY});
}

var gradient = ctx.createLinearGradient(0, 0, 0, offsetY);
gradient.addColorStop(0, "white");
gradient.addColorStop(0.25, "lightsteelblue");
gradient.addColorStop(1, "cornflowerblue");

ctx.fillStyle = gradient;
ctx.beginPath();
ctx.moveTo(0, 0);
for (var j = 0; j < points.length; j++) {
ctx.lineTo(points[j].x, points[j].y);
}
ctx.lineTo(width, 0);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "white";
ctx.beginPath();
ctx.moveTo(0, height);
for (var k = 0; k < points.length; k++) {
ctx.lineTo(points[k].x, points[k].y);
}
ctx.lineTo(width, height);
ctx.closePath();
ctx.fill();

ctx.strokeStyle = "white";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (var l = 1; l < points.length; l++) {
ctx.lineTo(points[l].x, points[l].y);
}
ctx.stroke();
}

Component.onCompleted: requestPaint()
}

Row {
anchors.top: parent.top
anchors.topMargin: 40
width: parent.width

Item {
id: player
width: 100
height: 60
anchors.left: parent.left
anchors.leftMargin: 20
anchors.verticalCenter: parent.verticalCenter
anchors.top: parent.top
anchors.topMargin: 20

Text {
id: playerLabel
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: "Player:"
font.pixelSize: 19
font.weight: Font.Medium
color: "black"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}

Rectangle {
id: playerScoreDisplay
width: 60
height: 11
radius: height / 2
color: "transparent"
border.color: "mediumblue"
border.width: 2.5
anchors.horizontalCenter: player.horizontalCenter
anchors.top: playerLabel.bottom
anchors.topMargin: 10
enabled: false
clip: true

Rectangle {
width: playerScoreDisplay.width / 3 + 7
height: playerScoreDisplay.height - 2
radius: (playerScoreDisplay.height - 2) / 2
anchors.left: parent.left
anchors.top: parent.top
color: tank.playerScore >= 1 ? "royalblue" : "#c5cee4"
border.color: "transparent"
z: -1
}

Rectangle {
id: separator1
width: 2.5
height: playerScoreDisplay.height
anchors.left: playerScoreDisplay.left
anchors.leftMargin: playerScoreDisplay.width / 3
anchors.verticalCenter: parent.verticalCenter
color: "mediumblue"
border.color: "transparent"
}

Rectangle {
width: playerScoreDisplay.width / 3 - 2
height: playerScoreDisplay.height
anchors.left: separator1.right
anchors.top: parent.top
color: tank.playerScore >= 2 ? "royalblue" : "#c5cee4"
border.color: "transparent"
z: -1
}

Rectangle {
width: 2.5
height: playerScoreDisplay.height
anchors.left: playerScoreDisplay.left
anchors.leftMargin: 2* playerScoreDisplay.width / 3
color: "mediumblue"
border.color: "transparent"
}

Rectangle {
width: playerScoreDisplay.width / 3 + 5
height: playerScoreDisplay.height - 2
radius: (playerScoreDisplay.height - 2) / 2
anchors.right: parent.right
anchors.top: parent.top
color: tank.playerScore >= 3 ? "royalblue" : "#c5cee4"
border.color: "transparent"
z: -2
}
}
}

Item {
id: ai
width: 100
height: 60
anchors.right: parent.right
anchors.rightMargin: 20
anchors.verticalCenter: parent.verticalCenter

Text {
id: aiLabel
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: "AI:"
font.pixelSize: 19
font.weight: Font.Medium
color: "black"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}

Rectangle {
id: aiScoreDisplay
width: 60
height: 11
radius: height / 2
color: "transparent"
border.color: "darkred"
border.width: 2.5
anchors.horizontalCenter: ai.horizontalCenter
anchors.top: aiLabel.bottom
anchors.topMargin: 10
clip: true

Rectangle {
width: aiScoreDisplay.width / 3 + 7
height: aiScoreDisplay.height - 2
radius: (aiScoreDisplay.height - 2) / 2
anchors.left: parent.left
anchors.top: parent.top
color: tank.aiScore >= 1 ? "#d44562" : "#c5cee4"
border.color: "transparent"
z: -1
}

Rectangle {
id: separator2
width: 2.5
height: aiScoreDisplay.height
anchors.left: aiScoreDisplay.left
anchors.leftMargin: aiScoreDisplay.width / 3
anchors.verticalCenter: parent.verticalCenter
color: "darkred"
border.color: "transparent"
}

Rectangle {
width: aiScoreDisplay.width / 3 - 2
height: aiScoreDisplay.height
anchors.left: separator2.right
anchors.top: parent.top
color: tank.aiScore >= 2 ? "#d44562" : "#c5cee4"
border.color: "transparent"
z: -1
}

Rectangle {
width: 2.5
height: aiScoreDisplay.height
anchors.left: aiScoreDisplay.left
anchors.leftMargin: 2* aiScoreDisplay.width / 3
color: "darkred"
border.color: "transparent"
}

Rectangle {
width: aiScoreDisplay.width / 3 + 5
height: aiScoreDisplay.height - 2
radius: (aiScoreDisplay.height - 2) / 2
anchors.right: parent.right
anchors.top: parent.top
color: tank.aiScore >= 3 ? "#d44562" : "#c5cee4"
border.color: "transparent"
z: -2
}
}
}
}

Text {
id: playerWin
visible: tank.playerWin
anchors.centerIn: parent
color: "black"
text: "Game Over, You Win! (Hit Enter to play again)"
font.pixelSize: 20
font.weight: Font.Medium
}

Text {
id: aiWin
visible: tank.aiWin
anchors.centerIn: parent
color: "black"
text: "Game Over, You Lose! (Hit Enter to play again)"
font.pixelSize: 20
font.weight: Font.Medium
}

}
22 changes: 12 additions & 10 deletions NERODesign/content/TankIcon.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import QtQuick 2.15

Item {
id: tankIcon
width: 400
height: 300

property real barrelAngle: 0
property color tankColor: "black"

Rectangle {
width: 170
height: 40
radius: height / 2
color: "black"
color: tankColor
anchors.verticalCenterOffset: 14
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Expand All @@ -20,7 +22,7 @@ Item {
width: 55
height: 20
radius: height / 2
color: "black"
color: tankColor
anchors.verticalCenterOffset: 13
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Expand All @@ -32,7 +34,7 @@ Item {
width: 55
height: 20
radius: height / 2
color: "black"
color: tankColor
anchors.verticalCenterOffset: 13
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Expand All @@ -53,7 +55,7 @@ Item {
width: 250
height: 100
radius: height / 2
color: "black"
color: tankColor
anchors.verticalCenterOffset: 15
anchors.verticalCenter: parent.verticalCenter

Expand All @@ -64,7 +66,7 @@ Item {
width: 250
height: 45
radius: height / 2
color: "black"
color: tankColor
anchors.verticalCenterOffset: 75
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Expand All @@ -75,7 +77,7 @@ Item {
width: 100
height: 50
radius: height / 2
color: "black"
color: tankColor
anchors.verticalCenterOffset: -50
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Expand All @@ -85,7 +87,7 @@ Item {
width: 35
height: 20
radius: height / 5
color: "black"
color: tankColor
anchors.verticalCenterOffset: -19
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Expand All @@ -97,7 +99,7 @@ Item {
id: turretBottom
width: 100
height: 40
color: "black"
color: tankColor
anchors.verticalCenterOffset: -30
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Expand All @@ -106,7 +108,7 @@ Item {
id: barrel
width: 140
height: 16
color: "black"
color: tankColor
anchors.verticalCenterOffset: -5
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
Expand All @@ -119,7 +121,7 @@ Item {
width: 35
height: 25
radius: height / 4
color: "black"
color: tankColor
anchors.horizontalCenterOffset: 75
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
Expand Down
Loading
Loading