按下键时的函数调用

时间：2015-07-24 02:58:20

标签： javascript

我的代码的分段：

document.onkeydown = checkKey;
    function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '39') {
        move_right();
    }
    if (e.keyCode == '37'){
        move_left();
    }
    if (e.keyCode == '38'){
        up();
    }

    }

var y1=3;
function up() {
function jump() {
y=y-y1;
if(y<440)
y1*=-1;
else if(y>510)
y=510;  
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(sessionStorage.clickcount3,y,50,50);
requestAnimFrame(jump); 
}
jump();}

我想要做的是每次按下向上箭头时使方形跳跃一次。当我在浏览器中加载页面时，它在第一次按下时工作正常，但如果我再次按向上箭头，则不起作用。我该如何解决这个问题？

编辑：

我的完整代码：

<html>
<head>

</head>
<body>
<canvas id="myCanvas" width="1350" height="650"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
          window.setTimeout(callback, 1000 / 2);
        };
      })();

document.onkeydown = checkKey;
    function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '39') {
        move_right();
    }
    if (e.keyCode == '37'){
        move_left();
    }
    if (e.keyCode == '38'){
        up();
    }

    }

if (sessionStorage.clickcount3 == null)
{sessionStorage.clickcount3 = 100;}

var height=560;
var condition1;
var condition2;
var y=510;
draw();

function draw() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#fff000";
ctx.fillRect(0,560,1350,20);

c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(sessionStorage.clickcount3,y,50,50); }

</script>

<script>
function move_right() {
clear();
clickCounter_right();
draw(); }

function move_left() {
clear();
clickCounter_left();
draw();
}

</script>

<script>
function clickCounter_right() {
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.clickcount3) {
            sessionStorage.clickcount3 = Number(sessionStorage.clickcount3)+10;
        } 
        else {
            sessionStorage.clickcount3 = 100;
        }   
    } 
}
</script>

<script>
function clickCounter_left() {
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.clickcount3) {
            sessionStorage.clickcount3 = Number(sessionStorage.clickcount3)-10;
        }
        else {
            sessionStorage.clickcount3 = 100;
        }           
    } 
}
</script>



<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(0,0,1350,650);

function pixel(){
            this.x = Math.floor(Math.random()*(1350-600+1)+800); 
            this.y  = 325;
         }
var pixels=[];
var randomx=[];
var randomy=[];
for(i=0;i<6;i++)
pixels.push(new pixel());
function clear() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle="black";
ctx.fillRect(0, 0, 1350, 650);
}
generate();
function generate(){
for(i=0;i<6;i++)
{
var numx = Math.floor(Math.random()*99); 
numx *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
var numy = Math.floor(Math.random()*99); 
numy *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
//randomx[i]=Math.floor(Math.random()*(100-1000000+1)+2000000)*-1/500000;
randomx[i]=-5;
randomy[i]=3;
}
}
var y1=3;
function up() {
function jump() {
y=y-y1;
if(y<440)
y1*=-1;
else if(y>510)
y=510;  
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(sessionStorage.clickcount3,y,50,50);
requestAnimFrame(jump); 
}
jump();}

function animloop(){
clear();
draw();
for(i=0;i<6;i++){
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(pixels[i].x,560,50,20);
}
for(i=0;i<6;i++)
{pixels[i].x=pixels[i].x+randomx[i];
if(pixels[i].x<-10)
{pixels[i].x=Math.floor(Math.random()*(1350-600+1)+1350)}
//pixels[i].y=pixels[i].y+randomy[i];
}
requestAnimFrame(animloop);}
animloop();
</script>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

跳转后你不会重置变量。您还可以使用jump函数进行无限循环。

＆＃13;
＆＃13; 
<html>
    <head>
    </head>
<body>
    <canvas id="myCanvas" width="1350" height="650"></canvas>
    <script>
        window.requestAnimFrame = (function(callback) {
            return window.requestAnimationFrame ||      
                   window.webkitRequestAnimationFrame || 
                   window.mozReque stAnimationFrame || 
                   window.oRequestAnimationFrame || 
                   window.msRequestAnimationFrame ||
                   function(callback) {
                       window.setTimeout(callback, 1000 / 2);
                   };
        })();

        document.onkeydown = checkKey;

        function checkKey(e) {
            e = e || window.event;

           if (e.keyCode == '39') {
               move_right();
           }

           if (e.keyCode == '37'){
               move_left();
           }

           if (e.keyCode == '38'){
               up();
           }
       }

       if (sessionStorage.clickcount3 == null) {
           sessionStorage.clickcount3 = 100;
       }

       var height=560;
       var condition1;
       var condition2;
       var y=510;
       draw();

      function draw() {
          var c = document.getElementById("myCanvas");
          var ctx = c.getContext("2d");
          ctx.fillStyle = "#fff000";
          ctx.fillRect(0,560,1350,20);

          c = document.getElementById("myCanvas");
          ctx = c.getContext("2d");
          ctx.fillStyle = "white";
          ctx.fillRect(sessionStorage.clickcount3,y,50,50);
      }
</script>

<script>
function move_right() {
clear();
clickCounter_right();
draw(); }

function move_left() {
clear();
clickCounter_left();
draw();
}

</script>

<script>
function clickCounter_right() {
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.clickcount3) {
            sessionStorage.clickcount3 = Number(sessionStorage.clickcount3)+10;
        } 
        else {
            sessionStorage.clickcount3 = 100;
        }   
    } 
}
</script>

<script>
function clickCounter_left() {
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.clickcount3) {
            sessionStorage.clickcount3 = Number(sessionStorage.clickcount3)-10;
        }
        else {
            sessionStorage.clickcount3 = 100;
        }           
    } 
}
</script>



<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(0,0,1350,650);

function pixel(){
            this.x = Math.floor(Math.random()*(1350-600+1)+800); 
            this.y  = 325;
         }
var pixels=[];
var randomx=[];
var randomy=[];
for(i=0;i<6;i++)
pixels.push(new pixel());
function clear() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle="black";
ctx.fillRect(0, 0, 1350, 650);
}
generate();
function generate(){
for(i=0;i<6;i++)
{
var numx = Math.floor(Math.random()*99); 
numx *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
var numy = Math.floor(Math.random()*99); 
numy *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
//randomx[i]=Math.floor(Math.random()*(100-1000000+1)+2000000)*-1/500000;
randomx[i]=-5;
randomy[i]=3;
}
}
var y1=3;
function up() {
function jump() {
  y=y-y1;
  
  if (y<440) {
    y1*=-1;
  }

  if (y <= 510) {
    c = document.getElementById("myCanvas");
    ctx = c.getContext("2d");
    ctx.fillStyle = "white";
    ctx.fillRect(sessionStorage.clickcount3,y,50,50);
    requestAnimFrame(jump);  
  } else {
    y = 510;
    y1 = 3;
  }
}
jump();
}

function animloop(){
clear();
draw();
for(i=0;i<6;i++){
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(pixels[i].x,560,50,20);
}
for(i=0;i<6;i++)
{pixels[i].x=pixels[i].x+randomx[i];
if(pixels[i].x<-10)
{pixels[i].x=Math.floor(Math.random()*(1350-600+1)+1350)}
//pixels[i].y=pixels[i].y+randomy[i];
}
requestAnimFrame(animloop);}
animloop();
</script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题