用jquery寫貪吃蛇

時間 2019-12-12

標籤 jquery 貪吃欄目 JQuery 简体版

原文原文鏈接

須要具有知識：
1.html、css基礎
2.jquery基礎javascript

具體實現方法：css

建立遊戲界面

.bts
        {
            display: flex;
        }
        .bt
        {
            width: 60px;
            height: 24px;
            line-height: 24px;
            font-size: 18px;
            text-align: center;
            background: #ede;
            margin-left: 20px;
        }
        .bg
        {
            width: 400px;
            height: 400px;
            background: #ddd;
            margin-top: 30px;
            position: relative;
        }


    <div class="bts">
        <div class="start bt" onclick="start()">開始</div>
        <!-- <div class="pause bt" onclick="pause()">暫停</div> -->
    </div>
    <div class="bg">
        
    </div>

其中bts是按鈕組，由於開始打算寫個暫停，後面放棄了，bt是按鈕，bg是遊戲界面（大小最好爲10,15，20的倍數，比較容易計算遊戲內方塊的）,其中bg（遊戲界面背景）是才用relative定位，蛇與食物採用用absolute定位。html

定義遊戲主要函數
首先，假設遊戲內方塊的個數爲2020，每一個方塊的大小爲20px20px（固然爲了適配手機，能夠轉換爲rem去適配網頁大小），蛇與食物的大小爲一個方塊的大小(food爲食物，snakes爲蛇）
其中由於border會在div的外面去渲染，因此，大小爲20的方塊，實際寬高爲18px，加上上下各1px的邊框，一個食物與蛇的大小爲20px*20pxjava

.snakes,.food
        {
            position: absolute;
            width: 18px;
            height: 18px;
            border: solid 1px #444;
        }
        .snakes
        {
            background: red;
        }
        .food
        {
            background: yellow;
        }

定義遊戲中的變量，

var snakes = [];    //存儲蛇的位置
    var stepX = 20;    //默認向X行走的像素
    var stepY = 0;    //默認向Y行走的像素
    var live = false;    //是否存活
    var isPause = false;    //是否暫停 ，未用
    var food = {};    //食物的位置
    var keydown = 'right';    //默認方向爲右

start()函數，點擊開始遊戲時候，執行的操做

start = function(){    //開始
        if(!live)
        {
            stepX = 20;
            stepY = 0;
            keydown = 'right';
            live = true;
            $(".snakes").remove();
            snakes = [];
            drawSnake(3);    //初始化蛇
            snakeMove();    //移動蛇，遊戲主要進程
            createFood();    //建立食物
        }
        isPause = false;
        
    }

首先點擊遊戲開始的時候，須要去初始化一下蛇，讓他生成在遊戲區域內的左上角，因爲採用的是absolute定位，因此，默認的第一個點的位置爲top:0;left:0; (當作座標軸的話，右上角的原點爲0,0），定義一個蛇的方塊，經過for循環，將蛇畫在屏幕的左上角，其中num爲默認蛇的長度。而後將建立的元素存成json格式的，push在snakes數組裏面。因爲push()是往最後面去添加元素，因此蛇的頭是snakes裏面最後的一個元素

drawSnake = function(num){        //初始化蛇身體
        var item = '<div class="snakes"></div>'
        for(var i=0;i<num;i++)
        {
            $(".bg").append(item)
            $(".snakes").eq(i).css({
                top:0,
                left:20*i
            })
            item1 = {
                top:0,
                left:20*i
            }
            snakes.push(item1)
            //console.log(snakes);
        }
    }

使用setTimeout(),去驅動蛇，因爲蛇頭是存在數組的最後一位，因此蛇頭實際上是snakes[snakes.length-1]這個元素，而後，經過for循環，去讓蛇的第i個元素的值等於第i+1個值（蛇頭是最後一個，因此若是蛇長度爲三個的話，先把第一個的位置移動到第第二個的位置，第二個的位置移動到第一個的位置，而後再將蛇頭往其餘地方移動，就說明蛇移動了），而後setTimeout裏面繼續遞歸調用該函數，蛇就會開始移動

snakeMove = function(){        //移動蛇
        if(live){    //判斷蛇是否存活，若是存活，則移動蛇,不然彈出遊戲結束
            for(var i=0;i<snakes.length-1;i++)
            {
                $(".snakes").eq(i).css({
                    top:snakes[i+1].top,
                    left:snakes[i+1].left
                })
                snakes[i].top = snakes[i+1].top
                snakes[i].left = snakes[i+1].left
            }
            var first = snakes.length-1
            $(".snakes").eq(first).css({
                    top:snakes[first].top+stepY,
                    left:snakes[first].left+stepX
                })
            snakes[first].top = snakes[first].top+stepY;
            snakes[first].left = snakes[first].left+stepX;
            if(!isLive(snakes[first].top,snakes[first].left))
            {
                live = false;
                alert("遊戲結束");
            }
            else
            {
                eatFood(snakes[first].top,snakes[first].left);
                setTimeout("snakeMove()",100);        
            }    
        }
    }

將蛇驅動後，開始控制蛇的移動與遊戲結束。

isLive = function(top,left){
        if(top>380||top<0||left>380||left<0)    //若是蛇移動到畫布外面，則遊戲結束，開始座標是0，0，因此邊界值是380,380
        {
            return false;
        }
        else
        {    
            for(var i=0;i<snakes.length-1;i++)    //循環蛇每一個元素，判斷蛇頭是否與他們重合，重合的話，則說明蛇撞到本身，遊戲結束
            {
                
                if(top==snakes[i].top&&left==snakes[i].left)    
                {
                    return false;
                    break;
                }
            }
            return true;
        }
    }
    document.onkeydown = function(event) {    //判斷點擊的按鈕，讓蛇往不一樣的方向去走(注意右上角是座標原點，往下是Y，往右是X)
        //console.log(event);
        if(event.keyCode==38)    //上
        {    
            if(keydown!='down')    //若是往下走，就不能只能摁上，若是直接倒着走，會撞到本身，結束遊戲
            {
                keydown='up';
                stepX=0;
                stepY=-20;
            }
        }
        else if(event.keyCode==40)    //下
        {
            if(keydown!='up')
            {
                keydown='down';
                stepX=0;
                stepY=20;
            }
        }
        else if(event.keyCode==37)    //左
        {
            if(keydown!='right')
            {
                keydown='left';
                stepX=-20;
                stepY=0;
            }
        }
        else if(event.keyCode==39)    //右
        {
            if(keydown!='left')
            {
                keydown='right'
                stepX=20;
                stepY=0;
            }
        }
    }

將結束遊戲與蛇移動處理完後，開始處理建立食物與判斷是否吃掉食物

createFood = function(){    //建立食物
        $(".food").remove();    //首先清理掉開始默認的食物（後面吃掉食物的時候，也會用該函數進行建立）
        isCreate = true    //設置一個狀態去判斷食物是否建立成功
        do
        {
            food={    //生成食物的位置，用隨機數生成（邊界值爲380,380 上面說過）
                top:Math.round(Math.random()*19)*20,    
                left:Math.round(Math.random()*19)*20
            }
            for(var i=0;i<snakes.length;i++)    //循環蛇身體，讓生成的食物不能生成在蛇身上，若是生成成功了，就跳出do while (沒有作通關的判斷，由於感受沒人能玩到通關)
            {
                if(food.top==snakes[i].top&&food.left==snakes[i].left)
                {    
                    isCreate = false;
                    break;
                }
                else
                {
                    isCreate = true;
                }
            }
        }
        while(!isCreate)
        var foodItem ='<div class="food"></div>'
        $(".bg").append(foodItem);
        $(".food").css({
            top:food.top,
            left:food.left
        })
    }
    eatFood = function(top,left){    //是否吃到食物
        if(top==food.top&&left==food.left)    //若是蛇吃到食物，那麼蛇頭的座標與食物座標重合，而後將食物那個點做爲蛇頭，append一個蛇元素到遊戲裏面，再把座標push到蛇裏面，而後建立一個新的食物
        {
            var item = '<div class="snakes"></div>'
            snakes.push({top:top,left:left})
            $(".bg").append(item)
            $(".snakes").last().css({
                top:top,
                left:left
            })
            createFood();
        }
    }

項目源碼：

<!DOCTYPE html>
<html>
<head>
    <title>貪吃蛇</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style type="text/css" media="screen">
        .bts
        {
            display: flex;
        }
        .bt
        {
            width: 60px;
            height: 24px;
            line-height: 24px;
            font-size: 18px;
            text-align: center;
            background: #ede;
            margin-left: 20px;
        }
        .bg
        {
            width: 400px;
            height: 400px;
            background: #ddd;
            margin-top: 30px;
            position: relative;
        }
        .snakes,.food
        {
            position: absolute;
            width: 18px;
            height: 18px;
            border: solid 1px #444;
        }
        .snakes
        {
            background: red;
        }
        .food
        {
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="bts">
        <div class="start bt" onclick="start()">開始</div>
        <!-- <div class="pause bt" onclick="pause()">暫停</div> -->
    </div>
    <div class="bg">
        
    </div>
</body>
<script type="text/javascript">
    var snakes = [];
    var stepX = 20;
    var stepY = 0;
    var live = false;
    var isPause = false;
    var food = {};
    var keydown = 'right';    //默認方向爲右
    start = function(){    //開始
        if(!live)
        {
            stepX = 20;
            stepY = 0;
            keydown = 'right';
            live = true;
            $(".snakes").remove();
            snakes = [];
            drawSnake(5);
            snakeMove();
            createFood();
        }
        isPause = false;
        
    }
    pause = function(){    //暫停
        isPause = true;
    }
    drawSnake = function(num){        //初始化蛇身體
        var item = '<div class="snakes"></div>'
        for(var i=0;i<num;i++)
        {
            $(".bg").append(item)
            $(".snakes").eq(i).css({
                top:0,
                left:20*i
            })
            item1 = {
                top:0,
                left:20*i
            }
            snakes.push(item1)
            //console.log(snakes);
        }
    }
    snakeMove = function(){        //移動蛇
        if(live){
            for(var i=0;i<snakes.length-1;i++)
            {
                $(".snakes").eq(i).css({
                    top:snakes[i+1].top,
                    left:snakes[i+1].left
                })
                snakes[i].top = snakes[i+1].top
                snakes[i].left = snakes[i+1].left
            }
            var first = snakes.length-1
            $(".snakes").eq(first).css({
                    top:snakes[first].top+stepY,
                    left:snakes[first].left+stepX
                })
            snakes[first].top = snakes[first].top+stepY;
            snakes[first].left = snakes[first].left+stepX;
            if(!isLive(snakes[first].top,snakes[first].left))
            {
                live = false;
                alert("遊戲結束");
            }
            else
            {
                eatFood(snakes[first].top,snakes[first].left);
                setTimeout("snakeMove()",100);        
            }    
        }
    }
    isLive = function(top,left){
        if(top>380||top<0||left>380||left<0)
        {
            return false;
        }
        else
        {    
            for(var i=0;i<snakes.length-1;i++)
            {
                
                if(top==snakes[i].top&&left==snakes[i].left)
                {
                    return false;
                    break;
                }
            }
            return true;
        }
    }
    createFood = function(){    //建立食物
        $(".food").remove();
        isCreate = true
        do
        {
            food={
                top:Math.round(Math.random()*19)*20,
                left:Math.round(Math.random()*19)*20
            }
            for(var i=0;i<snakes.length;i++)
            {
                if(food.top==snakes[i].top&&food.left==snakes[i].left)
                {    
                    isCreate = false;
                    break;
                }
                else
                {
                    isCreate = true;
                }
            }
        }
        while(!isCreate)
        var foodItem ='<div class="food"></div>'
        $(".bg").append(foodItem);
        $(".food").css({
            top:food.top,
            left:food.left
        })
    }
    eatFood = function(top,left){    //是否吃到食物
        if(top==food.top&&left==food.left)
        {
            var item = '<div class="snakes"></div>'
            snakes.push({top:top,left:left})
            $(".bg").append(item)
            $(".snakes").last().css({
                top:top,
                left:left
            })
            createFood();
        }
    }
    document.onkeydown = function(event) {
        //console.log(event);
        if(event.keyCode==38)    //上
        {    
            if(keydown!='down')
            {
                keydown='up';
                stepX=0;
                stepY=-20;
            }
        }
        else if(event.keyCode==40)    //下
        {
            if(keydown!='up')
            {
                keydown='down';
                stepX=0;
                stepY=20;
            }
        }
        else if(event.keyCode==37)    //左
        {
            if(keydown!='right')
            {
                keydown='left';
                stepX=-20;
                stepY=0;
            }
        }
        else if(event.keyCode==39)    //右
        {
            if(keydown!='left')
            {
                keydown='right'
                stepX=20;
                stepY=0;
            }
        }
    }

</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。