成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

用jquery寫貪吃蛇

gitmilk / 1114人閱讀

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

具體實(shí)現(xiàn)方法：

創(chuàng)建游戲界面

.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是按鈕組，因?yàn)殚_始打算寫個(gè)暫停，后面放棄了，bt是按鈕，bg是游戲界面（大小最好為10,15，20的倍數(shù)，比較容易計(jì)算游戲內(nèi)方塊的）,其中bg（游戲界面背景）是才用relative定位，蛇與食物采用用absolute定位。

定義游戲主要函數(shù)

首先，假設(shè)游戲內(nèi)方塊的個(gè)數(shù)為2020，每個(gè)方塊的大小為20px20px（當(dāng)然為了適配手機(jī)，可以轉(zhuǎn)換為rem去適配網(wǎng)頁大?。吲c食物的大小為一個(gè)方塊的大小(food為食物，snakes為蛇）
其中因?yàn)閎order會在div的外面去渲染，所以，大小為20的方塊，實(shí)際寬高為18px，加上上下各1px的邊框，一個(gè)食物與蛇的大小為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;    //默認(rèn)向X行走的像素
    var stepY = 0;    //默認(rèn)向Y行走的像素
    var live = false;    //是否存活
    var isPause = false;    //是否暫停 ，未用
    var food = {};    //食物的位置
    var keydown = "right";    //默認(rèn)方向?yàn)橛?/pre>

start()函數(shù)，點(diǎn)擊開始游戲時(shí)候，執(zhí)行的操作


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


首先點(diǎn)擊游戲開始的時(shí)候，需要去初始化一下蛇，讓他生成在游戲區(qū)域內(nèi)的左上角，由于采用的是absolute定位，所以，默認(rèn)的第一個(gè)點(diǎn)的位置為top:0;left:0; (看成坐標(biāo)軸的話，右上角的原點(diǎn)為0,0），定義一個(gè)蛇的方塊，通過for循環(huán)，將蛇畫在屏幕的左上角，其中num為默認(rèn)蛇的長度。然后將創(chuàng)建的元素存成json格式的，push在snakes數(shù)組里面。由于push()是往最后面去添加元素，所以蛇的頭是snakes里面最后的一個(gè)元素



drawSnake = function(num){        //初始化蛇身體
        var item = "
"
        for(var i=0;i

使用setTimeout(),去驅(qū)動蛇，由于蛇頭是存在數(shù)組的最后一位，所以蛇頭其實(shí)是snakes[snakes.length-1]這個(gè)元素，然后，通過for循環(huán)，去讓蛇的第i個(gè)元素的值等于第i+1個(gè)值（蛇頭是最后一個(gè)，所以如果蛇長度為三個(gè)的話，先把第一個(gè)的位置移動到第第二個(gè)的位置，第二個(gè)的位置移動到第一個(gè)的位置，然后再將蛇頭往其他地方移動，就說明蛇移動了），然后setTimeout里面繼續(xù)遞歸調(diào)用該函數(shù)，蛇就會開始移動


snakeMove = function(){        //移動蛇
        if(live){    //判斷蛇是否存活，如果存活，則移動蛇,否則彈出游戲結(jié)束
            for(var i=0;i

將蛇驅(qū)動后，開始控制蛇的移動與游戲結(jié)束。


isLive = function(top,left){
        if(top>380||top<0||left>380||left<0)    //如果蛇移動到畫布外面，則游戲結(jié)束，開始坐標(biāo)是0，0，所以邊界值是380,380
        {
            return false;
        }
        else
        {    
            for(var i=0;i

將結(jié)束游戲與蛇移動處理完后，開始處理創(chuàng)建食物與判斷是否吃掉食物


createFood = function(){    //創(chuàng)建食物
        $(".food").remove();    //首先清理掉開始默認(rèn)的食物（后面吃掉食物的時(shí)候，也會用該函數(shù)進(jìn)行創(chuàng)建）
        isCreate = true    //設(shè)置一個(gè)狀態(tài)去判斷食物是否創(chuàng)建成功
        do
        {
            food={    //生成食物的位置，用隨機(jī)數(shù)生成（邊界值為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) //如果蛇吃到食物，那么蛇頭的坐標(biāo)與食物坐標(biāo)重合，然后將食物那個(gè)點(diǎn)作為蛇頭，append一個(gè)蛇元素到游戲里面，再把坐標(biāo)push到蛇里面，然后創(chuàng)建一個(gè)新的食物 { var item = "
" snakes.push({top:top,left:left}) $(".bg").append(item) $(".snakes").last().css({ top:top, left:left }) createFood(); } } 
項(xiàng)目源碼：



    貪吃蛇
    
    
    


    

        
開始

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/53487.html

相關(guān)文章

  • 用jquery寫貪吃蛇

    需要具備知識：1.html、css基礎(chǔ)2.jquery基礎(chǔ) 具體實(shí)現(xiàn)方法： 創(chuàng)建游戲界面 .bts { display: flex; } .bt { width: 60px; height: 24px; line-height: 24px...

    h9911 評論0 收藏0

  • JS用原型對象寫的貪吃蛇，很粗糙的代碼

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

    YanceyOfficial 評論0 收藏0

  • 小白成長日記：寫個(gè)貪吃蛇

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

    archieyang 評論0 收藏0

  • 深入理解js

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

    caikeal 評論0 收藏0

  • 用 js 寫個(gè)自動尋路的貪吃蛇

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

    gaara 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<