原生JS版的貪吃蛇

簡版效果圖

上程式碼

css

<style>

        body, div, p, input{
            padding:0;
            margin:0;
        }
        #box{
            width:1410px;
            height:1005px;
            margin:50px auto;
        }
        #map{
            width:1000px;
            height
 
:1000px;
            background-color:#d1d5d3;
            position:relative;
            display:inline-block;
        }
        #panel{
            width:400px;
            height:1000px;
            display:inline-block;
            position:relative;
            vertical-align:top;
        }
        #log
 
{
            width:100%;
            height:90%;
            background-color:#d1d5d3;
            overflow:auto;
        }
        #panel .btn{
            width:150px;
            height:90px;
            font-size:30px;
            line-height:90px;
            text-align:center;
            margin:8px 20
 
px;
        }
        #map .snake{
            position:absolute;
            background-color:blueviolet;
        }
        #map .food{
            position:absolute;
            background-color:#303ad2;
        }
        #map .head{
            background-color:red;
            z-index:999;
        }
        #socre{
            font-size:50px;
            line-height:100px;
            padding-left:20px
        }
    </style>

html

    <div id="box">
        <div id="map"></div>
        <div id="panel">
            <div id="log"></div>
            <p id="socre">累計分數:</p>
        </div>
    </div>

js

以下為部分程式碼，完整程式碼請移步github

   class Snake {
            constructor(container, oriLenth, size, console){
                this.container = container;
                this.snake = [];
                this.size = size;
                this.HeadCorrd = [1, oriLenth];
                this.Console = console;
                this.Score = 0;
                this.InitSnake(oriLenth);
            }

            get Head(){
                return this.snake[0];
            }

            get Tail(){
                return this.snake[this.Length - 1];
            }

            get Length(){
                return this.snake.length;
            }

            set SetDirection(direction){
                this.direct = direction;
            }

            set SetFood(food){
                this.food = food;
            }

            get GetScore(){
                return this.Score;
            }

            CheckHeadCoord(){
                if(this.HeadCorrd[0] === -1 ||
                    this.HeadCorrd[0] === _map.Max_X ||
                    this.HeadCorrd[1] === -1 ||
                    this.HeadCorrd[1] === _map.Max_Y){
                    document.onkeydown = null;
                    return false;
                }
                else

                    return true;
            }

            InitSnake(length){
                var node;
                for(var i = 0; i < length; i++){
                    node = this.AddNode();
                    node.style.left = i * this.size + "px";
                    node.style.top = 0;
                    this.snake.push(node);
                    this.container.appendChild(node);
                }
                this.snake.reverse();
                this.snake[0].className += " head";
            }

            AddNode(){
                var node = document.createElement("div");
                node.style.width = this.size + 'px';
                node.style.height = this.size + 'px';
                node.className = 'snake';
                return node;
            }

            Move(){

                if(!this.direct){
                    return;
                }
                //移動頭部

                var headCoord = [this.Head.style.top, this.Head.style.left];
                var target;
                var flag = true;
                switch(this.direct){
                    case 37:
                        this.direct = 'left';
                        if(this.CheckHeadCoord()){
                            target = this.Head.offsetLeft - this.size;
                            if(target >= 0){
                                this.Head.style.left = target + "px"
                            }
                            this.HeadCorrd[1]--;
                        }
                        else flag = false;
                        break;
                    case 38:
                        this.direct = 'up';
                        if(this.CheckHeadCoord()){
                            target = this.Head.offsetTop - this.size;
                            if(target >= 0){
                                this.Head.style.top = target + "px"
                            }
                            this.HeadCorrd[0]--;
                        }
                        else flag = false;
                        break;
                    case 39:
                        this.direct = 'right';
                        if(this.CheckHeadCoord()){
                            target = this.Head.offsetLeft + this.size;
                            if(target < _map.Width){
                                this.Head.style.left = target + "px"
                            }
                            this.HeadCorrd[1]++;
                        }

                        else flag = false;
                        break;
                    case 40:
                        this.direct = 'down';
                        if(this.CheckHeadCoord()){
                            target = this.Head.offsetTop + this.size;
                            if(target < _map.Width){
                                this.Head.style.top = target + "px"
                            }
                            this.HeadCorrd[0]++;
                        }

                        else flag = false;
                        break;

                }

                if(flag){
                    this.Tail.style.top = headCoord[0];
                    this.Tail.style.left = headCoord[1];
                    this.snake.splice(1, 0, this.Tail);
                    this.snake.pop();
                    this.Eate();
                }

                else {
                    this.Console.Log("撞了南牆，遊戲結束")
                }
                //                this.Console.Log(`${this.HeadCorrd[0]}_${this.HeadCorrd[1]}`);
                //移動尾部
            }


            Eate(){
                if(this.food.Coord[1] + 1 === this.HeadCorrd[0] &&
                    this.food.Coord[0] + 1 === this.HeadCorrd[1]){
                    this.food.foodElement.className = "snake";
                    this.snake.push(this.food.foodElement);
                    this.container.appendChild(this.food.foodElement);

                    this.Console.Log(`累計分數:${this.Score++}`);

                    var food = new Food(this.container, this.Console, _map.Size, _map.Max_X, _map.Max_Y);


                    food.GenerateFood();
                    this.food = food;
                }


            }


        }