3.2 create menu and game pages (Part 2)

This class is based on the last class , Draw a snake in the picture .
Start... First vue Scaffolding , vue ui

Modify map

The question of last class ; The map size is 13x13 Of , In the beginning , Suppose the starting coordinates of two snakes are （11,1）（1,11）;
Adjustment will not make two snakes enter the same grid at the same time ( It ends in a draw )

Make the map even x Odd number .
Do not use axisymmetry , Use centrosymmetry .

 //  Create random obstacles 
        for (let i = 0; i < this.inner_walls_count / 2; i++) {
    
            for (let j = 0; j < 1000; j++) {
    
                let r = parseInt(Math.random() * this.rows);
                let c = parseInt(Math.random() * this.cols);
                // Change to centrosymmetry 
                if (g[r][c] || g[this.rows - 1 - r][this.cols - 1 - c]) {
    
                    continue;
                }
                if (r == this.rows - 2 && c == 1 || r == 1 && c == this.cols - 2)
                    continue;
                // Change to centrosymmetry 
                g[r][c] = g[this.rows - 1 - r][this.cols - 1 - c] = true;
                break;
            }
        }

Centrosymmetric figure

---

Now the generated map , As soon as the browser is refreshed, a random one is generated for the convenience of debugging . Later, the backend will generate maps , The front end is only responsible for demonstrating animation .

Regulations ： front 10 Step （ round ） The length of each snake increases 1 grid , After every 3 Step by step .
You need to convert the number of rows and columns into coordinates .
canvas Canvas and web page image coordinates are different .

Draw a snake

First step , Draw a moving ball . Turn-based game ,

Copy the code against your scalp

final result

Use Google browser

Save to the cloud
git status
git add .
git commit -m " "
git push