Question

我正在开发2D游戏，但是跳跃系统存在一些问题。在某些时候，角色可能跳得很高。我不知道是哪一部分造成的....
我想对跳跃系统添加一个限制，因此每次跳跃的增加高度将是相同的。
我上网看了，没有找到相关的教程。
这是我的代码：

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var img=document.getElementById("kid");
var playerW=40;
var playerH=40;
var playerX=5+40;
var playerY=canvas.height-40-playerH+5;
var right=false;
var left=false;
var up=false;
var rightup=false;
var leftup=false;
var onGround=true;
var dy=0;
var dx=0;
var userchoice=false;
var velocity=0;
var block={
  lv1:{x:160,y:canvas.height-80,width:200,height:40},
  lv2:{x:200,y:canvas.height-120,width:160,height:40},
  lv3:{x:280,y:canvas.height-160,width:80,height:40}
}

document.addEventListener("keydown",press);
document.addEventListener("keyup",release);
function press(event){
  if(event.keyCode== 68){right=true}
  if(event.keyCode== 65){left=true}
  if(event.keyCode== 87){up=true}
  
}
function release(event){
  if(event.keyCode== 68){right=false}
  if(event.keyCode== 65){left=false}
  if(event.keyCode== 87){up=false}
}


function background(){
  c.strokeStyle="black";
var backgroundX=40;
var backgroundY=40;
for(var a=0;a<canvas.width/40;a++){
  c.moveTo(backgroundX,backgroundY);
  c.lineTo(backgroundX,0);//verticle
  c.moveTo(backgroundX,backgroundY);
  backgroundX+=40;
  c.lineTo(backgroundX,backgroundY);
  c.stroke();}
backgroundX=40;
for(var a=0;a<canvas.height/40;a++){
  c.moveTo(backgroundX,backgroundY);
  c.lineTo(0,backgroundY);
  c.moveTo(backgroundX,backgroundY);
  backgroundY+=40;
  c.lineTo(backgroundX,backgroundY);
  c.stroke();}
backgroundY=canvas.height-40;
for(var a=0;a<canvas.width/40;a++){
  c.moveTo(backgroundX,backgroundY);
  c.lineTo(backgroundX,canvas.height);
  c.moveTo(backgroundX,backgroundY);
  backgroundX+=40;
  c.lineTo(backgroundX,backgroundY);
  c.stroke();}
backgroundX=canvas.width-40;
for(var a=0;a<canvas.height/40;a++){
  c.moveTo(backgroundX,backgroundY);
  c.lineTo(canvas.width,backgroundY);
  c.moveTo(backgroundX,backgroundY);
  backgroundY-=40;
  c.lineTo(backgroundX,backgroundY);
  c.stroke();}
}


function Player(){
  c.beginPath();
  c.drawImage(img,playerX,playerY,playerW,playerH);
  c.closePath();
}
function Sprites(){
  //drop1
  verticleSP(360,40);
  //drop2
  verticleSP(600,40);
  verticleSP(640,40);
  //RsideSp
  var sx=canvas.width-40;
  var sy=40;
  c.beginPath();
  c.strokeStyle="black";
  c.moveTo(sx,sy);
  for(var a=0;a<11;a++){
  sx-=40;sy+=20;
  c.lineTo(sx,sy);
  sx+=40;sy+=20;
  c.lineTo(sx,sy);
  }
  c.stroke();
  c.closePath();
}

function verticleSP(mx,my){
  c.beginPath();
  c.strokeStyle="black";
  c.moveTo(mx,my);
  c.lineTo(mx+20,my+40);
  c.lineTo(mx+40,my);
  c.stroke();
  c.closePath();
}
function Bricks(){
  var brickX=160;
  c.beginPath();
  c.strokeStyle="black";
  for(var a=0;a<6;a++){
    c.strokeRect(brickX,canvas.height-80,40,40);
  
    if(a>=1){
      c.strokeRect(brickX,canvas.height-120,40,40);
    }
    if(a>=3){
      c.strokeRect(brickX,canvas.height-160,40,40);
    }
    brickX+=40;
  }
  c.closePath();
  c.beginPath();
    //white
  c.fillStyle="white";
  c.fillRect(canvas.width-50,canvas.height-120,50,79);
  c.closePath();
}



function draw(){
  c.clearRect(0,0,canvas.width,canvas.height);
  Player();
  background();
  Bricks();
  Sprites();
  if(right && playerX<canvas.width-40-playerW){playerX+=10}
  if(left && playerX>40){playerX-=5}
  if(up && playerY<canvas.height-40 && onGround==true){onGround=false;velocity-=20}
  velocity+=1;playerY+=velocity;velocity*=0.98;
  if(playerY >=canvas.height-75){
    onGround=true;
    playerY=canvas.height-80;
    velocity=0}
  else if(playerY >=canvas.height-115 && playerX+playerW>=160 && playerX<200){
    onGround=true;
    playerY=canvas.height-120;
    velocity=0}
  else if(playerY >=canvas.height-155 && playerX+playerW>=200 && playerX<280){
    onGround=true;
    playerY=canvas.height-160;
    velocity=0}
  else if(playerY >=canvas.height-195 && playerX+playerW>=280 && playerX<400){
    onGround=true;
    playerY=canvas.height-200;
    velocity=0}

  //collision
  var Cobject=[block.lv1,block.lv2,block.lv3];
  for(var a=0; a<Cobject.length;a++){
    var object=Cobject[a];
    var playerL=playerX-playerW;
    var playerR=playerX+playerW;
    var playerT=playerY-playerH;
    var playerB=playerY+playerH;
    var objectL=object.x;
    var objectR=object.x+object.width;
    var objectT=object.y;
    var objectB=object.y+object.height;
    if(playerR>=objectL && playerL<=objectR && playerB>=objectT && playerT<=objectB){
      if(playerY+playerH==objectT || playerY-playerH==objectB){playerY=playerY}
      else if(playerX+playerW==objectL || playerX-playerW==objectR){playerX=playerX}
      else if(playerR>objectL && playerL<objectR && playerB>objectT && playerT<objectB){
        var sides = {left:Math.abs(playerR-objectL), right:Math.abs(playerL-objectR), top:Math.abs(playerB-objectT), bottom:Math.abs(playerT-objectB)};
				var side = Math.min(sides.left, sides.right, sides.top, sides.bottom);
				if (side==sides.top) {playerY=objectT-playerH;} 
				else if(side==sides.left){playerX=objectL-playerW;} 
				else if(side==sides.bottom){playerY=objectB+playerH}
				else if(side==sides.right){playerX=objectR+playerW;} 
				onGround=true;
      }
    }
  }
  playerY+=5;
}
var interval=setInterval(draw,30);

#canvas{
  background-color:white;
}

<canvas id="canvas" width="800" height="600" style="border:1px solid black;"></canvas>
<div style="display:none;">
  <img id="kid" 
       src="https://piskel-imgstore-b.appspot.com/img/134e6d8c-4b35-11e9-8f66-99bb0ec250b4.gif" 
       >
</div>

如何在JavaScript游戏中添加跳跃限制？

0 个答案: