Vue js中的画布Triger和卡住的问题

问题描述

        data() {
            return {
                    gameWidth: 800,gameHeight: 600,color: "#8e95e8",<< Here is my variables >>
                    width: 150,height: 20,vueCtx: null,position: {
                        x: 0,y: 0,},maxSpeed: 10,speed: 0,}
            },mounted() {
                let canvas = document.getElementById('gameScreen')
                let ctx = canvas.getContext('2d')
                this.vueCtx = ctx
                this.buildFrame();    >> Just getting context here <<
                this.draw();
            },methods: {               >> Drawing with this block <<
                draw() {
                  this.vueCtx.fillRect(this.position.x,this.position.y,this.width,this.height);
                  this.vueCtx.fillStyle = this.color;
            },clearScreen() {
                this.vueCtx.clearRect(0,800,600);  >> Clearing Screen << 
            },changePosition(event) {   >> I'am getting event keypress to move my object <<
                if (event.keyCode === 97) {
                    this.speed = -this.maxSpeed
                    this.position.x += this.speed;
                    console.log(this.position.x)
                    this.clearScreen();
                    this.draw();
                    this.buildFrame();
                    
                    
                } else if ( event.keyCode === 100) {
                    this.speed = this.maxSpeed
                    this.position.x += this.speed;
                    console.log(this.position.x)
                    this.clearScreen();
                    this.draw();
                    this.buildFrame();
                } 
            },buildFrame() {
                this.position.x = this.gameWidth / 2 - this.width /2   /*Creating frame */
                this.position.y = this.gameHeight - this.height -10
            },}

当我按下按钮“ a”来移动我的对象时，这是在触发changePosition方法，但是它只是向左和向右移动了一次。当我不断在控制台中向左和向右按下按钮时，它看起来像这样...（22）315 （15）335 （17）315 （11）335

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）