Skip to content

Commit

Permalink
Merge pull request #129 from Northeastern-Electric-Racing/tanks
Browse files Browse the repository at this point in the history 
Tank Background
  • Loading branch information
@mattrwang
mattrwang authored Jan 17, 2025
2 parents 59c5640 + ddddb61 commit 9fee86d
Show file tree
Hide file tree
Showing 4 changed files with 728 additions and 10 deletions.
291 changes: 291 additions & 0 deletions NERODesign/content/Tank.qml
View file
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
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

0 comments on commit 9fee86d

Please sign in to comment.