溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JQ（jQuery）實(shí)現(xiàn)會飛的小鳥

發(fā)布時(shí)間：2020-06-26 07:45:29 來源：網(wǎng)絡(luò) 閱讀：821 作者：無憂you 欄目：web開發(fā)

1.獲取圖片和瀏覽器的寬和高

2.獲取圖片的方位

3.設(shè)置小鳥移動(dòng)的大小，全局變量

4.獲取鍵盤上的上下左右鍵

5.根據(jù)鍵盤上的上下左右控制小鳥的移動(dòng)

6.超出瀏覽器從反方向出來

7.旋轉(zhuǎn)

JQ（jQuery）實(shí)現(xiàn)會飛的小鳥

<div class="dbird"><img src="bird.gif" width="206" height="121" alt=""/></div>
.dbird{width:206px;height:121px;}

第一步獲取該div的寬和高以及瀏覽器的寬和高

var dwidth = $(".dbird").width();
var dheight = $(".dbird").height();
var bwidth = $(window).width();
var bheight = $(window).height();

第二步獲取方位  x、y，不設(shè)置位置的話，默認(rèn)在瀏覽器的左上角的(0,0)位置，即圖片的左上角的位置是瀏覽器的（0,0）

var off = $(".dbird").offset();

第三步設(shè)置小鳥移動(dòng)到大小，我們設(shè)置一個(gè)全局變量，大小為20

var step = 20;

第四步響應(yīng)鍵盤，鍵盤上的都是用數(shù)字表示的，如上下左右是37-40。把按得鍵賦給keycode，然后用來做第五步判斷

$(document).keydown(function(e){
	var keycode = e.keyCode;
}

第五步根據(jù)按鍵的是上下左右給出移動(dòng)，使用switch-case比較簡單

switch(keycode){
    case 37:  //左
        off.left -= step;  //按一下往左動(dòng)20
        break;
    case 38://上
        off.top -= step;  //按一下往上動(dòng)20
        break;
    case 39:  //右
        off.left +=step;   //按一下往右動(dòng)20
        break;
    case 40: //下
        off.top += step;  //按一下往下動(dòng)20
        break;
}

此時(shí)應(yīng)該是沒有效果的，刷新小鳥的位置才可以，在switch后重新獲取移動(dòng)后的位置即可

$(".dbird").offset(off);

第六步超出瀏覽器從反方向飛回，解釋一下，如一直往右飛，當(dāng)小鳥的位置大于了瀏覽器的寬度，那么就看不見小鳥了，此時(shí)我們讓小鳥在從瀏覽器的左邊飛進(jìn)來，因?yàn)槲覀儧]有設(shè)置小鳥的位置，那么應(yīng)該是從圖片的右邊先進(jìn)來，那么off.left就是-dwidth了，看圖片分析：

JQ（jQuery）實(shí)現(xiàn)會飛的小鳥

其他三個(gè)同理

if(off.left <= -dwidth){  //37
	off.left = bwidth;
}
if(off.top<=-dheight){   //38
	off.top = bheight;
}
if(off.left>=bwidth){    //39
	off.left=-dwidth
}
if(off.top>=bheight){    //40
	off.top = -dheight;
}

第七步按方位進(jìn)行旋轉(zhuǎn)

默認(rèn)是39（頭朝右）可以做判斷，如果是39，則不旋轉(zhuǎn)，如果不是39就根據(jù)按鍵的數(shù)做相應(yīng)的旋轉(zhuǎn)，左就旋轉(zhuǎn)180°，上或下就旋轉(zhuǎn)60°（度數(shù)自己定），可以先寫好按鍵數(shù)對應(yīng)的效果，如37，我們給定37的類dir_37類的css樣式是旋轉(zhuǎn)180°，當(dāng)按37時(shí)添加dir_37類即可，如果按的不是37而是40了，就移除dir_37類添加dir_40類。

首先先寫好三個(gè)類

.dri_37{
    transform:rotateY(180deg);/*直接轉(zhuǎn)身*/
}
.dri_38{
    transform:rotate(-60deg);/*傾斜*/
}
.dri_40{
    transform:rotate(60deg);
}

其次可以定義一個(gè)全局變量，賦值為默認(rèn)值39

var rcode = 39;

最后根據(jù)按鍵和rcode比較，如果不等于，那么就添加對應(yīng)的類，添加之前可以先移除上一次添加的類（如果沒有添加過類就不會執(zhí)行的）。否則繼續(xù)執(zhí)行。

if (keycode != rcode) {
    $(".dbird").removeClass().addClass("dri_"+keycode);
}

源碼：（為了方便，寫在一個(gè)文件里邊了）

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="華慕熊">
<meta name="Keywords" content="">
<meta name="Description" content="html注釋和取消注釋是shift+/,
    js注釋ctrl+/,js取消注釋ctrl+shift+/">
<title>Document</title>
<script src="jquery-1.10.2.min.js"></script>
<style>
*{
    margin:0px;
    padding:0PX;
}
bady{
    overflow:hidden;
}
#dbird{
    width:206px;
    height:121px;
    position:absolute;
}
.dri_37{
    transform:rotateY(180deg);/*直接轉(zhuǎn)身*/
}
.dri_38{
    transform:rotate(-60deg);/*傾斜*/
}
.dri_40{
    transform:rotate(60deg);
}
</style>
<script>
    /*
        1.獲取圖片和瀏覽器的寬和高
        2.獲取圖片的方位
        3.設(shè)置小鳥移動(dòng)的大小，全局變量
        4.獲取鍵盤上的上下左右鍵
        5.根據(jù)鍵盤上的上下左右控制小鳥的移動(dòng)
        6.超出瀏覽器從反方向出來
        7.旋轉(zhuǎn)
    */
    //設(shè)置移動(dòng)的大小
    var step = 20;//步長
    var rcode = 39;
    $(function () {
        //獲取小鳥圖片的寬和高
        var bwidth = $("#dbird").width();
        var bheight = $("#dbird").height();
        
        //獲取瀏覽器的寬和高
        var dwidth = $(window).width();
        var dheight = $(window).height();
        //獲取圖片的方位
        var off = $("#dbird").offset();  //x y
        

        $(document).keydown(function (e) {
            var keycode = e.keyCode;  //獲取按鍵的數(shù)：左鍵->37,上鍵38，右鍵->39,下鍵->40
            if (keycode != rcode) {
                $("#dbird").removeClass().addClass("dri_"+keycode);
            }
            rcode = keycode;
            switch (keycode) {
                case 37://左邊
                    off.left -= step;
                    if (off.left <= -bwidth) {
                        off.left = dwidth;
                    }
                    break;
                case 38://上
                    off.top -= step;
                    if (off.top <= -bheight) {
                        off.top = dwidth;
                    }
                    break;
                case 39://右
                    off.left += step;
                    if (off.left >= dwidth) {
                        off.left = -bwidth;
                    }
                    break;
                case 40://下
                    off.top += step;
                    if (off.top >= dheight) {
                        off.top = -bheight;
                    }
                    break;
            }
            $("#dbird").offset(off);//更新小鳥的位置
        });
    });
</script>
</head>
<body>
    <div id="dbird"><img src="bird.gif" width="206" height="121" alt=""></div>
</body>
</html>

百度網(wǎng)盤連接：鏈接：https://pan.baidu.com/s/1siJIFDhg6PwAQsYply1img     密碼：6du1

若失效請聯(lián)系我： huamuxiong_2018#163.com    (請自動(dòng)轉(zhuǎn)換#為@)

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手