在能正式運作前，我們先將上篇所提到的元素產生畫面。

背景圖

由於蛇的動畫操作會需要使用html 標籤<canvas>來產生圖像，並搭配js操作圖像的移動，因此背景我先使用canvas的畫框功能 strokeRect(start_x, start_y, width, height)，來框出邊界

let bg_cvs = document.getElementById("bg_canvas");
let ctx = bg_cvs.getContext("2d");
ctx.strokeRect(0, 0, max_len, max_width);

蛇

除了蛇的長度外，額外定義每個單位長(每格)佔多少長寬，對應的會是蛇在水平和垂直方向能走的步數。

let snake = [];
let snake_len = 3; // start len of snake
let snake_sz = 30; // 蛇最多約能走的步數，長邊: 600/30 = 20, 短邊: 300/30 = 10; (要再減掉原先的身體長)


function draw_snake()
{
    for (let i = 0; i<snake_len; i++)
    {
        snake[i] = {x: i * snake_sz, y:0};

        ctx.fillStyle = 'rgb(' + Math.floor(255-50.5*(i+1)) + ',' + Math.floor(255-20.5*(i+1)) + ',200)';
        ctx.fillRect(snake[i].x, snake[i].y, snake_sz, snake_sz);
    }
    ctx.stroke();
}

食物

隨機產生位置，但要注意所產生的位置不能和蛇重疊，所以每判斷到食物的位置會與身體相同時，就再遞迴呼叫重新產生，直到位置不同。

function add_food()
{
    let flag = true;
    ctx.fillStyle ="blue";

    food_x = Math.floor(Math.random()*570);
    food_y = Math.floor(Math.random()*270);
    for (let i = 0; i<snake_len; i++)
    {
        if (food_x === snake[i].x && food_y===snake[i].y)
        {
            add_food();
        }
    }
    ctx.fillRect(food_x, food_y, snake_sz, snake_sz);
}

有這些元素後，之後就可以透過上篇提到的event listener，取得鍵盤的代號，搭配方向的定義，來操作蛇的移動，這部分待下篇講述。

參考資料:

1. w3school