<template>
  <div class="max-big-box">
    <div class="map-box">
      <p class="myUser" :style="'left:'+ myData.addressX +'px;bottom:'+ myData.addressY +'px;'"></p>
    </div>
  </div>
</template>

<script>
    export default {
        name: "newDemo",
      data() {
        return {
          myData:{
            userData:{
              hp:100,
              mp:100,
              mover:10,
            },
            lgData:{
              jg:10,
              mg:11,
              sg:12,
              hg:13,
              tg:14,
            },
            wjData:{
              dj:10,
              qj:11,
              jj:12,
            },
            jnData:{
              name:"XX1",
              xhType:"mp",
              xhNum:10,
              type:"jg",
              num:10,
            },
            zbData:{
              name:"XX1",
              type:'jj',
              num:10,
            },
            addressX:0,
            addressY:0,
          },
          drData:[
            {
              userData:{
                hp:100,
                mp:100,
                mover:10,
              },
              lgData:{
                jg:10,
                mg:10,
                sg:10,
                hg:10,
                tg:10,
              },
              wjData:{
                dj:10,
                qj:10,
                jj:10,
              },
              jnData:[
                {
                  name:"XX1",
                  xhType:"mp",
                  xhNum:10,
                  lgType:"jg",
                  wjType:"jj",
                  lgX:1,
                  wjX:1,
                },
              ],
              zbData:{
                type:true,
                ksNum:10,
                wqNum:20,
              },
              addressX:0,
              addressY:0,
            }
          ]
        }
      },
      created(){

      },
      mounted() {
        this.MYmove();
        console.log()
      },
      methods: {
        MYmove(){
          let self = this;
          // document.onkeydown = function(e) {
            document.addEventListener('keydown',(e)=> {
            console.log("e",e)
            console.log("window.event",window.event)
            let e1 = e || event || window.event || arguments.callee.caller.arguments[0];
            switch (e1.keyCode) {
              case 65:
                if(self.myData.addressX>0){
                  self.myData.addressX = self.myData.addressX - self.myData.userData.mover
                }
                console.log("a");
                break;
              case 68:
                if(self.myData.addressX<1440){
                  self.myData.addressX = self.myData.addressX + self.myData.userData.mover
                }
                console.log("d");
                break;
              case 87:
                if(self.myData.addressY<900){
                  self.myData.addressY = self.myData.addressY + self.myData.userData.mover
                }
                console.log("w");
                break;
              case 83:
                if(self.myData.addressY>0){
                  self.myData.addressY = self.myData.addressY - self.myData.userData.mover
                }
                console.log("s");
            }
          })
        },
        ad(myData,drData,type){
          let gData = {};
          let fData = {};
          if(type==0){
            gData = {...myData};
            fData = {...drData};
          }else if(type==1){
            gData = {...drData};
            fData = {...myData};
          }
          let gj = 0;
          let lg = 0;
          let wq = 0;
          if(gData.zbData.type){
            lg = gData.lgData[gData.jnData.lgType] * gData.jnData.lgX;
            wq = gData.wjData[gData.jnData.wjType] * gData.jnData.wjX;
          }else{

          }

        },
      },
    }
</script>

<style scoped>
  .max-big-box{
    height:900px;
    width:1440px;
  }
  .myUser{
    width:20px;
    height:20px;
    background:red;
    border-radius:50%;
    position: absolute;
  }
</style>
