当前位置：网站首页>Summer Challenge openharmony greedy snake based on JS

Summer Challenge openharmony greedy snake based on JS

2022-07-26 17:27:00 【51CTO】

This article is participating in the starlight project 3.0– Summer Challenge

Preface

I don't know what to do , Then type the code , Write about a snake , Obviously , Cried by my own food , I can't play with the greedy snake I wrote （ps: I used to finish for a long time without dying >_<)
The effect is as follows ：

# Summer Challenge # OpenHarmony be based on JS The greedy snake realized _JS

Specific implementation ideas

Container initialization

stay onShow Get the width and height of the game container from the hook function , In fact, I don't want to get it here , But there is no way. , As if getBoundingClientRect() You need to mount it to get the value , In the previous hook function, we can't get the specific attribute value （ps： This is my guess , Because the document is written very … I can't find it, so I have to try one by one ）
Get the width and height of the container , According to the length of the snake （ Every dot ） To determine how many grids to divide , Form a coordinate axis , Rear food , The movement of the snake is determined according to this coordinate axis

  onShow(){ //  First initialization 
        this.conH = this.$refs["con"].getBoundingClientRect().height ;
        this.conW = this.$refs["con"].getBoundingClientRect().width ;
        this.h = Math.floor(this.conH / this.snakeBody);
        this.w = Math.floor(this.conW / this.snakeBody);
        for (var i = 0; i < this.w; i++) { // Draw mesh 
            this.grid.push([])
            for (var j = 0; j < this.h; j++) {
                this.grid[i].push({
                    x: i,
                    y: j
                });
            }
        }
        this.init(); // Initialization function 

    }

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

The snake

Use an array to realize , Array index 0 For the snake's tail , Indexes length-1 For the head

 init(){
        const snakePos = [ // The initialized body of the snake 
            {
                x : 0,
                y : 0,
                flag : 'b',
                id : Math.random()
            },
            {
                x : 1,
                y : 0,
                flag : 'b',
                id : Math.random()
            },
            {
                x : 2,
                y : 0,
                flag : 'h',
                id : Math.random()
            }
        ];
        this.snake.snakePos = snakePos; // Assign the initialized body to the snake 
        this.randomFood(); // Randomly generate food 
    }

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

food

Food is randomly generated , Position anywhere in the grid , But it cannot be generated in the body position of the snake

 randomFood(){ // Randomly generate food 
        while(true){
            let x = Math.floor(Math.random() * this.conW);
            let y = Math.floor(Math.random() * this.conH);
            x = x - (x % this.snakeBody); //x,y Into coordinates that are multiples of the snake's body 
            y = y - (y % this.snakeBody);
            let is = this.snake.snakePos.find((item)=>{
                return item.x == x && item.y == y;
            })
            this.food.x = x;
            this.food.y = y;
            if(!is) { // When the position of the food is not overlapped with that of the snake, it will jump out and end the dead cycle 
                break;
            }
        }
    }

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

The movement of the snake

The snake moves through the array push and shift Realization , Snakes have a direction of movement , Modify the new snake head according to the direction x and y Value

des:{// The direction of the snake 
          "-20":{ //  Move one bit up 
              x:0,
              y:-1,
              flag: ''
          },
          "20":{// Down 
              x:0,
              y:1,
              flag: ''
          },
          "10":{ // Right 
              x:1,
              y:0,
              flag: ''
          },
          "-10":{ // Left 
              x:-1,
              y:0,
              flag: ''
          }
        },
 addHead(des){ 
       // Add snakehead  des For the direction of the snake , There are four directions up, down, left and right , Every time you move, you will pass in one direction 
        const oHead = this.snake.snakePos[this.snake.snakePos.length -1];
        const newHead ={
            x : oHead.x + des.x,
            y : oHead.y + des.y,
            flag : 'h',
            id : Math.random()
        }
        this.isEnd(newHead);
        this.snake.snakePos.push(newHead);

        oHead.flag = 'b';
    },
    move(des){ //  When the snake moves , From head to body , Remove the original tail , That is to say push A head ,shift A tail 
        this.addHead(des);
        this.snake.snakePos.shift();

    },

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

The moving diagram is as follows

# Summer Challenge # OpenHarmony be based on JS The greedy snake realized _JS_02

The death judgment of the snake

Be a snake head x >= On the map x Maximum || x < 0 || Snakehead Y >= On the map Y Maximum || Y < 0 || Snakehead （x,y） == Any one of the snake's body (x,y)

isEnd(newHead){ //  Determine whether the snake is dead 
        if(newHead.x >= this.w || newHead.x < 0 || newHead.y >= this.h || newHead.y < 0){
            this.setIsEnd();
        }

        let is = this.snake.snakePos.find((item)=>{ // Loop query whether you hit yourself 
            return item.x == newHead.x && item.y == newHead.y;
        })
        if(is){
            this.setIsEnd(); // End the game 
        }
    },
setIsEnd(){
        clearInterval(this.timeId); // Clear the snake's movement timer 
        this.isEndP = true; // This attribute is used to display the game result interface 
    }

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

Operate the movement of the snake

-20,20,10,-10, It was originally used to determine whether the current moving direction conflicts with the original direction , Later, it was found that the coordinate axis was still used , I'm too lazy to change

    intervalMove(d){ //  Run automatically 
        if(!this.isStart) return;// Decide whether to start 
        clearInterval(this.timeId); // Clear the previous timer 
        this.timeId = setInterval(()=>{
            const head = this.snake.snakePos[this.snake.snakePos.length - 1];
            this.move(d);
            if(this.snakeBody * head.x == this.food.x && this.food.y == this.snakeBody * head.y ){ // Snakes eat food 
               this.addHead(d); // New snakeheads , This does not remove the tail 
               this.randomFood(); // Regenerate food again 
                this.result++; // fraction 
            }
        },1000/this.level); //this.level Level , Determine the speed at which the snake moves 
    },
    isCuurDes(value = '',x1,x2){
        //  Judge the direction of the current snake ,x1  For a new direction ,x2 For the previous direction , It is mainly to judge whether the clicked button is left or right , Up and down conflict 
        if((+x1 + +x2) == 0 ) return false; // here +x1,+x2  It is used to convert strings into numbers 
        if(this.isEndP) return;// When the game is over, you can't change the direction  
        this.currDes = value; // Save the direction 
        return true;
    },
clickBut(m){//  Click button 
        const value = m.target.dataSet.value;
        switch(value){
            case "-20":{ // On 
              // Judge whether the direction is opposite , If it is the opposite, do not switch the direction 
              this.isCuurDes(this.des[value],this.des[value].y,this.currDes.y)
                && this.intervalMove(this.des[value]);
              break;
            }
            case "20":{//  Next 
                this.isCuurDes(this.des[value],this.des[value].y,this.currDes.y)
                  && this.intervalMove(this.des[value]);
                break;
            }
            case "-10":{ // Left 
                this.isCuurDes(this.des[value],this.des[value].x,this.currDes.x)
                  && this.intervalMove(this.des[value]);
                break;
            }
            case "10":{ //  Right 
                this.isCuurDes(this.des[value],this.des[value].x,this.currDes.x)
                  && this.intervalMove(this.des[value]);
                break;
            }
            case "1": { // Start or pause 
                if(this.isEndP) return
                this.isStart = !this.isStart;
                if(this.isStart && !this.isEndP){
                    this.intervalMove(this.currDes);
                }else{
                    clearInterval(this.timeId);
                }
                break;
            }
        }
    }

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

Specific properties and methods

attribute

name	type	remarks
result	number	fraction
conW	number	Container width
conH	number	Container height
snakeBody	number	Snake body unit
h	number	Gridded y length
w	number	Gridded x length
grid	Array<Array>	Grid map
food	object	food
timeId	number	Timer id
level	number	Game difficulty level
des	Object<Object>	Four directions of the snake
isStart	Boolean	Decide whether to start
snake	Object<Object>	The snake
currDes	object	The current direction of the snake
isEndP	Boolean	Determine if the game is over

Method

name	Parameters	remarks
init	nothing	Initialization function
onShow	nothing	Framework life cycle hook function
isEnd	newHead : object	Determine if the game is over
setIsEnd	nothing	Set relevant data about the end of the game
randomFood	nothing	Randomly generate food
addHead	des : object	Add new head
move	des : object	The movement of the snake
intervalMove	d ：object	The snake moves automatically
isCuurDes	value:object ,x1:string,x2:string	Timer id
clickBut	m:object	Click events that operate the movement of snakes
reInit	nothing	Restart the game

Code

HTML

<div class="container">
    <div class="game-container" id="con1" ref="con" >
        <div class="food" style="left:{{ food.x }}px ;top: {{ food.y }}px;" ></div>
        <div for="{{snake.snakePos}}" tid="id" class=" {{ $item.flag == 'b' ?'snake-body' : 'snake-head' }}" style="left: {{$item.x * snakeBody}}px;top:{{$item.y * snakeBody}};" >
        </div>
    </div>
    <div class="buts">
    <div class="center">
        <button data-value="-20" class="but" @click="clickBut">
                On 
        </button>
    </div>
    <div class="center" >
        <button data-value="-10" class="but" @click="clickBut">

                Left 

        </button>
        <button data-value="1" class="but" @click="clickBut">

               {{ isStart ? ' Pause ' : ' Start ' }}

        </button>
        <button data-value="10" class="but" @click="clickBut">

                Right 

        </button>
    </div>
    <div class="center">
        <button data-value="20" class="but" @click="clickBut">

                Next 
           </button>
        </div>

    </div>
    <div class="end" if="{{isEndP == true}}">
        <div>
            <text>
                      Game over ！
            </text>
        </div>
        <div>
            <text>
             The current score ：{{result}}  branch 
            </text>
        </div>
        <div @click="reInit" style="width: 120px;margin: 10px 0 0 30px; border-radius: 5px;">
            <text>
                 Click reopen 
            </text>
        </div>
    </div>
    <div class="result">
          <text>
               fraction :{{result}}
          </text>
    </div>
</div>

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.

css

.container{
    height: 100%;
    width: 100%;
}
.container,.buts, .end{

    display: flex;
    flex-direction: column;
    position: relative;

}
.game-container{
    width: 100%;
    height: 540px;
    position: relative;
    background-color: #85ce61;

}
.snake-head{
    height: 20px;
    width: 20px;
    position: absolute;
    border-radius: 10px;
    background-color: red;
}
.snake-body{
    height: 20px;
    width: 20px;
    position: absolute;
    border-radius: 10px;
    background-color: white;

}
.food{
    height: 20px;
    width: 20px;
    position: absolute;
    border-radius: 10px;
    background-color: black;
}
.center{
    display: flex;
    justify-content:center;
    height: 50px;
    margin:2px 0;
}
.but{
    width: 50px;
    border-radius: 5px;
    font-weight: 700;
    margin: 0 2px ;
    background-color: #85ce61;
}
.buts{
    margin-top:10px ;
}
.end{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-25%,-100%);
}
.result{
    position: fixed;
    top: 0;
    left: 260px;
}

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.
      31.
      32.
      33.
      34.
      35.
      36.
      37.
      38.
      39.
      40.
      41.
      42.
      43.
      44.
      45.
      46.
      47.
      48.
      49.
      50.
      51.
      52.
      53.
      54.
      55.
      56.
      57.
      58.
      59.
      60.
      61.
      62.
      63.
      64.
      65.
      66.
      67.

JS

export default {
    data: {
        result:0,
        conW : 0,//  The game interface is wide 
        conH : 0,
        snakeBody: 20,
        h:0,
        w:0,
        grid:[],
        food:{
            x:0,
            y:0
        },
        timeId:null, //  timer id
        level:5,// gear 
        des:{// The direction of the snake 
          "-20":{ //  Move one bit up 
              x:0,
              y:-1,
              flag: ''
          },
          "20":{// Down 
              x:0,
              y:1,
              flag: ''
          },
          "10":{ // Right 
              x:1,
              y:0,
              flag: ''
          },
          "-10":{ // Left 
              x:-1,
              y:0,
              flag: ''
          }
        },
        isStart:false,
        snake:{
            snakePos:null
        },
        currDes:{x:1,y:0},
        isEndP:false

    },
    init(){
        const snakePos = [
            {
                x : 0,
                y : 0,
                flag : 'b',
                id : Math.random()
            },
            {
                x : 1,
                y : 0,
                flag : 'b',
                id : Math.random()
            },
            {
                x : 2,
                y : 0,
                flag : 'h',
                id : Math.random()
            }
        ];
        this.snake.snakePos = snakePos
        this.randomFood()

    },
    onShow(){ //  First initialization 
        this.conH = this.$refs["con"].getBoundingClientRect().height ;
        this.conW = this.$refs["con"].getBoundingClientRect().width ;
        this.h = Math.floor(this.conH / this.snakeBody);
        this.w = Math.floor(this.conW / this.snakeBody);
        for (var i = 0; i < this.w; i++) {
            this.grid.push([])
            for (var j = 0; j < this.h; j++) {
                this.grid[i].push({
                    x: i,
                    y: j
                });
            }
        }
        this.init();

    },
    isEnd(newHead){
        if(newHead.x >= this.w || newHead.x < 0 || newHead.y >= this.h || newHead.y < 0){
            this.setIsEnd();
        }

        let is = this.snake.snakePos.find((item)=>{
            return item.x == newHead.x && item.y == newHead.y
        })
        if(is){
            this.setIsEnd();
        }




    },
    setIsEnd(){
        clearInterval(this.timeId)
        this.isEndP = true
    }
    ,
    randomFood(){ // Randomly generate food 
        while(true){
            let x = Math.floor(Math.random() * this.conW);
            let y = Math.floor(Math.random() * this.conH);
            x = x - (x % this.snakeBody);
            y = y - (y % this.snakeBody);
            let is = this.snake.snakePos.find((item)=>{
                return item.x == x && item.y == y
            })
            this.food.x = x;
            this.food.y = y;
            if(!is) {
                break;
            }
        }
    },
    addHead(des){
        const oHead = this.snake.snakePos[this.snake.snakePos.length -1];
        const newHead ={
            x : oHead.x + des.x,
            y : oHead.y + des.y,
            flag : 'h',
            id : Math.random()
        }
        this.isEnd(newHead);
        this.snake.snakePos.push(newHead);

        oHead.flag = 'b';
    },
    move(des){ //  When the snake moves , From head to body , Remove the original tail , That is to say push A head ,shift A tail 
        this.addHead(des);
        this.snake.snakePos.shift();

    },
    intervalMove(d){ //  Run automatically 
        if(!this.isStart) return
        clearInterval(this.timeId);
        this.timeId = setInterval(()=>{
            const head = this.snake.snakePos[this.snake.snakePos.length - 1];
            this.move(d);
            if(this.snakeBody * head.x == this.food.x && this.food.y == this.snakeBody * head.y ){
               this.addHead(d);
               this.randomFood();
                this.result++;
            }
        },1000/this.level);
    },
    isCuurDes(value = '',x1,x2){
        //  Judge the direction of the current snake ,x1  For a new direction ,x2 For the previous direction , It is mainly to judge whether the clicked button is left or right , Up and down conflict 
        if((+x1 + + x2) == 0 ) return false;
        if(this.isEndP) return ;
        this.currDes = value; // Save the direction 

        return true;
    },
    clickBut(m){//  Click button 
        const value = m.target.dataSet.value;
        switch(value){
            case "-20":{ // On 
              // Judge whether the direction is opposite , If it is the opposite, do not switch the direction 
              this.isCuurDes(this.des[value],this.des[value].y,this.currDes.y)
                && this.intervalMove(this.des[value]);
              break;
            }
            case "20":{//  Next 
                this.isCuurDes(this.des[value],this.des[value].y,this.currDes.y)
                  && this.intervalMove(this.des[value]);
                break;
            }
            case "-10":{ // Left 
                this.isCuurDes(this.des[value],this.des[value].x,this.currDes.x)
                  && this.intervalMove(this.des[value]);
                break;
            }
            case "10":{ //  Right 
                this.isCuurDes(this.des[value],this.des[value].x,this.currDes.x)
                  && this.intervalMove(this.des[value]);
                break;
            }
            case "1": { // Start or pause 
                if(this.isEndP) return
                this.isStart = !this.isStart;
                if(this.isStart && !this.isEndP){
                    this.intervalMove(this.currDes);
                }else{
                    clearInterval(this.timeId);
                }
                break;
            }
        }
    },
    reInit(){
        this.init();
        this.isEndP = false;
        this.isStart = false;
        this.currDes={x:1,y:0};
    }


}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.