用jquery寫貪吃蛇

gitmilk 發布于2019-08-02 13:59 / 1070人閱讀

需要具備知識：
1.html、css基礎
2.jquery基礎

具體實現方法：

創建游戲界面

.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: #ffffd;
            margin-top: 30px;
            position: relative;
        }


    
        開始

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

定義游戲主要函數

首先，假設游戲內方塊的個數為2020，每個方塊的大小為20px20px（當然為了適配手機，可以轉換為rem去適配網頁大小），蛇與食物的大小為一個方塊的大小(food為食物，snakes為蛇）
其中因為border會在div的外面去渲染，所以，大小為20的方塊，實際寬高為18px，加上上下各1px的邊框，一個食物與蛇的大小為20px*20px

.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 = ""
        for(var i=0;i
使用setTimeout(),去驅動蛇，由于蛇頭是存在數組的最后一位，所以蛇頭其實是snakes[snakes.length-1]這個元素，然后，通過for循環，去讓蛇的第i個元素的值等于第i+1個值（蛇頭是最后一個，所以如果蛇長度為三個的話，先把第一個的位置移動到第第二個的位置，第二個的位置移動到第一個的位置，然后再將蛇頭往其他地方移動，就說明蛇移動了），然后setTimeout里面繼續遞歸調用該函數，蛇就會開始移動
snakeMove = function(){        //移動蛇
        if(live){    //判斷蛇是否存活，如果存活，則移動蛇,否則彈出游戲結束
            for(var i=0;i
將蛇驅動后，開始控制蛇的移動與游戲結束。
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
將結束游戲與蛇移動處理完后，開始處理創建食物與判斷是否吃掉食物
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

" $(".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 = "

" snakes.push({top:top,left:left}) $(".bg").append(item) $(".snakes").last().css({ top:top, left:left }) createFood(); } }

項目源碼：

云服務器 GPU云服務器 html寫貪吃蛇貪吃蛇貪吃蛇程序貪吃蛇設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53487.html

用jquery寫貪吃蛇

需要具備知識：1.html、css基礎2.jquery基礎具體實現方法：創建游戲界面 .bts { display: flex; } .bt { width: 60px; height: 24px; line-height: 24px...

h9911 2019-08-23 14:20 評論0 收藏0
JS用原型對象寫的貪吃蛇，很粗糙的代碼

摘要：貪吃蛇類默識貪吃蛇速度，毫秒地圖軸分為多少單位地圖軸分為多少單位貪吃蛇運動速度貪吃蛇每節身體和食物的寬高地圖軸分為多少單位初始化貪吃蛇屬性蛇移動方向食物和食物的坐標游戲開始創建地圖初始化食物初始化貪吃蛇綁定鍵盤方向更改貪吃蛇方向移動貪吃蛇創 /** 貪吃蛇類 @author 默識 @param {int} speed 貪吃蛇速度，毫秒 @param {int} x 地圖x軸分...

YanceyOfficial 2019-08-20 16:05 評論0 收藏0
小白成長日記：寫個貪吃蛇

摘要：貪吃蛇并不是通過操作來完成移動的，而是通過記錄貪吃蛇的路徑來將身體渲染出來。目前沒有內置的操作符判斷對象的內容是否相同。還是用的vue，本來以為不合適，但想法錯了。貪吃蛇并不是通過操作dom來完成移動的，而是通過記錄貪吃蛇的路徑來將身體渲染出來。一般移動元素，我們都是變動它的css達到目的，但我在寫貪吃蛇的時候發現這樣很難以實現，參考了網上的資源，發現大部分人是通過記錄貪吃蛇的路徑...

archieyang 2019-08-21 17:55 評論0 收藏0
深入理解js

摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。延遲加載 (Lazyload) 三種實現方式延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。詳解 Javascript十大常用設計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0
用 js 寫個自動尋路的貪吃蛇

摘要：前言偶爾看到兩年前寫的貪吃蛇，當時沒把自動尋路的算法寫好，蛇容易掛，周末找了個時間把當年的坑填上，寫了個不會掛的貪吃蛇。前言偶爾看到兩年前寫的貪吃蛇，當時沒把自動尋路的算法寫好，蛇容易掛，周末找了個時間把當年的坑填上，寫了個不會掛的貪吃蛇。兩年前的版本_點擊查看這次更新的版本_點擊查看代碼比較簡單,使用 canvas 完成游戲的畫圖，拋開 A* 算法的實現，整個 html 代...

gaara 2019-08-22 10:45 評論0 收藏0