小實操(3) 利用鍵盤事件實現小人快跑

2021-10-07 06:49:18 字數 2168 閱讀 9973

例項: 利用html表單和js的數學物件及函式做乙個有驗證碼的簡單登入表單

實操:利用日期物件和方法以及其他相關知識實現簡單的鐘錶功能

js學習中的小實操(目錄) **

今天也是學習的一天,學習了知識之後,使用才能加深我們的記憶,今天做的是乙個簡單的實際操作,就是利用鍵盤事件實現小人快跑。

**

關注小文我們一起學習進步。

我們可以利用我們的「上、下、左、右」和「w、s、a、d」來控制我們的小人在螢幕上進行上下左右的移動。

首先肯定要想到我們的鍵盤事件,然後要想到我們的keycode。然後我們就可以開始一步一步的寫了:

首先將我們最起初的第一張圖放上去就是我們開啟頁面是乙個正對著我們的小人

然後將他設定定位,這樣我們才可以在後面讓它動起來

然後獲取我們的節點:

前面的鍵盤事件我們有學過,要讓他動起來不是給這個要動的物件新增節點,而是給我們的document文件新增事件:裡面用乙個if函式來判斷我們小人移動的條件,滿足即可移動,由於上下左右和wsad都可以控制,那麼在條件裡還需要用到我們的「||」或,

當然這裡因為我們的小人動起來是五張進行切換實現它的動起來,而不僅僅是的平移,的變化是從圖0到圖4,然後返回圖0繼續迴圈,所以我們每乙個if判斷之後的執行裡都要這麼寫乙個迴圈,那就會顯得有一點麻煩,所以我們就在開頭先封裝乙個函式,(這樣只用寫一次),我們下面只需要進行呼叫即可

那麼這個小訓練到此便是完成了,

那麼下面附上我們完整的**:

<

!doctype html>

"utf-8"

>

<

/title>

<

/head>

//給小人設定定位

#xiaoren

<

/style>

//初始的小人

"images/down-0.png" id=

"xiaoren"

>

var xr = document.

getelementbyid

("xiaoren");

//小人移動的迴圈

小實操(6) 利用正則來解析url引數

例項 利用html表單和js的數學物件及函式做乙個有驗證碼的簡單登入表單 實操 利用日期物件和方法以及其他相關知識實現簡單的鐘錶功能 小實操 3 利用鍵盤事件實現小人快跑 小實操 4 實現飛機的移動並且能夠發射子彈 js學習中的小實操 目錄 關注小文我們一起學習進步。實操 今天同樣是對前面學習的知識...

微信小程式Dom事件實現

請合理使用工具!細節就不說了,直接備份乙個實現的案例 wxml view class guess view image data data auto data index data num 1 data id bindtap mode widthfix src class img image vie...

Linux C C 利用小根堆實現topN

include include std vector int topn const std vector int arry,const unsigned int toplen void createheap std vector int res void heapify std vector int...