突然想写一篇文章,通过HTML+CSS+JS实现一个不知道什么名字的小游戏

突然想写一篇文章,通过HTML+CSS+JS实现一个不知道什么名字的小游戏

村头老杨头

Sun Apr 12

村头老杨头

今天博主在哔哩哔哩上看到有up主通过Java写的一个简陋的小游戏结果观看量很多,博主虽然没用过JavaGUI。但是也是突发奇想,想通过html+js+css 去实现一个类似的小游戏。说干就干。
博主尽量把所有过程展现出来,为了游戏的美观度,请允许我去荡一点图片,找了好久,还是用这个图片吧

person

凑合写了一点能让人物移动跟跳起的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>游戏</title>
    <style>
      .box{
        width: 400px;
        height: 320px;
        border: 1px solid #000000;
        position: relative;
      }
      .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 personEl;        
        //页面加载完毕事件
        window.onload = function(){
          //创建人物
          createPerson();
        }
        //监听键盘按下事件
        window.onkeydown = function(e){
          //空格键
          if(e.code=="Space"){
            //跳到动画
            beatAnimation(personEl,dropAnimation); 
          }
          if(e.code=="KeyD"){
            //移动
            move("right");
          }
          if(e.code == "KeyA"){
            //移动
            move("left");
          }
        }

        //创建人物
        function createPerson (){
          //创建一个div元素给 全局人物元素
          personEl = document.createElement("div");
          //把人物图片给元素
          personEl.style.backgroundImage = "url(./img/person.jpg)"
          //给人物元素设置类名
          personEl.setAttribute("class","person")
          //获取游戏区域的盒子
          var box = document.getElementById("box");
          //人物元素追加到游戏区域的盒子里
          box.appendChild(personEl);
        }
        //跳动动画
        function beatAnimation(el,callback){
          //获得人物的高度
          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);
            }
          },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) >= 400){
                  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>

效果如下:

还有一个问题待解决

评论