🐴騎馬戦🐎
	
	

		

			
👸
			
🤴
			
Let's Play!
		
		

			👆
			

				👈
				👉
			
			👇
			

				👈
				👉
			
			👆
			👇
		
	





//JavaScript
const PLAYER_MOVE_DISTANCE = 50;

const player1 = document.getElementById('player1');
const player2 = document.getElementById('player2');
const gameStatus = document.getElementById('game-status');

let p1PosY = 0;
let p1PosX = 0;
let p2PosY = 0;
let p2PosX = 450;

player1.style.top = `${p1PosY}px`;
player1.style.left = `${p1PosX}px`;
player2.style.top = `${p2PosY}px`;
player2.style.left = `${p2PosX}px`;

function movePlayer1(direction) {
	switch(direction) {
		case 'up':
			if (p1PosY > 0) {
				p1PosY -= PLAYER_MOVE_DISTANCE;
				player1.style.top = `${p1PosY}px`;
			}
			break;
		case 'down':
			if (p1PosY < 450) {
				p1PosY += PLAYER_MOVE_DISTANCE;
				player1.style.top = `${p1PosY}px`;
			}
			break;
		case 'left':
			if (p1PosX > 0) {
				p1PosX -= PLAYER_MOVE_DISTANCE;
				player1.style.left = `${p1PosX}px`;
			}
			break;
		case 'right':
			if (p1PosX < 450) {
				p1PosX += PLAYER_MOVE_DISTANCE;
				player1.style.left = `${p1PosX}px`;
			}
			break;
		default:
			break;
	}
	checkWin();
}

function movePlayer2(direction) {
	switch(direction) {
		case 'up':
			if (p2PosY > 0) {
				p2PosY -= PLAYER_MOVE_DISTANCE;
				player2.style.top = `${p2PosY}px`;
			}
			break;
		case 'down':
			if (p2PosY < 450) {
				p2PosY += PLAYER_MOVE_DISTANCE;
				player2.style.top = `${p2PosY}px`;
			}
			break;
		case 'left':
			if (p2PosX > 0) {
				p2PosX -= PLAYER_MOVE_DISTANCE;
				player2.style.left = `${p2PosX}px`;
			}
			break;
		case 'right':
			if (p2PosX < 450) {
				p2PosX += PLAYER_MOVE_DISTANCE;
				player2.style.left = `${p2PosX}px`;
			}
			break;
		default:
			break;
	}
	checkWin();
}

function checkWin() {
	if (p1PosY === p2PosY && p1PosX === p2PosX) {
		gameStatus.innerHTML = 'Draw!';
	} else if (p1PosY === 450 && p1PosX === 450) {
		gameStatus.innerHTML = 'Player 1 wins!';
	} else if (p2PosY === 0 && p2PosX === 0) {
		gameStatus.innerHTML = 'Player 2 wins!';
	}
}

document.getElementById('p1-up').addEventListener('click', () => {
	movePlayer1('up');
});
document.getElementById('p1-down').addEventListener('click', () => {
	movePlayer1('down');
});
document.getElementById('p1-left').addEventListener('click', () => {
	movePlayer1('left');
});
document.getElementById('p1-right').addEventListener('click', () => {
	movePlayer1('right');
});
document.getElementById('p2-up').addEventListener('click', () => {
	movePlayer2('up');
});
document.getElementById('p2-down').addEventListener('click', () => {
	movePlayer2('down');
});
document.getElementById('p2-left').addEventListener('click', () => {
	movePlayer2('left');
});
document.getElementById('p2-right').addEventListener('click', () => {
	movePlayer2('right');
});