Hi I've taken the code (to move objects with arrow keys) from some internet template. Since then, I've limited the area that the object can be moving around but I still have a problem that when I press an arrow key the object moves more than necessary, I just want to move it 20px in the appropriate direction, regardless how long the key is pressed.
Here are the functions:
var GameInput = (function() {
var pressedKeys = {};
function setKey(event, status) {
var code = event.keyCode;
var key;
switch(code) {
case 32:
key = 'SPACE'; break;
case 37:
key = 'LEFT'; break;
case 38:
key = 'UP'; break;
case 39:
key = 'RIGHT'; break;
case 40:
key = 'DOWN'; break;
default:
// Convert ASCII codes to letters
key = String.fromCharCode(event.keyCode);
}
pressedKeys[key] = status;
}
document.addEventListener('keydown', function(e) {
setKey(e, true);
});
document.addEventListener('keyup', function(e) {
setKey(e, false);
});
function isDown(key) {
return pressedKeys[key];
}
return {
isDown: isDown
};
})();
And the function calling it:
function update() {
if(GameInput.isDown('DOWN')) {
if(player.y < canvas.height - player.sizeY) {
player.y += 20;
}
}
if(GameInput.isDown('UP')) {
if(player.y > 0) {
player.y -= 20;
}
}
if(GameInput.isDown('LEFT')) {
if(player.x > 0) {
player.x -= 20;
}
}
if(GameInput.isDown('RIGHT')) {
// Don't go out of canvas
if(player.x < canvas.width - player.sizeX) {
player.x += 20;
}
}
// You can pass any letter to `isDown`, in addition to DOWN,
// UP, LEFT, RIGHT, and SPACE:
// if(GameInput.isDown('a')) { ... }
}
I understand why it does what it does but I have not been able to modify it to only move 20px regardless how much time a key is pressed.
Thank you
How about using the keyup event to allow the operation to repeat only when a new key is pressed. Something like:
var allowRepeat = true;
document.addEventListener('keydown', function(e) {
if (allowRepeat) {
setKey(e, true);
}
allowRepeat = false;
});
document.addEventListener('keyup', function(e) {
allowRepeat = true;
setKey(e, false);
});
I think your logic is a little reverted, what you want is to disallow update 'before key up is fired', from your code, as long as the keyUp event is not fired, isDown('XXX') is still true..
So this is what you need: (you should do some refactoring, but this should work)
var GameInput = (function() {
....
var _allowUpdate = {};
function setKey(event, status) {
var code = event.keyCode;
var key;
switch(code) {
case 32:
key = 'SPACE'; break;
case 37:
key = 'LEFT'; break;
case 38:
key = 'UP'; break;
case 39:
key = 'RIGHT'; break;
case 40:
key = 'DOWN'; break;
default:
// Convert ASCII codes to letters
key = String.fromCharCode(event.keyCode);
}
// This checks whether it's the first time the key being pressed.
allowUpdate[key] = !pressedKeys[key] && status;
pressedKeys[key] = status;
}
function allowUpdate(key) {
_allowUpdate[key] ;
}
return {
allowUpdate: allowUpdate
};
}
function update() {
if(GameInput.allowUpdate('DOWN')) {
if(player.y < canvas.height - player.sizeY) {
player.y += 20;
}
}
.....
}
Related
In my code I make an object (A man sprite) move 1 pixel every time an arrow key is pressed. When you hold down the arrow key, the man is very very slow. I tried increasing the amount each time the key is pressed but that is not smooth enough. Can somebody tell me how I can make him move one pixel each time but move one pixel every 100 milliseconds? Thanks I appreciate the help.
function moveLeft() {
var newLeft = left - 1;
left = newLeft;
myElement.style.left = newLeft + 'px';
}
function moveUp() {
var newTop = topStyle - 1;
topStyle = newTop;
myElement.style.top = newTop + 'px';
}
function moveRight() {
var newLeft2 = left + 1;
left = newLeft2;
myElement.style.left = newLeft2 + 'px';
}
function moveDown() {
var newTop2 = topStyle + 1;
topStyle = newTop2
myElement.style.top = newTop2 + 'px';
}
try it, i just re-write the whole code for you. now i use an interval for each 100 milliseconds
var myElement = document.getElementById("character");
var move_left = false;
var move_up = false;
var move_right = false;
var move_down = false;
setInterval(function (){
if (move_left) myElement.style.left = (getIntfromStyle(myElement.style.left) - 1) + 'px';
if (move_up) myElement.style.top = (getIntfromStyle(myElement.style.top) - 1) + 'px';
if (move_right) myElement.style.left = (getIntfromStyle(myElement.style.left) + 1) + 'px';
if (move_down) myElement.style.top = (getIntfromStyle(myElement.style.top) + 1) + 'px';
}, 100);
// with this function, you dont need topStyle & left variables to store previous positions
// you can get current positioin easilysily
function getIntfromStyle(in_style) {
return parseInt(in_style.replace('px', ''));
}
// i use keyboard to tell code when character should be moved and when must stop
document.onkeydown = function(e) {
e = e || window.event;
switch(e.which || e.keyCode) {
case 37: // left
move_left = true;
break;
case 38: // up
move_up = true;
break;
case 39: // right
move_right = true;
break;
case 40: // down
move_down = true;
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
}
document.onkeyup = function(e) {
e = e || window.event;
switch(e.which || e.keyCode) {
case 37: // left
move_left = false;
break;
case 38: // up
move_up = false;
break;
case 39: // right
move_right = false;
break;
case 40: // down
move_down = false;
break;
}
}
<div id="character" style="background:red;width:20px;height:20px;position:fixed;display:block;left:0;top:0"></div>
So the operating system has a delay when you hold down a key. It will execute the command once, delay, then repeat. I tried to bypass this with setting a variable to true or false based on when the key has "keydown" and "Keyup." I am not sure why it is not working though. I am not sure if I am forgetting about something, but If someone could explain why my code is still not fixing the issue.
Variables
var keyPressed = {Kleft: 37, Kright: 39, Kup: 38, Kdown: 40, Kspace: 32};
key = {K37: false, K39: false, K38: false, K40: false, K32: false};
detect for key being pressed
//to detect multiple keys being pressed
$(document).keydown(function(e) {
if(keyPressed.Kleft) //left arrow
{
console.log('test');
key.K37 = true;
airplane.performAction();
}
if(keyPressed.Kright) //right arrow
{
key.K37 = true;
// airplane.performAction();
}
if(keyPressed.Kup) //up arrow
{
key.K37 = true;
// airplane.performAction();
}
if(keyPressed.Kdown) //down arrow
{
key.K37 = true;
// airplane.performAction();
}
if(keyPressed.Kspace) //space key
{
key.K37 = true;
bullet = new Bullet({x: airplane.position.x+32, y: airplane.position.y-12}, bullets_total++); //create a new bullet
bullets.push(bullet); //store the bullet in the bullets array
}
}).keyup(function(e) {
key.K37 = false; //testing just one key for now
console.log('ehhlo');
// console.log(key['K'+toString(e)]);
// key['K'+toString(e)] = false;
});
the executed function on Keypress
function MyAirplane()
{
this.performAction = function(action)
{
if(key.K37 === true){
console.log('left');
this.position.x -= 10;
}
if(key.K37 == true){
this.position.x += 10;
}
if(key.K37 == true){
this.position.y -= 10;
}
if(key.K37 == true){
this.position.y += 10;
}
}
}
Just an idea, try not automatically calling performAction.
//to detect multiple keys being pressed
$(document).keydown(function(e) {
if(keyPressed.Kleft) //left arrow
{
key.K37 = true;
}
if(keyPressed.Kright) //right arrow
{
key.K37 = true;
}
if(keyPressed.Kup) //up arrow
{
key.K37 = true;
}
if(keyPressed.Kdown) //down arrow
{
key.K37 = true;
}
if(keyPressed.Kspace) //space key
{
key.K37 = true;
bullet = new Bullet({x: airplane.position.x+32, y: airplane.position.y-12}, bullets_total++); //create a new bullet
bullets.push(bullet); //store the bullet in the bullets array
}
}).keyup(function(e) {
key.K37 = false; //testing just one key for now
console.log('ehhlo');
// console.log(key['K'+toString(e)]);
// key['K'+toString(e)] = false;
});
And create an event timer:
function MyAirplane()
{
this.performAction = function(action)
{
if(key.K37 === true){
console.log('left');
this.position.x -= 10;
}
if(key.K37 == true){
this.position.x += 10;
}
if(key.K37 == true){
this.position.y -= 10;
}
if(key.K37 == true){
this.position.y += 10;
}
}
// 60 frames per second event checker.
var eventLoop = setInterval(this.performAction.bind(this), 1000 / 60);
}
I have a piece of code here and I want to be able to press a key (f.i. the "1" key) so var isRunning = false. When I press another key (f.i. the "2" key) var isRunning should change back to isRunning = true.
It needs to be as simple as possible (javascript/html), no jquery. I just want to alter the value of this var with a definable keystroke.
This is the code:
<script type="text/javascript">
var pages=[];
pages[0]="page0.html"
pages[1]="page1.html"
pages[2]="page2.html"
var time = 33000;
var currentIndex = 0;
var isRunning = true;
function pageChange() {
if(isRunning){
if(currentIndex == 0){
pages = shuffle(pages);
console.log(pages);
currentIndex = pages.length;
}
currentIndex--;
document.getElementById("frame").src=pages[currentIndex];
console.log(currentIndex);
}
setTimeout(function() { pageChange(); }, time);
};
window.onload = function(){
pageChange();
}
</script>
This Should do the trick ;)
document.addEventListener('keydown', function(event) {
if(event.keyCode == 49) { //keycode 49 is '1'
isRunning = false;
}
else if(event.keyCode == 50) { //keycode 50 is '2'
isRunning = true;
}
});
Since your isRunning is in global scope, you can just catch a keydown event for the number keys. For example if you want to catch the event on the whole page, go like this:
window.onkeydown = function(e){
switch(e.keyCode){
case 49:
case 97:
isRunning = false;
break;
case 50:
case 98:
isRunning = true;
break;
}
}
im writing a simple canvas game and want to be able to move my character diagonally on the screen. how do I detect two keys pressed say up and right?
heres my code so far-
function keyHit(evt){
switch (evt.keyCode) {
case 38: /* Up arrow was pressed */
if (player2y >= 1){
player2y -= 4;
} else {player2y = 0;}
break;
case 40: /* Down arrow was pressed */
if (player2y <= 364){
player2y += 4;
} else { player2y = 365;}
break;
case 37: /* Left arrow was pressed */
if (player2x >= 1){
player2x -= 4;
} else {player2x = 0;}
break;
case 39: /* Right arrow was pressed */
if (player2x <= 665){
player2x += 4;
} else {player2x = 666;}
break;
}
}
Trap "keydown" and "keyup" events and maintain the list of keys that are currently pressed. Example:
pressed = {}
window.onkeydown = function(e) {
pressed[e.keyCode] = 1
handler(Object.keys(pressed).sort())
}
window.onkeyup = function(e) {
delete pressed[e.keyCode];
handler(Object.keys(pressed).sort())
}
function handler(pressed) {
document.getElementById("log").value = pressed
if(pressed == "38,39")
alert("Up+Right pressed!")
}
<textarea id="log"></textarea><br>click here first, then press some keys
I am playing with a very simple little shooter to learn about easeljs, tweenjs, and canvas coding. I've run into a problem that's stumped me.
I get an unexpected end of input error in Chrome and it indicates line 1. Whats up with that?
Note that in the code below I have commented out all of the keyboard input code. The error no longer appears. When I uncomment either the document.addEventListener or window.addEventListener input code the error is thrown again. And further experimentation led me to believe it has to do with the event object but beyond that I have no idea.
Hope someone can help!
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
init();
}
function init() {
console.log("init hit");
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
createStarField();
shipImg = new Image();
shipImg.onload = onShipLoaded;
shipImg.src = "ship1.png";
Ticker.setFPS(30);
Ticker.addListener(window);
/* document.addEventListener('keydown', function(event) {
switch(event.keyCode) {
case 37: // left
moveLeft = true; moveRight = false;
break;
case 38: moveUp = true; moveLeft = false;
break;
case 39: moveRight = true; moveLeft = false;
break;
case 40: moveDown = true; moveUp = false;
break;
}
}, false);
document.addEventListener('keyup', function() {
switch(e.keyCode) {
// left
case 37: moveLeft = false;
break;
// up
case 38: moveUp = false;
break;
// right
case 39: moveRight = false;
break;
// down
case 40: moveDown = false;
break;
}
}, false);
*/
/*function onKeyDown(e) {
//if(!e) { var e = window.event; }
switch(e.keyCode) {
// left
case 37: moveLeft = true; moveRight = false;
break;
case 38: moveUp = true; moveLeft = false;
break;
case 39: moveRight = true; moveLeft = false;
break;
case 40: moveDown = true; moveUp = false;
break;
}
}
function onKeyUp(e) {
// if(!e) { var e = window.event; }
switch(e.keyCode) {
// left
case 37: moveLeft = false;
break;
// up
case 38: moveUp = false;
break;
// right
case 39: moveRight = false;
break;
// down
case 40: moveDown = false;
break;
}
*/
function checkMovement() {
if(moveLeft)
{
ship.x -= speed;
if(ship.x < 0)
ship.x = 640;
}
else if(moveRight)
{
ship.x += speed;
if(ship.x > 640)
ship.x = 0;
}
if(moveUp)
{
if(ship.y - speed > 24)
ship.y -= speed;
}
else if(moveDown)
{
if(ship.y + speed < 460)
ship.y += speed;
}
}
function onShipLoaded() {
ship = new Bitmap(shipImg);
ship.regX = ship.image.width * .05;
ship.regY = ship.image.height * 0.5;
ship.x = 320;
ship.y = 450;
stage.addChild(ship);
}
function createStarField() {
console.log("create star field");
stars = new Array();
g = new Graphics();
g.setStrokeStyle(1);
g.beginStroke(Graphics.getRGB(255,255,255));
g.beginFill(Graphics.getRGB(255,255,255));
g.drawCircle(0,0,1);
for(var i = 0; i < 100; ++i) {
var s = new Shape(g);
stars.push(s);
s.x = randRange(10,630);
s.y = randRange(-250, 470);
s.scaleX = randRange(0.5, 2);
s.scaleY = s.scaleX;
s.alpha = Math.random() + 0.2;
stage.addChild(s);
}
}
function randRange(min, max) {
return Math.floor(Math.random()*(max - min)) + min;
}
function tick() {
console.log("tick hit");
updateStarField();
checkMovement();
stage.update();
}
function updateStarField() {
console.log("updateStarField()");
var curStar;
var limit = stars.length;
for(var i = 0; i < limit; ++i) {
curStar = stars[i];
curStar.y += 4
if(curStar.y > 480) {
curStar.x = randRange(10,630);
curStar.y = -randRange(20, 450);
}
}
}
The last commented out onKeyUp(e) function lacks a closing curly brace (})