Neil coding之路

Have a nice day

0%

Javascript遊戲製作(一)貪食蛇

發表於 更新於 分類於 ， Disqus：

前言

我們可以利用Stack的資料結構做出簡易的貪食蛇

程式碼

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
var canvas = document.getElementById("myCanvas"); //抓取元素 myCanvas dom
var ctx = canvas.getContext("2d");//設置為2D
var scoretext = document.getElementById("Score");//抓取分數dom
var snack = { body: [{ x: 180, y: 140 }, { x: 170, y: 140 }, { x: 160, y: 140 }, { x: 150, y: 140 }, { x: 140, y: 140 }], bodysize: 5, direct: "right" };//設置snack身體 長度 方向
var apple = {};//設置蘋果位置
var score = 0;//分數
move();//蛇移動
applecreate();//創造蘋果
var time = setInterval(move, 100); //計時器

document.addEventListener("keydown", function (e) //監聽按下的鍵盤事件
{
    if (e.keyCode == "37") {
        snack.direct = "left";
    }
    else if (e.keyCode == "39") {
        snack.direct = "right";

    }
    else if (e.keyCode == "38") {
        snack.direct = "top";

    }
    else if (e.keyCode == "40") {
        snack.direct = "down";

    }
});
//snackmove
function move() {
    updatescore(); //更新分數
    ctx.clearRect(0, 0, canvas.width, canvas.height); //清理畫布
    ctx.fillStyle = "#9fe8fa"; //填充顏色
    ctx.fillRect(0, 0, 300, 300);
    ctx.fillStyle = "#26baee"; //填充顏色
    ctx.fillRect(apple.x, apple.y, 10, 10);
    ctx.fillStyle = "#FFE"; //填充顏色
    ctx.strokeStyle = "#26baee"; //填充邊框顏色
    ctx.lineWidth = 1; //邊框大小
    direction(); //判定方向
    //畫出蛇身體
    for (var i = 0; i < snack.body.length; i++) {
        ctx.fillRect(snack.body[i].x, snack.body[i].y, 10, 10);
        ctx.strokeRect(snack.body[i].x, snack.body[i].y, 10, 10);
    }
    //超過size陣列清掉
    for (var i = 0; i < snack.body.length; i++) {
        if (i >= snack.bodysize)
            snack.body.pop();
    }
}
//蛇方向
function direction() {
    if (snack.direct == "left") {
        snack.body.unshift({ x: snack.body[0].x - 10, y: snack.body[0].y });
    }
    else if (snack.direct == "top") {
        snack.body.unshift({ x: snack.body[0].x, y: snack.body[0].y - 10 });
    }
    else if (snack.direct == "down") {
        snack.body.unshift({ x: snack.body[0].x, y: snack.body[0].y + 10 });
    }
    else if (snack.direct == "right") {
        snack.body.unshift({ x: snack.body[0].x + 10, y: snack.body[0].y });

    }
    eatapple();
    gameover();
}
//判斷是否死掉
function gameover() {
    for (var i = 1; i < snack.body.length; i++) {
        if (snack.body[0].x == snack.body[i].x && snack.body[0].y == snack.body[i].y) {
            reset();
            break;
        }
    }
    if (snack.body[0].x < 0 || snack.body[0].x >= 300 || snack.body[0].y >= 300 || snack.body[0].y < 0) {
        reset();
    }
}
//創造蘋果
function applecreate() {
    var x = Math.floor(Math.random() * 30) * 10; //0~29之間在乘10
    var y = Math.floor(Math.random() * 30) * 10; //0~29之間在乘10
    //檢查蘋果是否在蛇身上
    for (var i = 0; i < snack.body.length; i++) {
        if (x == snack.body[i].x && y == snack.body[i].y) {
            x = Math.floor(Math.random() * 30) * 10;
            y = Math.floor(Math.random() * 30) * 10;
            i = 0;
        }
    }
    apple.x = x;
    apple.y = y;
}
//吃掉蘋果
function eatapple() {
    if (snack.body[0].x == apple.x && snack.body[0].y == apple.y)//蛇碰到蘋果吃掉
    {
        applecreate();
        snack.bodysize++;
        score += 10;
    }
}
//更新分數
function updatescore() {
    scoretext.innerText = score;
}
//初始化
function reset() {
    snack.body = [{ x: 180, y: 140 }, { x: 170, y: 140 }, { x: 160, y: 140 }, { x: 150, y: 140 }, { x: 140, y: 140 }];
    snack.bodysize = 5;
    snack.direct = "right";
    move();
    applecreate();
    score = 0;
}

Demo

demo