Top 10 Our favourite Games made with Vue.js
1. Perspective Vue
Designing a 2D game for a 2D screen is pretty simple to us. But it comes to design a 3D environment for a 2D computer screen we tend to adopt game engines thinking that’s a lot of complex math we can’t handle. Though there’s no denying the reliability of game engines, some features of the 3D environment can be implemented with really simple mathematics we learnt at school. This repository is intented to demonstrate that.
Perspective drawing is a drawing technique used to illustrate dimension through a flat surface. This is how we see a flat surface image and perceive a 3D environment in our brain depending on the position and sizes of the objects drawn. So if we can do the math to calculate how large or small the object needs to be drawn depending on how far it is from the screen, that’s all we need to have a 3D layout.
2. Vue 8 Puzzle
An itty-bitty slide puzzle game made as Vue.js component.
Images/Videos for source
3.Vue Minesweeper
The objective in Minesweeper is to find and mark all the mines hidden under the grey squares, in the shortest time possible. This is done by clicking on the squares to open them. Each square will have one of the following:
- A mine, and if you click on it you’ll lose the game.
- A number, which tells you how many of its adjacent squares have mines in them.
- Nothing. In this case you know that none of the adjacent squares have mines, and they will be automatically opened as well.
It is guaranteed that the first square you open won’t contain a mine, so you can start by clicking any square. Often you’ll hit on an empty square on the first try and then you’ll open up a few adjacent squares as well, which makes it easier to continue. Then it’s basically just looking at the numbers shown, and figuring out where the mines are.
4.Vue Chessboard
Chessboard vue component to load positions, create positions and see threats.
- It uses chess.js for chess movements and validations
- It uses chessground for chessboard UI chessground
5.VueSwing
A Vue.js wrapper for Swing. Swing is a swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others.
6.Tic-Tac-Toe web app created with Animate and Vue.js
Classic game with a modern look. Fully responsive Tic-Tac-Toe web app created with HTML, CSS, Animate.css, Bootstrap, JavaScript and Vue.js.
7.Vue-2048
2048 is a single-player sliding block puzzle game designed by Italian web developer Gabriele Cirulli. The game’s objective is to slide numbered tiles on a grid to combine them to create a tile with the number 2048. However, one can continue to play the game after reaching the goal, creating tiles with larger numbers.
8.Tic Tac Toe with Vue.js
A little experiment in Collab Mode. Built together with @JonasKuiler to explain some basic Vue.js stuff
9.Vue.js Go Game
Go game is an abstract strategy board game for two players, in which the aim is to surround more territory than the opponent.
10. Vue Tetris
The game has seven types of bricks: I (vertical), J, L, O (square), S, T, Z. We see each block of bricks made up of 4 small squares put together. We can treat these blocks as rectangles of different sizes.
The other shapes created by rotating these basic blocks are 90 degrees, 180 degrees and 270 degrees, respectively.
A random sequence of Tetriminos falls onto the playing field (a rectangular vertical axis, called a “good” or “matrix”).
11.Vue Defuse
An implementation of the classical minesweeper game in vue.js.
Demo: https://connexo.de/defuse/
View on GitHub
12.Vue Minesweeper
Add a minesweeper game to your website, just for kicks!
Examples: https://codepen.io/disjfa/pen/axdmob
View on GitHub
13.JavaScript Guessing Game
You know there are too many JavaScript libraries when there is a game for it
React, Flux, Angular, Aurelia, TypeScript, Flow, oh my! By trying to make things simpler, I have created this game to stay on top of JavaScript in 2017.
Contributing
- Add a new object of a JavaScript tool to /static/logos.json JSON file.
- Add 100x100 .png image to /static/logos/ directory with the tool’s name in lowercase as the file’s name.
- Create a pull request :)
Examples: https://javascript-game.firebaseapp.com/#/
View on GitHub
#vuejs #javascript #programming #vue-js
