js如何利用鍵盤事件實現人物行走

來源：懂視網責編：小采時間：2020-11-03 18:16:35

js如何利用鍵盤事件實現人物行走

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

推薦度：

點擊下載本文 文檔為doc格式

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

使用的圖：

效果圖：

（推薦教程：javascript教程）

實例代碼：

<!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);
 //按鍵驅動不能實現 實現的是通過按鍵觸發相應動畫 實現我們的人物的幀動畫 跳轉
 }
 
 function keyHandler(e) {
 bool=e.type==="keydown";
 key=e.keyCode;
 if(!bool){
 num=0;
 actor.style.backgroundPositionX=-num*WIDTH+"px";
 }
 if(key===32 && !jumpBool){//跳躍 空格驅動
 jumpBool=true;
 }
 }
 
 function animation() {
 jump();
 if(!bool)return;
 walk();//單方向行走 實現
 changeDirection();//方向確定時 內部行走的實現
 }
 
 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>

相關視頻教程推薦：javascript視頻教程

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js如何利用鍵盤事件實現人物行走

推薦度：

點擊下載本文 文檔為doc格式

標簽：人物實現 js

熱門焦點

js如何利用鍵盤事件實現人物行走

js如何利用鍵盤事件實現人物行走

js如何利用鍵盤事件實現人物行走

最新推薦

猜你喜歡

熱門推薦