This is the 18th day of my participation in the More text Challenge. For more details, see more text Challenge

This is just a college student blogger documenting the entire process of completing a Web project. Welcome everyone to give directions, thank you!

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Snake</title>
</head>
<body>
    <button onclick="gamaStart()">Start</button>
    <h1 id="score_id">0</h1>
    <canvas width="400" height="400" id="canvas_id"></canvas>
</body>
</html>
Copy the code

The first step is the main page

First write a button to start the game:

<button onclick="gamaStart()">Start</button>

When the button is clicked, the game starts.

Then, because I wanted the score to be visible, I used the H1 tag to display the score.

Then create a new canvas that is 400 by 400 pixels.

Step 2: Set the background

var gameInterval

function gamaStart() {
    gameInterval = setInterval(gameRoutine, 1000)// Execute every 1000 milliseconds

}

function gameRoutine(){
    updateCanvas() // Update the canvas
}

function updateCanvas(){
    var canvas = document.getElementById('canvas_id') / / get the canvas
    var context = canvas.getContext('2d') // Get the canvas context

    context.fillStyle = 'black' // Fill it with black
    context.fillRect(0.0,canvas.width,canvas.height) // The range of padding


}
Copy the code

The start game function is executed by first fetching the canvas and filling it with black.

Then set the canvas to be updated every 1000 milliseconds, which is 1 second.

Let’s start with the main logic of the game

Step 3: Draw the snake

var BLOCK_SIZE = 20 // Each block has 20 pixels
var BLOCK_COUNT = 20 / / 20 grid

var gameInterval
var snack

function gamaStart() {
    snack ={
        body: [{x:BLOCK_COUNT/2 , y:BLOCK_COUNT/2}].size: 1.direction: {x:0 , y: -1}
    }
    gameInterval = setInterval(gameRoutine, 1000)// Execute every 1000 milliseconds}}Copy the code

Var BLOCK_SIZE = 20 means there are 20 pixels per block

Var BLOCK_COUNT = 20 indicates a total of 20 cells.

snack ={
        body: [{x:BLOCK_COUNT/2 , y:BLOCK_COUNT/2}].size: 1.direction: {x:0 , y: -1}}Copy the code

Where body represents each coordinate of the body block, size represents the length, and direction represents the initial direction upward.

function gameRoutine(){
    moveSnack() / / snake mobile
    updateCanvas() // Update the canvas
}

function moveSnack(){
    var newBlock = {
        x: snack.body[0].x + snack.direction.x, // New block x coordinate
        y: snack.body[0].y + snack.direction.y // New block y coordinate
    }

    snack.body.unshift(newBlock) // Add to the front of the array


    while(snack.body.length > snack.size){
        snack.body.pop()  // After the snake moved, its tail was broken}}function updateCanvas(){
    var canvas = document.getElementById('canvas_id') / / get the canvas
    var context = canvas.getContext('2d') // Get the canvas context

    context.fillStyle = 'black' // Fill it with black
    context.fillRect(0.0,canvas.width,canvas.height) // The range of padding
    // Fill each grid with a color
    for(var i=0; i<snack.body.length; i++){ context.fillRect( snack.body[i].x * BLOCK_SIZE, snack.body[i].y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE ) } }Copy the code

Write a moveSnack function to move the snake, add the head, remove the tail, and update the canvas so the snake is moving.

UpdateCanvas () uses a for loop to draw the snake.