通过HTML+CSS+JS实现一个不知道什么名字的小游戏续之(解决JS键盘事件冲突问题)

通过HTML+CSS+JS实现一个不知道什么名字的小游戏续之(解决JS键盘事件冲突问题)

村头老杨头

Tue Apr 14

村头老杨头

上一篇文章博主说还有一个问题待解决,其实是上一篇文章遗留的是两个问题。
不知道的可以去上一篇文章操作一下游戏

问题

问题一:
	JS的键盘事件每次只有一个触发,当按下方向键之后再按下空格键人物移动就会被跳起打断
问题二:
	连续按空格键人物一直在跳动

解决方案

问题一:
	对相应的键盘按下记录键盘按下的状态,按键弹起清除按键的状态。设置一个定时函数实时刷新键盘状态,根据键盘的状态操作人物。
问题二:
	记录人物跳起的状态,当人物跳起设置人物为跳起的状态,当人物落地更改人物跳起的状态为落地状态。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>游戏</title>
    <style>
      .box{
        width: 100%;
        height: 320px;
        border: 1px solid #000000;
        position: relative;
        background-color: #FFFFFF;
      }
      .person{
        position: absolute;
        bottom:  0;
        width: 80px;
        height: 100px;
        z-index: 1;
        background-size: 100% 100%;
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    
    <div class="box" id="box">
      
    </div>
    <script>
      //获取游戏区域盒子的宽度
      var boxWidth = document.getElementById("box").offsetWidth-3;
      //人物元素
      var personEl;
      
      //键值状态记录
      var key = new Object();
      key.left = false;
      key.right = false;
      key.beat = false;
      
      //页面加载完毕事件
      window.onload = function(){
        //创建人物
        createPerson();
        //定时函数 每隔100毫秒查询一下键值的状态
        setInterval(function(){
          if(key.left){
            //向左移动
            move("left");
          }
          if(key.right){
            //向右移动
            move("right");
          }
        },100);
      }
      //监听键盘按下事件
      window.onkeyup =function(e){
        if(e.code=="KeyD"){
          //停止
          key.right = false;
        }
        if(e.code == "KeyA"){
          //停止
          key.left = false;
        }
      }
      
      //监听键盘按下事件
      window.onkeydown = function(e){
        //空格键
        if(e.code=="Space"){
          //跳到动画 
          beatAnimation(personEl,dropAnimation); 
        }
        if(e.code=="KeyD"){
          //移动
          key.right = true;
        }
        if(e.code == "KeyA"){
          //移动
          key.left = true;
        }
      }

      //创建人物
      function createPerson (){
        //创建一个div元素给 全局人物元素
        personEl = document.createElement("div");
        //把人物图片给元素
        personEl.style.backgroundImage = "url(http://ctlyt.yunypan.cn/upload/2020/04/person-f3965d0cebf9436694cce9133352d65c.jpg)"
        //给人物元素设置类名
        personEl.setAttribute("class","person")
        //获取游戏区域的盒子
        var box = document.getElementById("box");
        //人物元素追加到游戏区域的盒子里
        box.appendChild(personEl);
      }
      //跳动动画
      function beatAnimation(el,callback){
        //判断人物跳起的状态
        if(!key.beat){
          //设置人物挑起状态
          key.beat = true;
          //获得人物的高度
          var num = el.style.bottom|0;
          //挑起动画
          var setInt = setInterval(function(){
            num+=5;
            el.style.bottom = num+"px";
            if(num>=100){
              //清除挑起动画
              clearInterval(setInt);
              //执行回调落下动画
              callback(el);
            }
          },10);
        }
        
      }
      //落下动画
      function dropAnimation(el){
        //获得人物的高度
        var num = parseInt(el.style.bottom)|0;
        //落下动画
        var setInt = setInterval(function(){
          num-=5;
          el.style.bottom = num+"px";
          if(num<=0){
            clearInterval(setInt);
            //设置人物跳起状态
            key.beat =false;
          }
        },10)
      }
      //移动方法
      function move(direction){
        switch(direction){
          case "right":
            var num = 0;
            //翻转人物
            personEl.style.transform = "rotateY(180deg)"
            //保证人物的平滑移动
            var setInter = setInterval(function(){
              num++;
              //如果移动5格或超出边界停止
              if(num>5 || (parseInt(personEl.style.left)+80|0) >= boxWidth){
                clearInterval(setInter);
                return;
              }
              personEl.style.left = (parseInt(personEl.style.left)|0) +2+'px';
            },20)
          break;
          case "left":
            var num = 0;
            personEl.style.transform = "rotateY(0deg)"
            var setInter = setInterval(function(){
              num++;
              if(num>5 || (parseInt(personEl.style.left)|0) <= 0){
                clearInterval(setInter);
                return;
              }
              personEl.style.left = (parseInt(personEl.style.left)|0) -2+'px';
            },20)
          break;
        }
      }
    </script>
  </body>
</html>

效果如下:

点击游戏区域,通过
“A键”向左移动
“D键”向右移动
“空格键”跳起

下一篇增加人物移动跳跃障碍功能

评论