Use vue. js to compile the code of a fun puzzle game instance

I saw the blue puzzle game on the Internet, which was written by jquery. Next, I will share with you how to compile a blue puzzle game based on vue. js. Let's take a look at the implementation code. Before that, I saw the blue puzzle game on the Internet. The author wrote it using jquery. Next, I will share with you how to compile a blue puzzle game based on vue. js. Let's take a look at the implementation code.

Later equals never! Just do what you say. First, understand the rules of the game: the first level is 1*1 square, the second level is 2*2, and so on.

This figure is the third-level 3*3 square. Click on a small square. The color of the square adjacent to it changes from yellow to blue, and the color of the square changes to blue.

Now the rules are clear. Start it!

/* Style */. game_bg {background: #333; width: 600px; height: 600px; margin: 30px auto; border-radius: 3px ;}. card {background: # E6AB5E; float: left; margin: 6px 0 0 6px ;}. blueCard {background: # 5C90FF;}/* html */
/* Js */var vm = ew Vue ({el: '# game', data: {margin: 6, // the distance between each card. level: 1, // game grade cards: [], // card size: 0, // the size of each card}, methods :{},});

The number of cards is the square of the level, and each card has two colors, yellow and blue. As the difficulty of the game increases, the distance between blocks also decreases. Therefore, add the game Initialization Method to the vue constructor.

InitGame: function () {// initialize the game function if (this. level <4) {this. margin = 12;} else if (this. level <8) {this. margin = 6;} else if (this. level <16) {this. margin = 3;} else {this. margin = 1;} this. cards = []; this. size = (600-(this. level + 1) * this. margin)/this. level; for (var I = this. level * this. level; I --;) {this. cards. push ({color: false, // false is yellow, true is blue })}}

Pair

P in Data Binding

Next, click a square to flip the card. The color attribute of the card is reversed. We noticed that the subscript on the left of the card is reduced by 1; the subscript on the right is added by 1; the subscript on the top is reduced by grade; the subscript below is added by grade. Note that even if the vm. cards subscript does not exist on the leftmost or rightmost, even though the bottom mark may exist, adjacent cards may not exist. So I added a method to change the color of the adjacent area and a method to flip the brand in methods.

Var changeNeighbor = function (index) {var cards = vm. cards; if (index> 0) {// left if (index % vm. level) {// not on the leftmost cards [index-1]. color =! Cards [index-1]. color;} if (index
 
  
= 0) {// above cards [index-vm.level]. color =! Cards [index-vm.level]. color;} if (index + vm. level
  
   
After each click, you must determine whether the game is over. Traverse vm. cards. If the color attribute is false, the system fails to pass the test. Otherwise, the system does not pass the test.

   
var gameOver=function(){var cards=vm.cards;for(var i=cards.length;i--;){if(!cards[i].color) return false;}return true};
   
In this way, the basic functions of the game are implemented. After the pass is added, the level is increased by 1. And save the level to localStorage. Each time you enter the page, you can query the level in localStorage. A prompt will be given after the pass. Display the displayed steps. Add the method to reset the current round and the reset level. Make some modifications to the details and add the final code.

   
    Brand game
Game Rules click the corresponding Square. The color of the square that is adjacent to it changes, and the color of the square changes to blue.
Reset levelStart this round again