js如何利用鍵盤事件實(shí)現(xiàn)人物行走

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-03 18:16:35

js如何利用鍵盤事件實(shí)現(xiàn)人物行走

js如何利用鍵盤事件實(shí)現(xiàn)人物行走:使用的圖：效果圖：（推薦教程：javascript教程）實(shí)例代碼：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀js如何利用鍵盤事件實(shí)現(xiàn)人物行走:使用的圖：效果圖：（推薦教程：javascript教程）實(shí)例代碼：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title

使用的圖：

效果圖：

（推薦教程：javascript教程）

實(shí)例代碼：

<!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ū)動(dòng)不能實(shí)現(xiàn) 實(shí)現(xiàn)的是通過按鍵觸發(fā)相應(yīng)動(dòng)畫 實(shí)現(xiàn)我們的人物的幀動(dòng)畫 跳轉(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ū)動(dòng)
 jumpBool=true;
 }
 }
 
 function animation() {
 jump();
 if(!bool)return;
 walk();//單方向行走 實(shí)現(xiàn)
 changeDirection();//方向確定時(shí) 內(nèi)部行走的實(shí)現(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)視頻教程推薦：javascript視頻教程

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js如何利用鍵盤事件實(shí)現(xiàn)人物行走

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：人物實(shí)現(xiàn) js

熱門焦點(diǎn)

js如何利用鍵盤事件實(shí)現(xiàn)人物行走

js如何利用鍵盤事件實(shí)現(xiàn)人物行走

js如何利用鍵盤事件實(shí)現(xiàn)人物行走

最新推薦

猜你喜歡

熱門推薦