keycode movement issue with javascript (PacMan) - javascript
<script>
var world = [
[2,2,2,2,2,2,2,2,2,2],
[2,1,1,2,1,1,1,1,1,2],
[2,1,1,2,1,2,2,2,1,2],
[2,1,1,2,1,2,1,2,1,2],
[2,1,1,2,1,2,1,2,1,2],
[2,1,1,2,2,2,1,2,1,2],
[2,1,1,1,1,1,1,2,1,2],
[2,1,1,1,1,1,1,1,1,2],
[2,2,2,2,2,2,2,2,2,2],
];
var pacman = {
x: 29,
y: 29,
};
function displayWorld(){
var output = '';
for(var i = 0; i < world.length; i++){
output += "\n<div class='row'>\n";
for(var j = 0; j<world[i].length; j++){
if(world[i][j] == 2)
output +="\n<div class='brick'></div>";
else if (world[i][j] == 1)
output += "\n<div class='coin'></div>";
if (world[i][j] == 0)
output += "\n<div class='empty'></div>";
}
output += "\n</div>";
}
//console.log(output);
document.getElementById('world').innerHTML = output;
}
function displayPacman(){
document.getElementById('pacman').style.left= pacman.x+"px";
document.getElementById('pacman').style.top= pacman.y+"px";
}
displayWorld();
displayPacman();
document.onkeydown = function(e){
if(e.keyCode== 37){
pacman.x -= 30;
}
else if(e.keyCode== 39){
pacman.x += 30;
}
else if(e.keycode== 38){
pacman.y -= 30;
}
else if(e.keycode== 40){
pacman.y += 30;
}
console.log(e.keyCode);
displayPacman();
}
</script>
</body>
</html>
I am working on a simple Pacman game and I'm having problems getting my Pacman to move up and down. Pacman will move left and right with no problem, which lets me know that my pacman id is working, but my VAR y isn't. It's probably something simple I've missed, but I don't see it. Please help
if (e.keyCode == 37) {
pacman.x -= 30;
} else if (e.keyCode == 39) {
pacman.x += 30;
} else if (e.keyCode == 38) {
pacman.y -= 30;
} else if (e.keyCode == 40){
pacman.y += 30;
}
keyCode is case sensitive
You have used
else if(e.keycode== 40){
instead use keyCode
Related
Simple move javascript game
what wrong with my code
function move(x,y)
{
setInterval(function()
{
gameArea.clear();
gamePiece.x += x;
gamePiece.y += y;
gamePiece.update();
}, 100);
}
document.getElementsByTagName('body')[0].onkeyup = function(e)
{
var myInterval;
if(e.keyCode == 37)
{
move(10,0);
}
else if(e.keyCode == 38)
{
move(0,-10);
}
else if(e.keyCode == 39)
{
move(-10,0);
}
else if(e.keyCode == 40)
{
move(0,10);
}
}
This produce output i'm not expected, and the object can't move correctly.
Please help me to fixed this.
How do I change a value only when a key is pressed down?
I have tried to make a code where a ball only moves when I press the arrow keys and when I let go it stops, but it continues to move. How can I fix this?
This is the part of the code that I have written:
document.onkeydown = function tast (e) {
if (e.keyCode == 39) { // høyre
høyre = 1;
} else {
høyre = 0;
console.log("ikke høyre")
}
if (e.keyCode == 37) { // venstre
venstre = 1;
} else {
venstre = 0;
}
if (e.keyCode == 38) { // opp
opp = 1;
} else {
opp = 0;
}
if (e.keyCode == 40) { // ned
ned = 1;
} else {
ned = 0;
}
}
if (venstre == 1){
kuler[0].x -= 4;
}
if (høyre == 1){
kuler[0].x += 4;;
}
if (opp == 1){
kuler[0].y -= 4;
}
if (ned == 1){
kuler[0].y += 4;
}
Other then setting your values to 0 on else. Use a onkeyup event handler. Then for onkeypress set your values to 1. And onkeyup set them to 0:
document.onkeydown = function tast (e) {
if (e.keyCode == 39) høyre = 1;
if (e.keyCode == 37) venstre = 1;
if (e.keyCode == 38) opp = 1;
if (e.keyCode == 40) ned = 1;
}
document.onkeyup = function tast2 (e) {
if (e.keyCode == 39) høyre = 0;
if (e.keyCode == 37) venstre = 0;
if (e.keyCode == 38) opp = 0;
if (e.keyCode == 40) ned = 0;
}
Moving right immediately pushes div far off screen region
When I attempt to move the div (tank) to the right ONLY in the first "movement command", and only in that direction, I come across in issue whereby my div shoots off a few thousand pixels to the right, way off of the screen region. Was hoping someone would assist me to see why this is.
function animate() {
var tank = document.getElementById("tank");
tank.style.marginLeft="360px";
tank.style.marginTop="440px";
window.xpos = tank.style.marginLeft;
window.ypos = tank.style.marginTop;
window.x = xpos.replace("px","");
window.y = ypos.replace("px","");
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '37') {
if (x > 0) {
x = x - 20;
tank.style.marginLeft = x + "px";
}
} else if (e.keyCode == '39') {
if (x < 70) {
x = x + 20;
tank.style.marginLeft = x + "px";
}
} else if (e.keyCode == '38') {
if (y > 0) {
y = y - 20;
tank.style.marginTop = y + "px";
}
} else if (e.keyCode == '40') {
if (y < 440) {
y = y + 20;
tank.style.marginTop = y + "px";
}
}
}
checkKey(e);
}
window.lives = 3;
function destroy() {
if (lives != 0) {
alert("Life Lost!");
lives--;
window.collision == false;
animate();
} else {
alert("Try Again!");
}
}
window.collision = true;
function state() {
if (collision == false) {
window.state = 1;
} else if (collision == true) {
window.state = 0;
}
return state;
}
state();
if (state == 1) {
animate();
} else {
destroy();
}
You think you are doing a math operation but what you really are doing a string concatenation. In Javascript "360"-20 equals 340 because in this case the string is converted to a number and then an arithmetic subtraction is performed with both numeric values, however a different set of rules apply for the plus operator: in this case "360"+20 yields "36020" because the number is converted to a string and then both strings are concatenated.
Do this:
window.x = Number(xpos.replace("px",""));
window.y = Number(ypos.replace("px",""));
How can I change background-position with arrow-keys?
Hi just started trying to learn a little javascript, now for my first programm I wanted to write code that moves the "background-position" when pressing arrow-keys.
So I hope one of you guys can help me to fix my code.
My (not so fancy) Code:
var x = 0;
var y = 0;
function GetChar (event){
var keyCode = ('which' in event) ? event.which : event.keyCode;
posy(move(keyCode, x, y))
posx(move(keyCode, x, y))
}
function move (key, x, y){
if (key === 38){
return y ++;
} if else (key === 40){
return y --;
} if else (key === 39){
return x ++;
} if else (key === 37){
return x --;
} else{
}
}
function posy(movy) {
return body.style.background-position-y + movy * 100;
}
function posx(movx) {
return body.style.background-position-x + movx * 100;
}
I ended up solving it with jQuery:
$(document).ready(function(){
var posx = 0;
var posy = 0;
$(document).keydown(function(e){
if(e.keyCode==40){
posy--;
console.log('down');
}else if(e.keyCode==38){
posy++;
console.log('up');
}else if(e.keyCode==39){
posx--;
console.log('right');
}else if(e.keyCode==37){
posx++;
console.log('left');
}else{
};
console.log(posy);
console.log(posx);
$('body').css('background-position-y', ''+posy*100+'px');
$('body').css('background-position-x', ''+posx*100+'px');
});
});
Snake script is not passing values to variable
So here is my snake script - http://jsfiddle.net/6bKHc/24/ I started to create a snake game, but basically move(top), move(bottom) e.c. is not working. Any ideas why? I understand that I can't pass the elements to variable like this, so maybe you could show me how to do that correctly?
Ok cleared syntax and took a look at errors this should get you started
$(document).keydown(function(event){
var move, inter;
inter = setInterval(move = function() {
var dir = $(".snake").data('dir');
var snake = $('.snake');
if(dir == 'top') {
snake.stop().animate({"top": "+=5px"});
}
if(dir == 'bottom') {
snake.stop().animate({"top": "-=5px"});
}
if(dir == 'left') {
snake.stop().animate({"left": "+=5px"});
}
if(dir == 'right') {
snake.stop().animate({"top": "-=5px"});
}
}, 500);
if(event.which == 40) {
$(".snake").data('dir','top');
} else if(event.which == 39) {
$(".snake").data('dir','left');
} else if(event.which == 37) {
$(".snake").data('dir','right');
} else if(event.which == 38) {
$(".snake").data('dir','bottom');
}; });
fiddle
Couple of obvious additions to make:
boundary checking
smoothness of animation.
To make it work you will have to moodify your code like follows :
$(document).keydown(function() {
var inter;
return function(event) {
var move, prevDirection;
clearInterval(inter);
inter = setInterval(move = function(direction) {
var value, prop;
switch (direction || prevDirection) {
case "top":
prop = "top";
value = -5;
break;
case "bottom":
prop = "top";
value = 5;
break;
case "left":
prop = "left";
value = -5;
break;
case "right":
prop = "left";
value = 5;
break;
}
if (direction) prevDirection = direction;
$(".snake").css(prop, $(".snake").position()[prop] + value);
}, 500);
if (event.which == 40) {
move('bottom');
} else if (event.which == 39) {
move('right');
} else if (event.which == 37) {
move('left');
} else if (event.which == 38) {
move('top')
};
}
}());
http://jsfiddle.net/6bKHc/42/