ekinkaradag / snake-vue3 Goto Github PK

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to the page
2. Click on "View Source Code"

Expected behavior
Goes to this repo.

Actual behavior
404 Not Found because it goes to https://ekinkaradag.github.io/snake-vue3/github.com/ekinkaradag/snake-vue3

Screenshots

Desktop (please complete the following information):

• Operating System: ALL
• OS Version ALL
• Browser ALL
• Browser Version ALL

Limitation

The snake can exit the grid and enter it from the opposite side. That's the only mode

Requirement

• Rename the "Play" button to "Play without boundaries"
• Add another button named "Play in boundaries"
  • When the user clicks this button, the game can only be played without hitting the boundaries
  • If the user hits the boundaries, the game is over

Is your feature request related to a problem? Please describe.
It would have been really nice if a background music was available while playing the game.

Describe the solution you'd like

• Add a background music
  • It should start playing when the page loads
    • It cannot be done. Because you would get an error like this: The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
  • There should be mute button on the page, in case the player doesn't want to hear the music.

Is your feature request related to a problem? Please describe.
It would have been really nice if the project was making use of TypeScript

Describe the solution you'd like
Convert to TypeScript

Describe alternatives you've considered
Keep using JS

Is your feature request related to a problem? Please describe.
It would have been really nice if there was a link to the source code (https://github.com/ekinkaradag/snake-vue3)

Describe the solution you'd like
Right below the "Social Links", add another link in the form of the other "Social Links":

• Height of the link should be equal to the other social links.
• The link's left-side should be aligned to the first social link's left-side.
• The link's right-side should be aligned to the last social link's right-side.
• The font family of the link should be the same as "Play" buttons.
• Color of the link's text should be black.
• Color of the background should be gray.
• Color of the link's text should not change if the user had clicked on it before.
• The link should open the page in a new tab.

Limitation

The repo does not have a README.md and a LICENSE file.

Requirements

• The repo should have README.md and LICENSE files in the root folder.

Is your feature request related to a problem? Please describe.
It would have been really nice if the user was able to change the size of the grid and/or the speed of the snake

Describe the solution you'd like

• Display 4 radio buttons for difficulty (the first three will have predetermined grid size and speed of the snake values:
  • Easy
  • Medium
  • Hard
  • Custom
• If the user clicks on "Custom":
  • Display a slider for the grid size
  • Display a slider for the speed of the snake

Describe alternatives you've considered
Only display two sliders. One for grid size and one for the speed of the snake

Limitation

The user can achieve any score, but that score is never recorded and potentially displayed in a leaderboard.

Requirement:

• Add a leaderboard which displays the top 10 scores and the users who achieved them
• The leaderboard will be on the right-hand side of the page.

Is your feature request related to a problem? Please describe.
It would have been really nice if we didn't assume that the user already knows how to play the game.

Describe the solution you'd like
We should put a button named "How to play" next to the "Play with/without borders" buttons. When clicked on this button, a popup should appear.
Popup should have the following:

• Set of rules, copied from README.md
• An "OK" button at the bottom of the popup

Describe alternatives you've considered
No alternatives

Additional context

• Popup should not be considered as another page. Instead, it should look like a window overlaying on the existing page.
• "OK" button should make use of the existing Button.vue component

problem
I love this repository and it is very good. But there is a problem:
While playing this game when I press down arrow, snake goes down. and when I press up arrow, the snake goes up. There is no problem in that. But the website itself also scroll when pressed upp and down arrows. Wich results in a bit annoying problem where the page scrolling up and down while I just want to play a game.

solution
I think instead of playing the game directly on the website, playing the game inside a modal would be a better idea. But it won't be so easy coding all that

Describe alternatives you've considered
Maybe using w, a, s, d keys instead of arrow keys would be a fast solution. But while w, a, s, d keys are aligned all nice and simple in
Q keyboard ; it is not aligned very nice in the F keyboard. Making this game pretty much unplayable in F keyboard.

Maybe decreasing the height of the website is a simple, fast, easy solution. Afterall, if the height of the website is small enaugh, then there won't be a scrolling bar and no annoying scrolling problem

Describe the bug
The game cannot be played using a touchscreen.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://ekinkaradag.github.io/snake-vue3 on a device that has a touchscreen
2. Using the touchscreen, tap on any of the "Play" buttons

Expected behavior
You cannot navigate the snake using a touchscreen

Actual behavior
You should be able to navigate the snake using a touchscreen:

• Swipe down: Go down
• Swipe up: Go up
• Swipe left: Go left
• Swipe right: Go right

Screenshots
If applicable, add screenshots to help explain your problem.

System(please complete the following information):

• Operating System: Windows, iOS, Android
• OS Version: ALL
• Browser: ALL
• Browser Version: ALL

Additional context
Add any other context about the problem here.