您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)js鍵盤事件如何實現(xiàn)人物的行走,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
描述:
小時候喜歡玩的一個游戲,魔塔,實現(xiàn)了人物的行走,以及跳躍,當然是2D的效果。
用到的圖:
效果:
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html { background-color: deepskyblue; } div { width: 32px; height: 32px; background-image: url("img/Actor01-Braver03.png"); position: absolute; } </style> </head> <body> <div></div> <script> var key=0; var bool=false; var speed=2;//每次行走的距離 var actor;//人物div const HEIGHT=33;//人物的高 const WIDTH=32;//人物的寬 var arr=[1,3,2,0];//4排圖像 代表 下 左 右 上 var num=0; var jumpBool=false; var actorSkinSpeed=8; var jumpSpeed=-15; init(); function init() { window.addEventListener("keydown",keyHandler); window.addEventListener("keyup",keyHandler); actor=document.querySelector("div"); setInterval(animation,16); //按鍵驅(qū)動不能實現(xiàn) 實現(xiàn)的是通過按鍵觸發(fā)相應(yīng)動畫 實現(xiàn)我們的人物的幀動畫 跳轉(zhuǎn) } function keyHandler(e) { bool=e.type==="keydown"; key=e.keyCode; if(!bool){ num=0; actor.style.backgroundPositionX=-num*WIDTH+"px"; } if(key===32 && !jumpBool){//跳躍 空格驅(qū)動 jumpBool=true; } } function animation() { jump(); if(!bool)return; walk();//單方向行走 實現(xiàn) changeDirection();//方向確定時 內(nèi)部行走的實現(xiàn) } function jump() { if(!jumpBool)return; jumpSpeed+=1; if(jumpSpeed===15){ jumpBool=false; jumpSpeed=-15; return; } actor.style.top=actor.offsetTop+jumpSpeed+"px"; } function changeDirection() { actorSkinSpeed--; if(actorSkinSpeed>0) return; actorSkinSpeed=8; num++; if(num>3) num=0; actor.style.backgroundPositionX=-num*WIDTH+"px"; } function walk() { switch (key){ case 37://左 ×1 第二排 actor.style.left=actor.offsetLeft-speed+"px"; actor.style.backgroundPositionY=-arr[0]*HEIGHT+"px"; break; case 38://上 ×3 第四排 actor.style.top=actor.offsetTop-speed+"px"; actor.style.backgroundPositionY=-arr[1]*HEIGHT+"px"; break; case 39://右 ×2 第三排 actor.style.left=actor.offsetLeft+speed+"px"; actor.style.backgroundPositionY=-arr[2]*HEIGHT+"px"; break; case 40://下 ×0 第一排 actor.style.top=actor.offsetTop+speed+"px"; actor.style.backgroundPositionY=-arr[3]*HEIGHT+"px"; break; } } </script> </body> </html>
關(guān)于“js鍵盤事件如何實現(xiàn)人物的行走”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。