Working ASCII Skifree
<!DOCTYPE html>
<html>
<head>
<title>ASCII SkiFree</title>
<style>
body {
text-align: center;
font-family: monospace;
}
#game {
white-space: pre;
}
</style>
</head>
<body>
<h1>ASCII SkiFree</h1>
<div id="game"></div>
<button onclick="startGame()">Start Game</button>
<script>
const gameWidth = 40;
const gameHeight = 20;
let gameBoard = [];
let skierPosition = Math.floor(gameWidth / 2);
let gameOver = false;
function startGame() {
gameBoard = [];
for (let i = 0; i < gameHeight; i++) {
gameBoard.push(new Array(gameWidth).fill(' '));
if (i > 0) {
const obstaclePosition = Math.floor(Math.random() * gameWidth);
gameBoard[i][obstaclePosition] = 'X';
}
}
skierPosition = Math.floor(gameWidth / 2);
gameBoard[0][skierPosition] = '@';
gameOver = false;
renderGame();
gameLoop();
}
function gameLoop() {
if (gameOver) return;
gameBoard.shift();
const newRow = new Array(gameWidth).fill(' ');
newRow[Math.floor(Math.random() * gameWidth)] = 'X';
gameBoard.push(newRow);
gameBoard[0][skierPosition] = ' ';
if (skierPosition > 0 && skierPosition < gameWidth - 1) {
skierPosition += Math.random() > 0.5 ? -1 : 1;
}
if (gameBoard[1][skierPosition] === 'X') {
gameOver = true;
alert('Game Over!');
return;
}
gameBoard[0][skierPosition] = '@';
renderGame();
setTimeout(gameLoop, 500);
}
function renderGame() {
document.getElementById('game').textContent = gameBoard.map(row => row.join('')).join('\n');
}
document.addEventListener('keydown', event => {
if (event.key === 'ArrowLeft') {
skierPosition = Math.max(0, skierPosition - 1);
} else if (event.key === 'ArrowRight') {
skierPosition = Math.min(gameWidth - 1, skierPosition + 1);
}
});
startGame();
</script>
</body>
</html>
Posted Apr 7, 2023, 2:43 AM UTC
00