diff --git a/Golf Game Extension/Assets/Golf.jpeg b/Golf Game Extension/Assets/Golf.jpeg new file mode 100644 index 00000000..def95e93 Binary files /dev/null and b/Golf Game Extension/Assets/Golf.jpeg differ diff --git a/Golf Game Extension/Assets/Map_Desert_2.png b/Golf Game Extension/Assets/Map_Desert_2.png new file mode 100644 index 00000000..d4971d1b Binary files /dev/null and b/Golf Game Extension/Assets/Map_Desert_2.png differ diff --git a/Golf Game Extension/Assets/Map_Plains_2.png b/Golf Game Extension/Assets/Map_Plains_2.png new file mode 100644 index 00000000..3a310507 Binary files /dev/null and b/Golf Game Extension/Assets/Map_Plains_2.png differ diff --git a/Golf Game Extension/Assets/Premium Vector _ Golf course background in flat style.jpeg b/Golf Game Extension/Assets/Premium Vector _ Golf course background in flat style.jpeg new file mode 100644 index 00000000..4d33d1d2 Binary files /dev/null and b/Golf Game Extension/Assets/Premium Vector _ Golf course background in flat style.jpeg differ diff --git a/Golf Game Extension/Assets/ball_white.png b/Golf Game Extension/Assets/ball_white.png new file mode 100644 index 00000000..ac278460 Binary files /dev/null and b/Golf Game Extension/Assets/ball_white.png differ diff --git a/Golf Game Extension/Assets/course1.png b/Golf Game Extension/Assets/course1.png new file mode 100644 index 00000000..dcc1626e Binary files /dev/null and b/Golf Game Extension/Assets/course1.png differ diff --git a/Golf Game Extension/Assets/hole_1.png b/Golf Game Extension/Assets/hole_1.png new file mode 100644 index 00000000..247ed27c Binary files /dev/null and b/Golf Game Extension/Assets/hole_1.png differ diff --git a/Golf Game Extension/Assets/home_background_1.jpg b/Golf Game Extension/Assets/home_background_1.jpg new file mode 100644 index 00000000..9b63387b Binary files /dev/null and b/Golf Game Extension/Assets/home_background_1.jpg differ diff --git a/Golf Game Extension/Assets/home_background_2.jpg b/Golf Game Extension/Assets/home_background_2.jpg new file mode 100644 index 00000000..cb24c38c Binary files /dev/null and b/Golf Game Extension/Assets/home_background_2.jpg differ diff --git a/Golf Game Extension/Assets/home_background_3.jpg b/Golf Game Extension/Assets/home_background_3.jpg new file mode 100644 index 00000000..8e9eac5c Binary files /dev/null and b/Golf Game Extension/Assets/home_background_3.jpg differ diff --git a/Golf Game Extension/Assets/speed_arrow_1.png b/Golf Game Extension/Assets/speed_arrow_1.png new file mode 100644 index 00000000..8764d4f7 Binary files /dev/null and b/Golf Game Extension/Assets/speed_arrow_1.png differ diff --git a/Golf Game Extension/Assets/stony_texture_1.jpg b/Golf Game Extension/Assets/stony_texture_1.jpg new file mode 100644 index 00000000..6f07cbe9 Binary files /dev/null and b/Golf Game Extension/Assets/stony_texture_1.jpg differ diff --git a/Golf Game Extension/Assets/stony_texture_2 trail.jpg b/Golf Game Extension/Assets/stony_texture_2 trail.jpg new file mode 100644 index 00000000..39435ef9 Binary files /dev/null and b/Golf Game Extension/Assets/stony_texture_2 trail.jpg differ diff --git a/Golf Game Extension/Assets/stony_texture_2.jpg b/Golf Game Extension/Assets/stony_texture_2.jpg new file mode 100644 index 00000000..c849cf3f Binary files /dev/null and b/Golf Game Extension/Assets/stony_texture_2.jpg differ diff --git a/Golf Game Extension/Assets/stony_texture_3.jpg b/Golf Game Extension/Assets/stony_texture_3.jpg new file mode 100644 index 00000000..cd31e36a Binary files /dev/null and b/Golf Game Extension/Assets/stony_texture_3.jpg differ diff --git a/Golf Game Extension/Designs/Home_1.fig b/Golf Game Extension/Designs/Home_1.fig new file mode 100644 index 00000000..f4137cba Binary files /dev/null and b/Golf Game Extension/Designs/Home_1.fig differ diff --git a/Golf Game Extension/Golf.jpeg b/Golf Game Extension/Golf.jpeg new file mode 100644 index 00000000..def95e93 Binary files /dev/null and b/Golf Game Extension/Golf.jpeg differ diff --git a/Golf Game Extension/README.md b/Golf Game Extension/README.md new file mode 100644 index 00000000..48220603 --- /dev/null +++ b/Golf Game Extension/README.md @@ -0,0 +1,31 @@ +# **Mini_Golf** + +--- + +
+ +## **Description 📃** +Minigolf is a sport enjoyed by people of all ages and abilities and the aim of the game is to hit a ball from a tee-off point into a hole in as few shots as possible. Minigolf courses include a variety of interesting and tricky obstacles for players to Putt through, over, under and around! +- + +## **functionalities 🎮** +We have two modes, Play now, which is a singleplayer and Play with friends , which is a multiplayer mode, everymode has various interesting maps and courses +- +
+ +## **How to play? 🕹ī¸** +You hold left mouse button and drag it across the canvas to shoot the ball in opposite direction +- + +
+ +## **Screenshots 📸** + +
+ +![image](../Mini_Golf/Assets/Map_Plains_2.png) +![image](../Mini_Golf/Assets/Map_Desert_2.png) + +
+ + diff --git a/Golf Game Extension/courses/course1.html b/Golf Game Extension/courses/course1.html new file mode 100644 index 00000000..412af648 --- /dev/null +++ b/Golf Game Extension/courses/course1.html @@ -0,0 +1,27 @@ + + + + + + + Document + + + + + + + + + + + + \ No newline at end of file diff --git a/Golf Game Extension/courses/course1.js b/Golf Game Extension/courses/course1.js new file mode 100644 index 00000000..01460a28 --- /dev/null +++ b/Golf Game Extension/courses/course1.js @@ -0,0 +1,287 @@ +/** @type {HTMLCanvasElement} */ +// Get the canvas element +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); + +const course1 = new Image(); +course1.src = '../Assets/course1.png'; + +const course = { + x: 0, + y: 0, + height: 970, + width: 1970, +} +const wall1 ={ + x:0, + y:590, + height:65, + width:740, +} + +const wall2 ={ + x:890, + y:590, + height:65, + width:680, +} + +const wall3 ={ + x: 400, + y: 300, + height: 70, + width: 685, +} + +const wall4 = { + x: 1230, + y: 300, + height: 70, + width: 700, +} + +const wall5 ={ + x1: 1650, + x2: 1950, + y1: 915, + y2: 750, + x3: 1950, + y3: 915, +} + +const wall6 ={ + x1: 1950, + x2: 1650, + y1: 800, + y2: 360, + thickness: 40, +} + +function drawCourse() { + ctx.drawImage(course1, course.x, course.y, course.width, course.height); + /*ctx.strokeStyle = 'black'; + ctx.strokeRect(wall1.x,wall1.y,wall1.width,wall1.height); + ctx.strokeRect(wall2.x,wall2.y,wall2.width,wall2.height); + ctx.strokeRect(wall3.x,wall3.y,wall3.width,wall3.height); + ctx.strokeRect(wall4.x,wall4.y,wall4.width,wall4.height); + ctx.fillStyle = "#000000"; // Adjust the wall color as needed + ctx.fillRect(wall6.x1, wall6.y2, wall6.x2 - wall6.x1, wall6.thickness);*/ + + } + + + +function drawWall1(){ + +} + +/*function update(){ + drawCourse(); + + requestAnimationFrame(update); +}*/ + +// Create an image object for the ball +const ballImg = new Image(); +ballImg.src = "../Assets/ball_white.png"; // Replace with the path to your ball image + + // Set the ball properties + const ball = { + x: 65, + y: 800, + height: 30, + width: 30, + speed: 0.065, + dx: 0, + dy: 0, + isMouseDown: false, + friction: 0.98, + }; + + const hole ={ + x: 1535, + y: 190, + height: 30, + width: 30, + } + + // Function to draw the ball image + function drawBall() { + ctx.strokeStyle = 'blue'; + ctx.beginPath(); + ctx.arc(ball.x + ball.width/2,ball.y + ball.height/2,ball.height/2,0,Math.PI *2); + ctx.stroke(); + ctx.drawImage(ballImg, ball.x, ball.y); + /* ctx.beginPath(); + ctx.arc(hole.x + hole.width/2,hole.y + hole.height/2,hole.height/2,0,Math.PI *2); + ctx.stroke();*/ + } + + // Event listeners for mouse events + canvas.addEventListener("mousedown", handleMouseDown); + canvas.addEventListener("mouseup", handleMouseUp); + + // Variables to track mouse position + let startX = 0; + let startY = 0; + + // Function to handle mouse down event + function handleMouseDown(event) { + if (!ball.isMoving) { + startX = event.clientX; + startY = event.clientY; + ball.isMouseDown = true; + } + } + + // Function to handle mouse up event + function handleMouseUp(event) { + if (ball.isMouseDown) { + const currentX = event.clientX; + const currenty = event.clientY; + + // Calculate the difference between start and current mouse position + const dx = startX - currentX; + const dy = startY - currenty; + + // Set the ball's velocity based on the difference + ball.dx = dx * ball.speed; + ball.dy = dy * ball.speed; + + ball.isMouseDown = false; // Reset mouse state + ball.isMoving = true; // Set ball movement flag + } + } + + function areatri(x1,y1,x2,y2,x3,y3){ + return Math.abs((x1*(y2-y3)+x2*(y3-y1)+x3*(y1-y2))/2); + } + + function crash1(otherobj) { + var myleft = ball.x; + var myright = ball.x + (ball.width); + var mytop = ball.y; + var mybottom = ball.y + (ball.height); + var otherleft = otherobj.x; + var otherright = otherobj.x + (otherobj.width); + var othertop = otherobj.y; + var otherbottom = otherobj.y + (otherobj.height); + var crash = 1; + if ((myleft>otherright) || (mytop>otherbottom) || (mybottomotherright+10*speedx) || myright900 || ball.y<44){ + ball.dy *= -1; + } + + if(ball.x>1880 || ball.x<59){ + ball.dx *= -1; + } + + + if(crash1(wall1)==1){ + ball.dy *= -1; + } + if(crash1(wall1)==2){ + ball.dx *= -1; + } + + if(crash1(wall2)==1){ + ball.dy *= -1; + } + if(crash1(wall2)==2){ + ball.dx *= -1; + } + + if(crash1(wall3)==1){ + ball.dy *= -1; + } + if(crash1(wall3)==2){ + ball.dx *= -1; + } + + if(crash1(wall4)==1){ + ball.dy *= -1; + } + if(crash1(wall4)==2){ + ball.dx *= -1; + } + if(crash3(wall5)){ + update_crash3(wall5); + } + + if(crash1(hole)){ + window.location.href = 'course2.html'; + } + + if (Math.abs(ball.dx) < 0.1 && Math.abs(ball.dy) < 0.1) { + // Ball has stopped moving + ball.isMoving = false; + } + } + // Clear canvas + ctx.clearRect(0, 0, canvas.width, canvas.height); + drawCourse(); + // Draw ball image + drawBall(); + + // Request animation frame for next frame update + requestAnimationFrame(update); + } + + // Start loading the ball image + addEventListener("load", function () { + // Start the animation loop once the image is loaded + update(); + }); + diff --git a/Golf Game Extension/courses/course2.html b/Golf Game Extension/courses/course2.html new file mode 100644 index 00000000..126d6882 --- /dev/null +++ b/Golf Game Extension/courses/course2.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/Golf Game Extension/courses/course2.js b/Golf Game Extension/courses/course2.js new file mode 100644 index 00000000..1661a7b2 --- /dev/null +++ b/Golf Game Extension/courses/course2.js @@ -0,0 +1,280 @@ +/** @type {HTMLCanvasElement} */ +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); + +const course1 = new Image(); +course1.src = '../Assets/Map_Desert_2.png'; + +const course = { + x: 0, + y: 0, + height: 970, + width: 1970, +} + +const wall1 ={ + x:550, + y:597, + height:58, + width:1008, + } + +const wall2 ={ + x:550, + y:268, + height:58, + width:1008, + } + +const wall3 ={ + x:480, + y:268, + height:340, + width:75, + } + +const sand1 ={ + x1:1165, + y1:324, + x2:1555, + y2:600, + x3:1554, + y3:324, + } + +const sand2 ={ + x1:60, + y1:540, + x2:1010, + y2:930, + x3:60, + y3:930, + } + +const sand31 ={ + x1:480, + y1:190, + x2:1555, + y2:270, + x3:480, + y3:270, + } + +const sand32 ={ + x1:480, + y1:190, + x2:1555, + y2:270, + x3:1555, + y3:190, + } + +const sand41 ={ + x1:480, + y1:125, + x2:1580, + y2:45, + x3:480, + y3:45, + } + +const sand42 ={ + x1:480, + y1:125, + x2:1580, + y2:45, + x3:1580, + y3:125, + } + + const hole ={ + x: 265, + y: 460, + height: 30, + width: 30, + } + +function drawCourse(){ + ctx.drawImage(course1, course.x, course.y, course.width, course.height); + ctx.strokeStyle = 'black'; + ctx.strokeRect(wall1.x,wall1.y,wall1.width,wall1.height); + ctx.strokeRect(wall2.x,wall2.y,wall2.width,wall2.height); + ctx.strokeRect(wall3.x,wall3.y,wall3.width,wall3.height); + } + +const ballImg = new Image(); +ballImg.src = "../Assets/ball_white.png"; + +const ball = { + x: 565, + y: 465, + height: 30, + width: 30, + speed: 0.065, + dx: 0, + dy: 0, + isMouseDown: false, + friction: 0.98, + }; + + // Event listeners for mouse events + canvas.addEventListener("mousedown", handleMouseDown); + canvas.addEventListener("mouseup", handleMouseUp); + + // Variables to track mouse position + let startX = 0; + let startY = 0; + + // Function to handle mouse down event + function handleMouseDown(event) { + if (!ball.isMoving) { + startX = event.clientX; + startY = event.clientY; + ball.isMouseDown = true; + } + } + + // Function to handle mouse up event + function handleMouseUp(event) { + if (ball.isMouseDown) { + const currentX = event.clientX; + const currenty = event.clientY; + + // Calculate the difference between start and current mouse position + const dx = startX - currentX; + const dy = startY - currenty; + + // Set the ball's velocity based on the difference + ball.dx = dx * ball.speed; + ball.dy = dy * ball.speed; + + ball.isMouseDown = false; // Reset mouse state + ball.isMoving = true; // Set ball movement flag + } + } + + function drawBall() { + ctx.strokeStyle = 'blue'; + ctx.beginPath(); + ctx.arc(ball.x + ball.width/2,ball.y + ball.height/2,ball.height/2,0,Math.PI *2); + ctx.stroke(); + ctx.drawImage(ballImg, ball.x, ball.y); + } + + function areatri(x1,y1,x2,y2,x3,y3){ + return Math.abs((x1*(y2-y3)+x2*(y3-y1)+x3*(y1-y2))/2); + } + + function crash1(otherobj) { + var myleft = ball.x; + var myright = ball.x + (ball.width); + var mytop = ball.y; + var mybottom = ball.y + (ball.height); + var otherleft = otherobj.x; + var otherright = otherobj.x + (otherobj.width); + var othertop = otherobj.y; + var otherbottom = otherobj.y + (otherobj.height); + var crash = 1; + if ((myleft>otherright) || (mytop>otherbottom) || (mybottomotherright+10*speedx) || myrightwall.x1 && ball.xwall.x2))) return false; + if(!((ball.y>wall.y1 && ball.ywall.y2))) return false; + if(areatri(ball.x,ball.y,wall.x1,wall.y1,wall.x3,wall.y3)+areatri(ball.x,ball.y,wall.x2,wall.y2,wall.x3,wall.y3)900 || ball.y<44){ + ball.dy *= -1; + } + + if(ball.x>1880 || ball.x<59){ + ball.dx *= -1; + } + + if(crash1(wall1)==1){ + ball.dy *= -1; + } + if(crash1(wall1)==2){ + ball.dx *= -1; + } + + if(crash1(wall2)==1){ + ball.dy *= -1; + } + if(crash1(wall2)==2){ + ball.dx *= -1; + } + + if(crash1(wall3)==1){ + ball.dy *= -1; + } + if(crash1(wall3)==2){ + ball.dx *= -1; + } + + if(crash3(sand1) || crash3(sand2) || crash3(sand31) || crash3(sand32) || crash3(sand41) || crash3(sand42)){ + ball.friction=0.80; + } + else{ + ball.friction=0.98; + } + + if(crash1(hole)){ + window.alert("You Won!!"); + } + + if (Math.abs(ball.dx) < 0.1 && Math.abs(ball.dy) < 0.1) { + // Ball has stopped moving + ball.isMoving = false; + } + } + + + + ctx.clearRect(0, 0, canvas.width, canvas.height); + + + + drawCourse(); + + drawBall(); + + requestAnimationFrame(update); + +} + +addEventListener("load", function () { + // Start the animation loop once the image is loaded + update(); + }); + \ No newline at end of file diff --git a/Golf Game Extension/courses/leaderboard.html b/Golf Game Extension/courses/leaderboard.html new file mode 100644 index 00000000..59614982 --- /dev/null +++ b/Golf Game Extension/courses/leaderboard.html @@ -0,0 +1,30 @@ + + + + + + + Document + + +

Leader Board

+ + + + + + + + + + + + + + + + +
NameCoursePar
PlayerPlain1000
+ + + \ No newline at end of file diff --git a/Golf Game Extension/index.html b/Golf Game Extension/index.html new file mode 100644 index 00000000..ff3556d8 --- /dev/null +++ b/Golf Game Extension/index.html @@ -0,0 +1,28 @@ + + + + + + + Mini Golf + + + + + + + + +
+

MINI GOLF

+ + + + + + + + \ No newline at end of file diff --git a/Golf Game Extension/manifest.json b/Golf Game Extension/manifest.json new file mode 100644 index 00000000..67aba172 --- /dev/null +++ b/Golf Game Extension/manifest.json @@ -0,0 +1,16 @@ +{ + "manifest_version": 3, + "name": "Golf Game Extension", + "version": "1.0", + "description": "Golf is a sport enjoyed by people of all ages and abilities and the aim of the game is to hit a ball from a tee-off point into a hole in as few shots as possible.", + "action": { + "default_popup": "index.html", + "default_icon": "golf.jpeg" + }, + "icons": { + "16": "golf.jpeg", + "48": "golf.jpeg", + "128": "golf.jpeg" + }, + "permissions":[] +} \ No newline at end of file diff --git a/Golf Game Extension/script.js b/Golf Game Extension/script.js new file mode 100644 index 00000000..9b0e848e --- /dev/null +++ b/Golf Game Extension/script.js @@ -0,0 +1,13 @@ +const vol = document.getElementById("sound"); +const now = document.getElementById("now"); +const frands = document.getElementById("frands"); + +now.addEventListener('click' , e =>{ + e.preventDefault(); + window.location.href = 'courses/course1.html' +}) + +frands.addEventListener('click', e=>{ + e.preventDefault(); + window.alert('COMING SOON!!!'); +}) \ No newline at end of file diff --git a/Golf Game Extension/style.css b/Golf Game Extension/style.css new file mode 100644 index 00000000..61e31898 --- /dev/null +++ b/Golf Game Extension/style.css @@ -0,0 +1,114 @@ +body{ + background-image: url(Assets/Premium\ Vector\ _\ Golf\ course\ background\ in\ flat\ style.jpeg); + background-size:cover; + background-repeat: no-repeat; + background-blend-mode: color; +} +#title{ +position: absolute; +width: 792px; +height: 135px; +left: 700px; +top: 5px; + +font-family: 'Black Ops One'; +font-style: normal; +font-weight: 400; +font-size: 100px; +line-height: 100%; +/* or 100px */ + +display: flex; +align-items: center; +text-align: center; + +color: #037803; + + +text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +backdrop-filter: blur(2px); +} + +#now{ + box-sizing: border-box; + font-family: 'Lacquer'; + font-size: 80px; + color: #0ef30e; + font-weight: bolder; +position: absolute; +width: 550px; +height: 116px; +left: 105px; +top: 278px; +display: flex; +align-items: center; +text-align: center; + +background-image: url(Assets/stony_texture_2\ trail.jpg); +background-size: 350px; +border: 5px solid #000000; +border-radius: 30px; + +} + +#frands{ + box-sizing: border-box; + font-family: 'Lacquer'; + font-size: 62px; + font-weight: bolder; + + color: #0ef30e; +position: absolute; +width: 550px; +height: 116px; +left: 105px; +top: 450px; +display: flex; +align-items: center; +text-align: center; +background-image: url(Assets/stony_texture_2\ trail.jpg); +background-size: 350px; + + +border: 5px solid #000000; +border-radius: 30px; + +} + +#sound{ + box-sizing: border-box; + color: #0ef30e; +position: absolute; +width: 80px; +height: 80px; +left: 105px; +top: 600px; +display: flex; +align-items: center; +text-align: center; +background-image: url(Assets/stony_texture_2\ trail.jpg); +background-size: 350px; + + +border: 5px solid #000000; +border-radius: 65px; + +} + +#vol{ + font-size:50px; + + + text-shadow: #000000; + font-weight: bolder; +} + +#sound:hover{ + transform: scale(0.95); +} +#frands:hover{ + transform: scale(0.95); +} +#now:hover{ + transform: scale(0.95); +}