<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    JavaScript利用鍵盤事件實現人物行走的代碼

    發布時間:2020-04-09 10:12:19 來源:億速云 閱讀:87 作者:小新 欄目:web開發

    這篇文章主要為大家詳細介紹了JavaScript利用鍵盤事件實現人物行走的代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下。

    JavaScript利用鍵盤事件實現人物行走的代碼

    使用的圖:

    JavaScript利用鍵盤事件實現人物行走的代碼

    效果圖:

    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利用鍵盤事件實現人物行走代碼的詳細內容了,看完之后是否有所收獲呢?如果想了解更多相關內容,歡迎來億速云行業資訊!

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2