Fatal编程技术网
  • javascript/
  • Javascript我试图用noloop（）暂停球；但在关键时刻，我想继续弹起球，你能看看我的代码并帮助我吗？

Javascript我试图用noloop（）暂停球；但在关键时刻，我想继续弹起球，你能看看我的代码并帮助我吗？

javascript

Javascript我试图用noloop（）暂停球；但在关键时刻，我想继续弹起球，你能看看我的代码并帮助我吗？,javascript,Javascript,Javascript我试图用noloop（）暂停球；但在关键时刻，我想继续弹起球，你能看看我的代码并帮助我吗？我在尝试以帧速暂停弹跳球并返回弹跳球时遇到困难。我设法得到一些代码，能够识别至少两个键，但我只需要一个键来停止反弹的球，释放时使用同一个键让球反弹？有什么想法吗？请帮忙 <!DOCTYPE html> <html> <head> <title>Player Movement using onkeydown

Javascript我试图用noloop（）暂停球；但在关键时刻，我想继续弹起球，你能看看我的代码并帮助我吗？我在尝试以帧速暂停弹跳球并返回弹跳球时遇到困难。我设法得到一些代码，能够识别至少两个键，但我只需要一个键来停止反弹的球，释放时使用同一个键让球反弹？有什么想法吗？请帮忙

<!DOCTYPE html>
    <html>
      <head>
        <title>Player Movement using onkeydown/onkeyup (Enhanced version)</title>
        <style type="text/css" media="screen">
          canvas { border: 1px solid; }
        </style>
        <script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-1150473-1']);
          _gaq.push(['_trackPageview']);

          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
        </script>
        <script type="text/javascript" charset="utf-8">


        var context;
    var x=100;
    var y=200;
    var dx=5;
    var dy=5;
        var Key = {
          _pressed: {},

          LEFT: 37,
          UP: 38,
          RIGHT: 39,
          DOWN: 40,

          isDown: function(keyCode) {
            return this._pressed[keyCode];
          },

          onKeydown: function(event) {
            this._pressed[event.keyCode] = true;
          },

          onKeyup: function(event) {
            delete this._pressed[event.keyCode];
          }
        };

        window.addEventListener('keyup', function(event) { Key.onKeyup(event); }, false);
        window.addEventListener('keydown', function(event) { Key.onKeydown(event); }, false);

        var Game = {
          fps: 60,
          width: 640,
          height: 480
        };

        Game._onEachFrame = (function() {
          var requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

          if (requestAnimationFrame) {
           return function(cb) {
              var _cb = function() { cb(); requestAnimationFrame(_cb); }
              _cb();
            };
          } else {
            return function(cb) {
              setInterval(cb, 1000 / Game.fps);
            }
          }
        })();

        Game.start = function() {
          Game.canvas = document.createElement("canvas");
          Game.canvas.width = Game.width;
          Game.canvas.height = Game.height;

          Game.context = Game.canvas.getContext("2d");

          document.body.appendChild(Game.canvas);

          Game.player = new Player();

          Game._onEachFrame(Game.run);
        };

        Game.run = (function() {
          var loops = 0, skipTicks = 1000 / Game.fps,
              maxFrameSkip = 10,
              nextGameTick = (new Date).getTime(),
              lastGameTick;

          return function() {
            loops = 0;

            while ((new Date).getTime() > nextGameTick) {
              Game.update();
              nextGameTick += skipTicks;
              loops++;
            }

            if (loops) Game.draw();
          }
        })();

        Game.draw = function() {
          Game.context.clearRect(0, 0, Game.width, Game.height);
          Game.player.draw(Game.context);
        };

        Game.update = function() {
          Game.player.update();
        };

        function Player() {
          this.x = 0;
          this.y = 0;
        }

        Player.prototype.draw = function(context) {
          context.clearRect(0,0, 300,300);
      context.beginPath();
      context.fillStyle="#0000ff";
      //Draw a circle of radius 20 at the coordinates 100,100 on the canvas
      context.arc(this.x, this.y,20,0,Math.PI*2,true); 
      context.closePath();
      context.fill(); 
      if(this.x<0 || this.x>550) dx=-dx;
      if(this.y<0 || this.y>400) dy=-dy;
      this.x+=dx;
      this.y+=dy;
      //noLoop();
        };

        Player.prototype.moveLeft = function() {
          this.x = 100;
          this.y = 100;
        };

        Player.prototype.moveRight = function() {
          //if (onKeyup) noloop();
          //else if (onKeydown) loops();

        };

        Player.prototype.moveUp = function() {
          this.y -= 1;
        };

        Player.prototype.moveDown = function() {
          this.y += 1;
        };

        Player.prototype.update = function() {
          if (Key.isDown(Key.UP)) this.moveUp();
          if (Key.isDown(Key.LEFT)) this.moveLeft();
          if (Key.isDown(Key.DOWN)) this.moveDown();
          if (Key.isDown(Key.RIGHT)) this.moveRight();
          //else if (Key.onKeyup(Key.RIGHT)) this.Loop();



        };
        </script>
      </head>
      <body onload="Game.start()">
      </body>
    </html>


使用onkeydown/onkeydup（增强版）的玩家移动
画布{边框：1px实心；}
var _gaq=_gaq | |[]；
_gaq.push（[''设置帐户'，'UA-1150473-1']）；
_gaq.push（[''u trackPageview']）；
（功能（）{
var ga=document.createElement（'script'）；ga.type='text/javascript'；ga.async=true；
ga.src=（'https:'==document.location.protocol？'https://ssl' : 'http://www“）+”.google analytics.com/ga.js'；
var s=document.getElementsByTagName（'script'）[0]；s.parentNode.insertBefore（ga，s）；
})();
var语境；
var x=100；
变量y=200；
var-dx=5；
var-dy=5；
变量键={
_按下：{}，
左：37，
上升：38，
右：39，
下降：40，
isDown：功能（键码）{
返回此项。按[keyCode]；
},
onKeydown：函数（事件）{
这是。\ u按[event.keyCode]=true；
},
onKeyup：函数（事件）{
删除此项。\u按[event.keyCode]；
}
};
addEventListener（'keyup'，函数（事件）{Key.onKeyup（事件）；}，false）；
addEventListener（'keydown'，函数（事件）{Key.onKeydown（事件）；}，false）；
var博弈={
fps:60，
宽度：640，
身高：480
};
游戏。_onEachFrame=（函数（）{
var requestAnimationFrame=window.webkitRequestAnimationFrame | | window.mozRequestAnimationFrame；
if（requestAnimationFrame）{
返回函数（cb）{
var_cb=function（）{cb（）；requestAnimationFrame（_cb）；}
_cb（）；
};
}否则{
返回函数（cb）{
设置间隔（cb，1000/游戏每秒）；
}
}
})();
Game.start=函数（）{
Game.canvas=document.createElement（“画布”）；
Game.canvas.width=Game.width；
Game.canvas.height=Game.height；
Game.context=Game.canvas.getContext（“2d”）；
document.body.appendChild（Game.canvas）；
Game.player=新玩家（）；
游戏。_onEachFrame（游戏运行）；
};
Game.run=（函数（）{
变量循环=0，skipTicks=1000/Game.fps，
maxFrameSkip=10，
nextGameTick=（新日期）.getTime（），
最后配子；
返回函数（）{
循环=0；
while（（新日期）.getTime（）>nextGameTick）{
Game.update（）；
nextGameTick+=skipTicks；
循环++；
}
if（循环）Game.draw（）；
}
})();
Game.draw=函数（）{
Game.context.clearRect（0，0，Game.width，Game.height）；
Game.player.draw（Game.context）；
};
Game.update=函数（）{
Game.player.update（）；
};
函数播放器（）{
这个.x=0；
这个。y=0；
}
Player.prototype.draw=函数（上下文）{
clearRect（0,03000）；
context.beginPath（）；
context.fillStyle=“#0000ff”；
//在画布上的坐标100100处绘制一个半径为20的圆
arc（this.x，this.y，20,0，Math.PI*2，true）；
closePath（）；
context.fill（）；
如果（this.x550）dx=-dx；
如果（this.y400）dy=-dy；
这个.x+=dx；
y+=dy；
//noLoop（）；
};
Player.prototype.moveLeft=函数（）{
这是x=100；
这个y=100；
};
Player.prototype.moveRight=函数（）{
//if（onKeyup）noloop（）；
//else if（onKeydown）循环（）；
};
Player.prototype.moveUp=函数（）{
这个.y-=1；
};
Player.prototype.moveDown=函数（）{
这个。y+=1；
};
Player.prototype.update=函数（）{
if（Key.isDown（Key.UP））this.moveUp（）；
if（Key.isDown（Key.LEFT））this.moveLeft（）；
if（Key.isDown（Key.DOWN））this.moveDown（）；
if（Key.isDown（Key.RIGHT））this.moveRight（）；
//如果（Key.onKeyup（Key.RIGHT））this.Loop（）；
};
在霍夫兰教授的帮助下，我发现代码只需要通过破解来测试和调试。查看序列有一个loops方法，该方法有一个与之关联的值，当更改该值时，循环序列会暂停，并且能够在按键后返回，稍后将发布注释

    <!DOCTYPE html>
<html>
  <head>
    <title>Player Movement using onkeydown/onkeyup (Enhanced version)</title>
    <style type="text/css" media="screen">
      canvas { border: 1px solid; }
    </style>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-1150473-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    <script type="text/javascript" charset="utf-8">
var nextGameTick = (new Date).getTime();
var isPaused = 0;
var loops = 0;
var context;
var x=100;
var y=200;
var dx=5;
var dy=5;
    var Key = {
      _pressed: {},

      LEFT: 37,
      UP: 38,
      RIGHT: 39,
      DOWN: 40,

      isDown: function(keyCode) {
        return this._pressed[keyCode];
      },

      onKeydown: function(event) {
        this._pressed[event.keyCode] = true;
      },

      onKeyup: function(event) {
        delete this._pressed[event.keyCode];
      }
    };

    window.addEventListener('keyup', function(event) { Key.onKeyup(event); }, false);
    window.addEventListener('keydown', function(event) { Key.onKeydown(event); }, false);

    var Game = {
      fps: 60,
      width: 640,
      height: 480
    };

    Game._onEachFrame = (function() {
      var requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

      if (requestAnimationFrame) {
       return function(cb) {
          var _cb = function() { cb(); requestAnimationFrame(_cb); }
          _cb();
        };
      } else {
        return function(cb) {
          setInterval(cb, 1000 / Game.fps);
        }
      }
    })();

    Game.start = function() {
      Game.canvas = document.createElement("canvas");
      Game.canvas.width = Game.width;
      Game.canvas.height = Game.height;

      Game.context = Game.canvas.getContext("2d");

      document.body.appendChild(Game.canvas);

      Game.player = new Player();

      Game._onEachFrame(Game.run);
    };

    Game.run = (function() {
      var    
        skipTicks = 1000 / Game.fps,
        maxFrameSkip = 10,
        //nextGameTick = (new Date).getTime(),
        lastGameTick,
        tempTick;
      return function() {
        loops = 0;
    tempTick = (new Date).getTime();

        if ( tempTick > nextGameTick) {
          Game.update();
          nextGameTick += skipTicks;
          loops++;
        }




        if (loops > 0) Game.draw();
    else    {
            console.log("++++++++++++++++++++++++++++++++++");
        }
      }
    })();

    Game.draw = function() {
      Game.context.clearRect(0, 0, Game.width, Game.height);
      Game.player.draw(Game.context);
    };

    Game.update = function() {
      Game.player.update();
    };

    function Player() {
      this.x = 0;
      this.y = 0;
    }

    Player.prototype.draw = function(context) {
      context.clearRect(0,0, 300,300);
  context.beginPath();
  context.fillStyle="#0000ff";
  //Draw a circle of radius 20 at the coordinates 100,100 on the canvas
  context.arc(this.x, this.y,20,0,Math.PI*2,true); 
  context.closePath();
  context.fill(); 
  if(this.x<0 || this.x>550) dx=-dx;
  if(this.y<0 || this.y>400) dy=-dy;
  this.x+=dx;
  this.y+=dy;
  //noLoop();
    };

    Player.prototype.moveLeft = function() {
    loops = -12;

   // if(isPaused == 0){
//  loops = -1;
//  isPaused = 1;
//  console.log("paused");
//  }
//  else if(isPaused == 1){
//  loops = 1;
//  isPaused = 0;
//  console.log("unpaused");
//  }

    };

Player.prototype.notMoveLeft = function() {
  console.log("left arrow up");
    //Game.run();
    };

    Player.prototype.moveRight = function() {
     console.log("Foo");
      //if (onKeyup) noloop();
      //else if (onKeydown) loops();

    };

    Player.prototype.moveUp = function() {
      this.y -= 1;
    };

    Player.prototype.moveDown = function() {
      this.y += 1;
    };

    Player.prototype.update = function() {
      if (Key.isDown(Key.UP)) this.moveUp();
      if (Key.isDown(Key.LEFT)) this.moveLeft();
      if (Key.isDown(Key.DOWN)) this.moveDown();
      if (Key.isDown(Key.RIGHT)) this.moveRight();
      if (Key.onKeyup(Key.LEFT)) this.notMoveLeft();



    };
    </script>
  </head>
  <body onload="Game.start()">
  </body>
</html>


使用onkeydown/onkeydup（增强版）的玩家移动
画布{边框：1px实心；}
var _gaq=_gaq | |[]；
_gaq.push（[''设置帐户'，'UA-1150473-1']）；
_gaq.push（[''u trackPageview']）；
（功能（）{
var ga=document.createElement（'script'）；ga.type='text/javascript'；ga.async=true；
ga.src=（'https:'==document.location.protocol？'https://ssl' : 'http://www“）+”.google analytics.com/ga.js'；
var s=document.getElementsByTagName（'script'）[0]；s.parentNode.insertBefore（ga，s）；
})();
var nextGameTick=（新日期）.getTime（）；
var isPaused=0；
var循环=0；
var语境；
var x=100；
变量y=200；
var-dx=5；
var-dy=5；
变量键=