Exploring Pixel Art Games: A Journey Through Nostalgia and Code
Introduction
In the digital realm where nostalgia meets innovation, pixel art games stand as timeless treasures. Today, we'll delve into three captivating pixel art games that bring back the charm of retro gaming. Not only will we explore the essence of these games, but we'll also uncover the code that brings them to life, allowing you to embark on your own pixelated adventures.
1. Pixel Bird Game
The Pixel Bird Game is a delightful homage to classic arcade games, challenging players to guide a bird through a series of obstacles. With its charming pixel aesthetic, this game offers a simple yet addictive experience.
Game Description
- Objective: Help the bird navigate through gaps in pipes without colliding with them.
- Controls: Click or tap to make the bird jump.
- Features: Retro pixel art style, increasing difficulty, and engaging gameplay.
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pixel Bird Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
#game-container {
width: 400px;
height: 600px;
background-color: #fff;
border: 2px solid #333;
position: relative;
overflow: hidden;
margin: 20px auto;
}
#bird {
width: 40px;
height: 30px;
background-color: #f39c12;
position: absolute;
top: 200px;
left: 100px;
border-radius: 5px;
}
.pipe {
width: 60px;
background-color: #27ae60;
position: absolute;
border-radius: 5px;
}
#score-display {
font-size: 24px;
font-family: Arial, sans-serif;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Pixel Bird Game</h1>
<p>Click to make the bird jump and avoid obstacles. Enjoy this pixel-style game!</p>
<div id="game-container">
<div id="bird"></div>
</div>
<div id="score-display">Score: 0</div>
<script>
const bird = document.getElementById('bird');
const gameContainer = document.getElementById('game-container');
const scoreDisplay = document.getElementById('score-display');
let birdY = 200;
let birdVelocity = 0;
let gravity = 1;
let score = 0;
let gameActive = true;
let pipes = [];
let pipeInterval;
function createPipe() {
const gapHeight = 150;
const pipeX = 400;
const topHeight = Math.floor(Math.random() * 200) + 50;
const bottomHeight = 600 - gapHeight - topHeight;
const topPipe = document.createElement('div');
topPipe.classList.add('pipe');
topPipe.style.height = topHeight + 'px';
topPipe.style.bottom = (600 - topHeight) + 'px';
topPipe.style.left = pipeX + 'px';
const bottomPipe = document.createElement('div');
bottomPipe.classList.add('pipe');
bottomPipe.style.height = bottomHeight + 'px';
bottomPipe.style.top = (topHeight + gapHeight) + 'px';
bottomPipe.style.left = pipeX + 'px';
gameContainer.appendChild(topPipe);
gameContainer.appendChild(bottomPipe);
pipes.push({
top: topPipe,
bottom: bottomPipe,
x: pipeX,
passed: false
});
}
function movePipes() {
pipes.forEach(pipe => {
pipe.x -= 3;
pipe.top.style.left = pipe.x + 'px';
pipe.bottom.style.left = pipe.x + 'px';
if (pipe.x === 100 && !pipe.passed) {
score++;
scoreDisplay.textContent = 'Score: ' + score;
pipe.passed = true;
}
if (pipe.x < -60) {
gameContainer.removeChild(pipe.top);
gameContainer.removeChild(pipe.bottom);
pipes = pipes.filter(p => p !== pipe);
}
if (checkCollision(pipe)) {
gameActive = false;
clearTimeout(pipeInterval);
}
});
}
function checkCollision(pipe) {
const birdRect = bird.getBoundingClientRect();
const topPipeRect = pipe.top.getBoundingClientRect();
const bottomPipeRect = pipe.bottom.getBoundingClientRect();
return (
birdRect.right > topPipeRect.left &&
birdRect.left < topPipeRect.right &&
(birdRect.bottom > topPipeRect.top ||
birdRect.top < bottomPipeRect.bottom)
);
}
function jump() {
birdVelocity = -10;
}
gameContainer.addEventListener('click', jump);
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') jump();
});
function gameLoop() {
if (!gameActive) return;
birdVelocity += gravity;
birdY += birdVelocity;
bird.style.top = birdY + 'px';
if (birdY < 0 || birdY > 560) {
gameActive = false;
}
movePipes();
requestAnimationFrame(gameLoop);
}
pipeInterval = setInterval(createPipe, 2000);
gameLoop();
</script>
</body>
</html>2. 2048 Game
The 2048 Game is a captivating puzzle that challenges your strategic thinking. Merge tiles with the same number to reach the elusive 2048 tile.
Game Description
- Objective: Combine tiles with the same number to reach the 2048 tile.
- Controls: Use arrow keys to move tiles in different directions.
- Features: Simple yet addictive gameplay, increasing difficulty, and a satisfying sense of achievement.
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2048 Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
#game-container {
width: 400px;
height: 400px;
background-color: #bbada0;
border-radius: 6px;
padding: 15px;
position: relative;
margin: 20px auto;
}
.grid-cell {
width: 90px;
height: 90px;
background-color: #cdc1b4;
position: absolute;
border-radius: 3px;
}
.tile {
width: 90px;
height: 90px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-weight: bold;
color: #f9f6f2;
border-radius: 3px;
transition: all 0.1s ease-in-out;
}
.tile-2 {
background-color: #eee4da;
}
.tile-4 {
background-color: #ede0c8;
}
.tile-8 {
background-color: #f2b179;
}
.tile-16 {
background-color: #f59563;
}
.tile-32 {
background-color: #f67c5f;
}
.tile-64 {
background-color: #f65e3b;
}
.tile-128 {
background-color: #edcf72;
}
.tile-256 {
background-color: #edcc61;
}
.tile-512 {
background-color: #edc850;
}
.tile-1024 {
background-color: #edc53f;
}
.tile-2048 {
background-color: #edc22e;
}
#score-display {
font-size: 24px;
font-family: Arial, sans-serif;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>2048 Game</h1>
<p>Use arrow keys to combine tiles with the same number. Reach the 2048 tile to win!</p>
<div id="game-container"></div>
<div id="score-display">Score: 0</div>
<script>
const gameContainer = document.getElementById('game-container');
const scoreDisplay = document.getElementById('score-display');
const gridSize = 4;
let tiles = [];
let score = 0;
// Initialize game
function initGame() {
// Create grid
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
const gridCell = document.createElement('div');
gridCell.classList.add('grid-cell');
gridCell.style.top = i * 105 + 'px';
gridCell.style.left = j * 105 + 'px';
gameContainer.appendChild(gridCell);
}
}
// Initialize tiles
tiles = [];
for (let i = 0; i < gridSize; i++) {
tiles[i] = [];
for (let j = 0; j < gridSize; j++) {
tiles[i][j] = null;
}
}
// Add two random tiles
addRandomTile();
addRandomTile();
}
// Add random tile
function addRandomTile() {
const emptyCells = [];
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
if (!tiles[i][j]) {
emptyCells.push({ i, j });
}
}
}
if (emptyCells.length > 0) {
const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
const value = Math.random() < 0.9 ? 2 : 4;
tiles[randomCell.i][randomCell.j] = value;
renderTile(randomCell.i, randomCell.j, value);
}
}
// Render tile
function renderTile(i, j, value) {
const tile = document.createElement('div');
tile.classList.add('tile', `tile-${value}`);
tile.textContent = value;
tile.style.top = i * 105 + 'px';
tile.style.left = j * 105 + 'px';
gameContainer.appendChild(tile);
}
// Move tiles
function moveTiles(direction) {
let moved = false;
let merged = [];
for (let i = 0; i < gridSize; i++) {
merged[i] = [];
for (let j = 0; j < gridSize; j++) {
merged[i][j] = false;
}
}
switch (direction) {
case 'up':
for (let j = 0; j < gridSize; j++) {
for (let i = 1; i < gridSize; i++) {
if (tiles[i][j]) {
let targetRow = i - 1;
while (targetRow >= 0 && !tiles[targetRow][j]) {
targetRow--;
}
if (targetRow >= 0 && tiles[targetRow][j] === tiles[i][j] && !merged[targetRow][j]) {
tiles[targetRow][j] *= 2;
score += tiles[targetRow][j];
merged[targetRow][j] = true;
tiles[i][j] = null;
moved = true;
} else if (targetRow + 1 !== i) {
tiles[targetRow + 1][j] = tiles[i][j];
tiles[i][j] = null;
moved = true;
}
}
}
}
break;
case 'down':
for (let j = 0; j < gridSize; j++) {
for (let i = gridSize - 2; i >= 0; i--) {
if (tiles[i][j]) {
let targetRow = i + 1;
while (targetRow < gridSize && !tiles[targetRow][j]) {
targetRow++;
}
if (targetRow < gridSize && tiles[targetRow][j] === tiles[i][j] && !merged[targetRow][j]) {
tiles[targetRow][j] *= 2;
score += tiles[targetRow][j];
merged[targetRow][j] = true;
tiles[i][j] = null;
moved = true;
} else if (targetRow - 1 !== i) {
tiles[targetRow - 1][j] = tiles[i][j];
tiles[i][j] = null;
moved = true;
}
}
}
}
break;
case 'left':
for (let i = 0; i < gridSize; i++) {
for (let j = 1; j < gridSize; j++) {
if (tiles[i][j]) {
let targetCol = j - 1;
while (targetCol >= 0 && !tiles[i][targetCol]) {
targetCol--;
}
if (targetCol >= 0 && tiles[i][targetCol] === tiles[i][j] && !merged[i][targetCol]) {
tiles[i][targetCol] *= 2;
score += tiles[i][targetCol];
merged[i][targetCol] = true;
tiles[i][j] = null;
moved = true;
} else if (targetCol + 1 !== j) {
tiles[i][targetCol + 1] = tiles[i][j];
tiles[i][j] = null;
moved = true;
}
}
}
}
break;
case 'right':
for (let i = 0; i < gridSize; i++) {
for (let j = gridSize - 2; j >= 0; j--) {
if (tiles[i][j]) {
let targetCol = j + 1;
while (targetCol < gridSize && !tiles[i][targetCol]) {
targetCol++;
}
if (targetCol < gridSize && tiles[i][targetCol] === tiles[i][j] && !merged[i][targetCol]) {
tiles[i][targetCol] *= 2;
score += tiles[i][targetCol];
merged[i][targetCol] = true;
tiles[i][j] = null;
moved = true;
} else if (targetCol - 1 !== j) {
tiles[i][targetCol - 1] = tiles[i][j];
tiles[i][j] = null;
moved = true;
}
}
}
}
break;
}
if (moved) {
updateBoard();
addRandomTile();
scoreDisplay.textContent = 'Score: ' + score;
checkWin();
}
}
// Update game board
function updateBoard() {
// Clear game board
const tilesElements = document.querySelectorAll('.tile');
tilesElements.forEach(tile => {
tile.remove();
});
// Re-render tiles
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
if (tiles[i][j]) {
renderTile(i, j, tiles[i][j]);
}
}
}
}
// Check for win
function checkWin() {
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
if (tiles[i][j] === 2048) {
alert('Congratulations! You won with a score of ' + score + '!');
initGame();
return;
}
}
}
}
// Keyboard event listener
document.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowUp':
moveTiles('up');
break;
case 'ArrowDown':
moveTiles('down');
break;
case 'ArrowLeft':
moveTiles('left');
break;
case 'ArrowRight':
moveTiles('right');
break;
}
});
// Initialize game
initGame();
</script>
</body>
</html>3. Flappy White Block Game
The Flappy White Block Game is a simple yet addictive game where players navigate a white block through a series of obstacles.
Game Description
- Objective: Guide the white block through gaps in obstacles without colliding with them.
- Controls: Click or tap to make the block jump.
- Features: Simple controls, increasing difficulty, and a focus on reflexes and timing.
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flappy White Block Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
#game-container {
width: 300px;
height: 500px;
background-color: #fff;
border: 2px solid #333;
position: relative;
overflow: hidden;
margin: 20px auto;
}
#block {
width: 30px;
height: 30px;
background-color: #fff;
position: absolute;
top: 200px;
left: 50px;
}
.obstacle {
width: 50px;
background-color: #333;
position: absolute;
border-radius: 5px;
}
#score-display {
font-size: 24px;
font-family: Arial, sans-serif;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Flappy White Block Game</h1>
<p>Click to make the white block jump and avoid obstacles. Enjoy this simple game!</p>
<div id="game-container">
<div id="block"></div>
</div>
<div id="score-display">Score: 0</div>
<script>
const block = document.getElementById('block');
const gameContainer = document.getElementById('game-container');
const scoreDisplay = document.getElementById('score-display');
let blockY = 200;
let blockVelocity = 0;
let gravity = 1;
let score = 0;
let gameActive = true;
let obstacles = [];
let obstacleInterval;
function createObstacle() {
const gapHeight = 100;
const obstacleX = 300;
const topHeight = Math.floor(Math.random() * 200) + 50;
const bottomHeight = 500 - gapHeight - topHeight;
const topObstacle = document.createElement('div');
topObstacle.classList.add('obstacle');
topObstacle.style.height = topHeight + 'px';
topObstacle.style.bottom = (500 - topHeight) + 'px';
topObstacle.style.left = obstacleX + 'px';
const bottomObstacle = document.createElement('div');
bottomObstacle.classList.add('obstacle');
bottomObstacle.style.height = bottomHeight + 'px';
bottomObstacle.style.top = (topHeight + gapHeight) + 'px';
bottomObstacle.style.left = obstacleX + 'px';
gameContainer.appendChild(topObstacle);
gameContainer.appendChild(bottomObstacle);
obstacles.push({
top: topObstacle,
bottom: bottomObstacle,
x: obstacleX,
passed: false
});
}
function moveObstacles() {
obstacles.forEach(obstacle => {
obstacle.x -= 3;
obstacle.top.style.left = obstacle.x + 'px';
obstacle.bottom.style.left = obstacle.x + 'px';
if (obstacle.x === 100 && !obstacle.passed) {
score++;
scoreDisplay.textContent = 'Score: ' + score;
obstacle.passed = true;
}
if (obstacle.x < -50) {
gameContainer.removeChild(obstacle.top);
gameContainer.removeChild(obstacle.bottom);
obstacles = obstacles.filter(o => o !== obstacle);
}
if (checkCollision(obstacle)) {
gameActive = false;
clearTimeout(obstacleInterval);
}
});
}
function checkCollision(obstacle) {
const blockRect = block.getBoundingClientRect();
const topObstacleRect = obstacle.top.getBoundingClientRect();
const bottomObstacleRect = obstacle.bottom.getBoundingClientRect();
return (
blockRect.right > topObstacleRect.left &&
blockRect.left < topObstacleRect.right &&
(blockRect.bottom > topObstacleRect.top ||
blockRect.top < bottomObstacleRect.bottom)
);
}
function jump() {
blockVelocity = -10;
}
gameContainer.addEventListener('click', jump);
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') jump();
});
function gameLoop() {
if (!gameActive) return;
blockVelocity += gravity;
blockY += blockVelocity;
block.style.top = blockY + 'px';
if (blockY < 0 || blockY > 460) {
gameActive = false;
}
moveObstacles();
requestAnimationFrame(gameLoop);
}
obstacleInterval = setInterval(createObstacle, 2000);
gameLoop();
</script>
</body>
</html>Conclusion
Pixel art games offer a delightful journey into the world of retro gaming, combining simple mechanics with addictive gameplay. The Pixel Bird Game, 2048 Game, and Flappy White Block Game each bring their unique charm and challenge to players. By exploring the source code provided, you can not only enjoy these games but also gain insights into the fundamentals of game development. Whether you're a nostalgic gamer or an aspiring developer, these pixel art games provide a fantastic starting point for your digital adventures. Feel free to copy the code, run it in your local environment, and experience the joy of these classic games firsthand!
English