1
\$\begingroup\$

This is the code I've written so far:

Html:

 <div id="stage">
  <div id="splash" class="screen">
    <h2>Land</h2>
    <button id="howtobutton">Instructions</button>
    <button id="hsbutton">High Score</button>
    <button id="optionsbutton">Options</button>
    <button id="playbutton">Play Game</button>
  </div>
    <div id="instructions" class="screen">
      <h2>How to Play</h2>
      <button class="backtomenu">Back to Menu</button>
    </div>
  <div id="highscores" class="screen">
    <h2>High Scores</h2>
    (Username), your high score is: 
    <button class="backtomenu">Back to Menu</button>
  </div>
  <div id="options" class="screen">
    <h2>Options</h2>
    <button class="backtomenu">Back to Menu</button>
  </div>
    <div id="game" class="screen">
      <div id="ground" class="platform"></div>
      <div id="score"> Score:</div>
      <div id="player"></div>
      <button id="btn-quit" class="backtomenu">Back</button>
    </div>

CSS:

div {
  border: 1px solid black;
} h2 {
  text-align: center;
} button {
  display: block;
  width: 100px;
  margin: 10px auto;
} #stage {
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;
  background-image: url(http://www.hlgjyl888.com/data/wallpapers/151/WDF_1917288.gif);
  background-size: cover;
} #splash {
  display: block;
} .screen {
  position: relative;
  display: none;
  width: 100%;
  height: 100%;
  color: white;
} #player {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  background-color: blue;
  bottom: 50px;
  top: 269px;
  left: 100px; 
}
} #score {
  position: relative;
  top: 0px;
  right: 5px;
  width: 100px;
} #btn-quit {
  position: absolute;
  margin: 0;
  bottom: 0px;
  left: 0px;
} .platform {
  position: absolute;
  background-color: white;
} .onPlatform {
  background-color: blue;
}
#ground {
  top: 300px;
  width: 400px;
  height: 3px;
}

JavaScript:

var gravity = 1;
var maxheight;
var timer;
var jump = 32;
var velocity = 0;
var jumppressed = false;
// var username = prompt("What is your name?")


$(document).ready(function() {



  $('#howtobutton').click(function() {
    showScreen('#instructions');
  });
  $('#hsbutton').click(function() {
    showScreen('#highscores')
  });
  $('#playbutton').click(function() {
    showScreen('#game')
  });
  $('#optionsbutton').click(function() {
    showScreen('#options')
  });
  $('.backtomenu').click(function() {
    showScreen('#splash')
  });




maxheight = Math.round($("#stage").height() - $("#player").height());

timer = setInterval(update, 1000/60);

   $(document).keypress(function(e) {
    console.log(e.which);
    if (e.which === 32) {
      console.log("it works");
      jump();
    }});
});   


function showScreen(screen) {
$('.screen').hide();
$(screen).show();
};

function jump() {
  if ($("#player").position().top >= maxheight) {
    console.log("Jump is working")
    velocity = -15;
  }
};







function update() {
  if (velocity === 0 && $("#player").position().top === maxheight) {
  } else if (velocity > 0 && $("#player").position().top >= maxheight) {
    console.log(maxheight + " through ground" + $("#player").position().top);
    $("#player").css("top", maxheight + "px");
    velocity = 0;
  } else {
    velocity += gravity;
    var newPos = $("#player").position().top + velocity + "px";
    $("#player").css("top", newPos);
  }
};

However I'm very new to game development, I've been stumped for a while now, I can't figure out a way to control my character movement. Can anyone tell me what's wrong with my code? My character should be jumping on the platform whenever the space key is pressed (that's it).

\$\endgroup\$
  • 1
    \$\begingroup\$ Please don't post the code as an external link. The link may die and then the question is more or less useless for future users. Instead use the code formatting block and post your code here instead. \$\endgroup\$ – Charanor Apr 22 '17 at 8:47
1
\$\begingroup\$

The function you are calling (jump) is only being defined AFTER the method that is handling the input, so it happens the error "jump is not a function".

Just move your jump function code to the beginning and it will work(I have tested it myself).

\$\endgroup\$
  • \$\begingroup\$ So move it to before the document.ready function starts? \$\endgroup\$ – Eeea Apr 23 '17 at 21:33
  • \$\begingroup\$ @Eeea It can be inside the document.ready, but needs to be before any call to the function. \$\endgroup\$ – DH. Apr 23 '17 at 21:37
  • \$\begingroup\$ So do I need to move any of the other functions as well? \$\endgroup\$ – Eeea Apr 23 '17 at 22:52
  • \$\begingroup\$ @Eeea Not that I'm aware of. Just make sure that the new functions you implement respect this rule. \$\endgroup\$ – DH. Apr 24 '17 at 11:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.