简易贪吃蛇（原创）

Html

Css

#myCanvas {
	border:1px solid gray;
}

var init = function() {
    var cxt = game.context('myCanvas');
    game.coordinate();
    game.back(cxt);
    game.food(cxt);
    game.snake(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y);
};
document.onkeydown = function(e) {
    var cxt = game.context('myCanvas');
    switch (e.keyCode) {
        case 13:
            console.log("********开始********");
            game.attribute.initialize = false;
            break;
        case 87:
            game.attribute.initialize = false;

if (!animate.attribute.up && !animate.attribute.down) {
                animate.attribute.up = true;
                animate.attribute.left = false;
                animate.attribute.down = false;
                animate.attribute.right = false;

animate.attribute.directionFrist = false;
                animate.up(cxt);
            }
            console.log("********上********");
            break;
        case 83:
            if (animate.attribute.directionFrist) {
                return
            }
            game.attribute.initialize = false;

if (!animate.attribute.down && !animate.attribute.up && !animate.directionFrist) {
                animate.attribute.up = false;
                animate.attribute.left = false;
                animate.attribute.down = true;
                animate.attribute.right = false;
                animate.down(cxt);
            }
            console.log("********下********");
            break;
        case 65:
            game.attribute.initialize = false;
            if (!animate.attribute.left && !animate.attribute.right) {
                animate.attribute.up = false;
                animate.attribute.left = true;
                animate.attribute.down = false;
                animate.attribute.right = false;
                animate.attribute.directionFrist = false;
                animate.left(cxt);
            }
            console.log("********左********");
            break;
        case 68:
            game.attribute.initialize = false;
            if (!animate.attribute.right && !animate.attribute.left) {
                animate.attribute.up = false;
                animate.attribute.left = false;
                animate.attribute.down = false;
                animate.attribute.right = true;
                animate.attribute.directionFrist = false;
                animate.right(cxt);
            }
            console.log("********右********");
            break;
    }
};
var animate = {
    attribute: {
        delay: 10,
        time: 0,
        up: false,
        left: false,
        down: false,
        right: false,
        directionFrist: true
    },
    draw: function(cxt, x, y) {
        game.clearCanvas(cxt);
        game.back(cxt);
        game.food(cxt);
        game.snake(cxt, x, y);
    },
    up: function(cxt) {
        if (this.attribute.up) {
            if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
                this.attribute.time = 0;
                game.attribute.snake.head.y -= 1 * game.attribute.snake.size;
                this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
            }
            this.attribute.time += 1;
            if (game.attribute.snake.head.y >= 0) {
                requestAnimationFrame(() => {
                    animate.up(cxt);
                });
            } else {
                game.over(cxt);
            }
        }
    },
    left: function(cxt) {
        if (this.attribute.left) {
            if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
                this.attribute.time = 0;
                game.attribute.snake.head.x -= 1 * game.attribute.snake.size;
                this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
            }
            this.attribute.time += 1;
            if (game.attribute.snake.head.x >= 0) {
                requestAnimationFrame(() => {
                    animate.left(cxt);
                });
            } else {
                game.over(cxt);
            }
        }
    },
    down: function(cxt) {
        if (this.attribute.down) {
            if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
                this.attribute.time = 0;
                game.attribute.snake.head.y += 1 * game.attribute.snake.size;
                this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
            }
            this.attribute.time += 1;
            if (game.attribute.snake.head.y <= (game.attribute.back.height)) {
                requestAnimationFrame(() => {
                    animate.down(cxt);
                });
            } else {
                game.over(cxt);
            }
        }
    },
    right: function(cxt) {
        if (this.attribute.right) {
            if (this.attribute.time == this.attribute.delay || this.attribute.time == 0) {
                this.attribute.time = 0;
                game.attribute.snake.head.x += 1 * game.attribute.snake.size;
                this.draw(cxt, game.attribute.snake.head.x, game.attribute.snake.head.y)
            }
            this.attribute.time += 1;
            if (game.attribute.snake.head.x <= game.attribute.back.width) {
                requestAnimationFrame(() => {
                    animate.right(cxt);
                });
            } else {
                game.over(cxt);
            }
        }
    }
};
var game = {
    attribute: {
        initialize: true,
        snake: {
            color: '#DC143C',
            size: 10, // 蛇的大小
            head: { // 蛇头
                x: 250,
                y: 250
            },
            length: 10, //蛇身默认长度
            array: new Array(),
            is: true
        },
        food: {
            color: '#00FA9A',
            coordinate: new Array(),
            is: true
        },
        back: {
            strokeStyleColor: '#F5F5F5',
            width: 500,
            height: 500
        },
        coordinateData: new Array()
    },
    over: function(cxt) {
        alert('游戏结束');
        this.clearCanvas(cxt);
        this.attribute.initialize = true;
        this.attribute.snake.head.x = 250;
        this.attribute.snake.head.y = 250;
        this.attribute.snake.length = 10;
        this.attribute.snake.array.length = 0;
        this.attribute.snake.is = true;
        this.attribute.food.coordinate.length = 0;
        this.attribute.food.is = true;
        animate.attribute.up = true;
        animate.attribute.left = false;
        animate.attribute.down = false;
        animate.attribute.right = false;

this.back(cxt);
        this.food(cxt);
        this.snake(cxt, this.attribute.snake.head.x, this.attribute.snake.head.y);
    },
    clearCanvas: function(cxt) {
        cxt.clearRect(0, 0, this.attribute.back.width, this.attribute.back.height);
    },
    coordinate: function() {
        var array = new Array()
        for (var x = 0; x < (this.attribute.back.width / this.attribute.snake.size); x++) {
            array[x] = new Array()
            for (var y = 0; y < (this.attribute.back.height / this.attribute.snake.size); y++) {
                array[x][y] = [(x * this.attribute.snake.size), (y * this.attribute.snake.size)]
            }
        }
        this.attribute.coordinateData = array;
    },
    food: function(cxt) {
        let array = new Array()
        this.attribute.coordinateData.forEach((item, itmeIndex) => {
            item.forEach((data, dataIndex) => {
                for (let index in this.attribute.snake.array) {
                    if (data[0] == this.attribute.snake.array[index][0] && data[1] == this.attribute.snake.array[index][1]) {
                        array.push([itmeIndex, dataIndex])
                    }
                }
            });
        });
        let widthCoordinate = this.attribute.coordinateData[0].length,
            heightCoordinate = this.attribute.coordinateData.length,
            Boole = false;

if (this.attribute.food.is) {
            do {
                var coordinate = [X = Math.round(Math.random() * widthCoordinate), Y = Math.round(Math.random() * heightCoordinate)];
                for (let i in array) {
                    if (array[i][0] == coordinate[0] && array[i][1] == coordinate[1]) {
                        Boole = true;
                    } else {
                        Boole = false;
                    }
                }
            } while (Boole);
            this.attribute.food.coordinate = coordinate;
            this.attribute.food.is = false;
        }
        cxt.fillStyle = this.attribute.food.color;
        cxt.fillRect(
            this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][0],
            this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][1], this.attribute.snake.size, this.attribute.snake.size)
    },
    drawPath: function(cxt) {
        var arr = this.attribute.snake.array;
        if (this.attribute.initialize) {
            for (var i = 0; i < this.attribute.snake.length; i++) {
                arr[i] = [this.attribute.snake.head.x, this.attribute.snake.head.y + (i * this.attribute.snake.size)]
            }
        } else {
            var drawPathArr = new Array()
            for (var i = 0; i < this.attribute.snake.length; i++) {
                if (i == 0) {
                    drawPathArr[i] = [this.attribute.snake.head.x, this.attribute.snake.head.y]
                } else if (i > 0) {
                    drawPathArr[i] = this.attribute.snake.array[i - 1]
                }
            }
            this.attribute.snake.array = drawPathArr;
        }
        if (this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][0] == this.attribute.snake.head.x && this.attribute.coordinateData[this.attribute.food.coordinate[0]][this.attribute.food.coordinate[1]][1] == this.attribute.snake.head.y) {
            this.attribute.snake.length += 1;
            this.attribute.food.is = true;
            this.food(cxt);
        }

if (!this.attribute.snake.is) {
            this.over(cxt)
            return
        }
        this.attribute.snake.array.forEach((item, index) => {
            if (index > 0) {
                if (item[0] == this.attribute.snake.head.x && item[1] == this.attribute.snake.head.y) {
                    this.attribute.snake.is = false;
                    return;
                }
            }
        });
        return arr
    },
    snake: function(cxt, x, y) {
        var cxt = this.context('myCanvas'),
            snakeWidth = this.attribute.snake.size,
            snakeHeight = this.attribute.snake.size,
            arrary = this.drawPath(cxt); // 获取行动路径

cxt.fillStyle = this.attribute.snake.color;

for (let index in arrary) {
            cxt.fillRect(arrary[index][0], arrary[index][1], snakeWidth, snakeHeight);
        }
    },
    context: function(id) {
        var c = document.getElementById(id);
        var cxt = c.getContext("2d");
        return cxt
    },
    back: function(cxt) {
        cxt.strokeStyle = this.attribute.back.strokeStyleColor;
        var widthLen = this.attribute.back.width / this.attribute.snake.size,
            heightLen = this.attribute.back.height / this.attribute.snake.size;
        for (var j = 0; j < heightLen; j++) {
            for (var i = 0; i < widthLen; i++) {
                cxt.lineWidth = 1;
                cxt.strokeRect(i * this.attribute.snake.size,
                    j * this.attribute.snake.size,
                    this.attribute.snake.size,
                    this.attribute.snake.size);
            }
        }
    }
};

init();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

简易贪吃蛇（原创）

代码描述：简易贪吃蛇,按w,s,a,s开始并控制方向

更新时间：2020-02-19 00:03:51
简易贪吃蛇

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

123456789

相关代码

简易贪吃蛇（原创）

最新