Currently, I am in the process of developing a Tetris game with a rotating Tetris piece controlled by pressing the space bar.
My next objective is to enable the movement of objects to the left and right using the arrow keys. After exploring various similar queries on Stack Overflow, I discovered that adjusting margins could make this achievable.
var angle = 0;
var obj = document.getElementById('image')
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '32') {
rotate();
}
else if (e.keyCode == '37') {
moveLeft();
}
else if (e.keyCode == '39') {
moveRight();
}
}
function rotate() {
angle = angle + 90;
console.log(angle)
obj.className = "image" + angle;
console.log(obj.className)
if (angle == 360) {
angle = 0;
}
}
function moveLeft() {
obj.style.left = parseInt(obj.style.left) - 5 + 'px';
}
function moveRight() {
obj.style.left = parseInt(obj.style.left) + 5 + 'px';
}
Despite implementing these changes, I am encountering some challenges.
To further illustrate my issue, I have recreated my code on a JSFiddle platform, replacing the Tetris piece with a banana image.