Create Arkanoid Game: HTML/JS
write code for the game Arkanoid (Breakout) using html and JS in color, in full so I can play immediately without fixnig anything
To create a fully functional Arkanoid (Breakout) game using HTML and JavaScript, we'll need several components. The game involves a paddle, a ball, bricks, and the logic for collision detection, game score, and levels. Let's break down the necessary components and then provide the complete code:
- index.html: This file will contain the basic HTML structure and link our JavaScript and CSS files.
- styles.css: This file will contain the CSS styles to make our game look more appealing.
- game.js: This is the main JavaScript file where we will write the game logic, including handling user input, drawing the game elements, and the game's mechanics.
Project Files and Code
index.html
html1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Arkanoid Game</title> 7 <link rel="stylesheet" href="styles.css"> 8</head> 9<body> 10 <canvas id="gameCanvas"></canvas> 11 <script src="game.js"></script> 12</body> 13</html>
styles.css
css1body { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 height: 100vh; 6 margin: 0; 7 background-color: #f0f0f0; 8} 9 10canvas { 11 border: 1px solid #000; 12 background-color: #eee; 13}
game.js
javascript1const canvas = document.getElementById('gameCanvas'); 2const ctx = canvas.getContext('2d'); 3 4canvas.width = 800; 5canvas.height = 600; 6 7let ballRadius = 10; 8let x = canvas.width / 2; 9let y = canvas.height - 30; 10let dx = 2; 11let dy = -2; 12 13let paddleHeight = 10; 14let paddleWidth = 75; 15let paddleX = (canvas.width - paddleWidth) / 2; 16 17let rightPressed = false; 18let leftPressed = false; 19 20let brickRowCount = 5; 21let brickColumnCount = 3; 22let brickWidth = 75; 23let brickHeight = 20; 24let brickPadding = 10; 25let brickOffsetTop = 30; 26let brickOffsetLeft = 30; 27 28let score = 0; 29 30let bricks = []; 31for (let c = 0; c < brickColumnCount; c++) { 32 bricks[c] = []; 33 for (let r = 0; r < brickRowCount; r++) { 34 bricks[c][r] = { x: 0, y: 0, status: 1 }; 35 } 36} 37 38document.addEventListener('keydown', keyDownHandler, false); 39document.addEventListener('keyup', keyUpHandler, false); 40 41function keyDownHandler(e) { 42 if (e.key === 'Right' || e.key === 'ArrowRight') { 43 rightPressed = true; 44 } else if (e.key === 'Left' || e.key === 'ArrowLeft') { 45 leftPressed = true; 46 } 47} 48 49function keyUpHandler(e) { 50 if (e.key === 'Right' || e.key === 'ArrowRight') { 51 rightPressed = false; 52 } else if (e.key === 'Left' || e.key === 'ArrowLeft') { 53 leftPressed = false; 54 } 55} 56 57function collisionDetection() { 58 for (let c = 0; c < brickColumnCount; c++) { 59 for (let r = 0; r < brickRowCount; r++) { 60 let b = bricks[c][r]; 61 if (b.status === 1) { 62 if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) { 63 dy = -dy; 64 b.status = 0; 65 score++; 66 if (score === brickRowCount * brickColumnCount) { 67 alert('Congratulations! You win!'); 68 document.location.reload(); 69 } 70 } 71 } 72 } 73 } 74} 75 76function drawBall() { 77 ctx.beginPath(); 78 ctx.arc(x, y, ballRadius, 0, Math.PI * 2); 79 ctx.fillStyle = '#0095DD'; 80 ctx.fill(); 81 ctx.closePath(); 82} 83 84function drawPaddle() { 85 ctx.beginPath(); 86 ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); 87 ctx.fillStyle = '#0095DD'; 88 ctx.fill(); 89 ctx.closePath(); 90} 91 92function drawBricks() { 93 for (let c = 0; c < brickColumnCount; c++) { 94 for (let r = 0; r < brickRowCount; r++) { 95 if (bricks[c][r].status === 1) { 96 let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft; 97 let brick
Y = (r * (brickHeight + brickPadding)) + brickOffsetTop; bricks[c][r].x = brickX; bricks[c][r].y = brickY; ctx.beginPath(); ctx.rect(brickX, brickY, brickWidth, brickHeight); ctx.fillStyle = '#0095DD'; ctx.fill(); ctx.closePath(); } } } }
function drawScore() { ctx.font = '16px Arial'; ctx.fillStyle = '#0095DD'; ctx.fillText('Score: ' + score, 8, 20); }
function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBricks(); drawBall(); drawPaddle(); drawScore(); collisionDetection();
1if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { 2 dx = -dx; 3} 4if (y + dy < ballRadius) { 5 dy = -dy; 6} else if (y + dy > canvas.height - ballRadius) { 7 if (x > paddleX && x < paddleX + paddleWidth) { 8 dy = -dy; 9 } else { 10 alert('GAME OVER'); 11 document.location.reload(); 12 } 13} 14 15if (rightPressed && paddleX < canvas.width - paddleWidth) { 16 paddleX += 7; 17} else if (leftPressed && paddleX > 0) { 18 paddleX -= 7; 19} 20 21x += dx; 22y += dy; 23requestAnimationFrame(draw);
}
draw();
1 2To play the game, simply place these three files (`index.html`, `styles.css`, and `game.js`) in the same directory and open `index.html` in a web browser. The game should start immediately, and you can play Arkanoid with keyboard arrow keys to move the paddle.
Update the code to display text on the screen instead of the alerts. They are locking up the system and can't close properly.
To replace the alert dialogs with on-screen text notifications in the Arkanoid game, we need to modify the JavaScript file (game.js). Instead of using alert for game over and win messages, we'll draw the text directly onto the canvas. This approach will provide a smoother user experience.
Updated game.js
javascript1const canvas = document.getElementById('gameCanvas'); 2const ctx = canvas.getContext('2d'); 3 4canvas.width = 800; 5canvas.height = 600; 6 7let ballRadius = 10; 8let x = canvas.width / 2; 9let y = canvas.height - 30; 10let dx = 2; 11let dy = -2; 12 13let paddleHeight = 10; 14let paddleWidth = 75; 15let paddleX = (canvas.width - paddleWidth) / 2; 16 17let rightPressed = false; 18let leftPressed = false; 19 20let brickRowCount = 5; 21let brickColumnCount = 3; 22let brickWidth = 75; 23let brickHeight = 20; 24let brickPadding = 10; 25let brickOffsetTop = 30; 26let brickOffsetLeft = 30; 27 28let score = 0; 29let isGameOver = false; 30let isGameWon = false; 31 32let bricks = []; 33for (let c = 0; c < brickColumnCount; c++) { 34 bricks[c] = []; 35 for (let r = 0; r < brickRowCount; r++) { 36 bricks[c][r] = { x: 0, y: 0, status: 1 }; 37 } 38} 39 40document.addEventListener('keydown', keyDownHandler, false); 41document.addEventListener('keyup', keyUpHandler, false); 42 43function keyDownHandler(e) { 44 if (e.key === 'Right' || e.key === 'ArrowRight') { 45 rightPressed = true; 46 } else if (e.key === 'Left' || e.key === 'ArrowLeft') { 47 leftPressed = true; 48 } 49} 50 51function keyUpHandler(e) { 52 if (e.key === 'Right' || e.key === 'ArrowRight') { 53 rightPressed = false; 54 } else if (e.key === 'Left' || e.key === 'ArrowLeft') { 55 leftPressed = false; 56 } 57} 58 59function collisionDetection() { 60 for (let c = 0; c < brickColumnCount; c++) { 61 for (let r = 0; r < brickRowCount; r++) { 62 let b = bricks[c][r]; 63 if (b.status === 1) { 64 if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) { 65 dy = -dy; 66 b.status = 0; 67 score++; 68 if (score === brickRowCount * brickColumnCount) { 69 isGameWon = true; 70 } 71 } 72 } 73 } 74 } 75} 76 77function drawBall() { 78 ctx.beginPath(); 79 ctx.arc(x, y, ballRadius, 0, Math.PI * 2); 80 ctx.fillStyle = '#0095DD'; 81 ctx.fill(); 82 ctx.closePath(); 83} 84 85function drawPaddle() { 86 ctx.beginPath(); 87 ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); 88 ctx.fillStyle = '#0095DD'; 89 ctx.fill(); 90 ctx.closePath(); 91} 92 93function drawBricks() { 94 for (let c = 0; c < brickColumnCount; c++) { 95 for (let r = 0; r < brickRowCount; r++) { 96 if (bricks[c][r].status === 1) { 97 let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft; 98 let brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop; 99 bricks[c][r].x = brickX; 100 bricks[c][r].y = brickY; 101 ctx.beginPath(); 102 ctx.rect(brickX, brickY, brickWidth, brickHeight); 103 ctx.fillStyle = '#0095DD'; 104 ctx.fill(); 105 ctx.closePath(); 106 } 107 } 108 } 109} 110 111function drawScore() { 112 ctx.font = '16px Arial'; 113 ctx.fillStyle = '#0095DD'; 114 ctx.fillText('Score: ' + score, 8, 20); 115} 116 117function drawMessage(message) { 118 ctx.font = '48px Arial'; 119 ctx.fillStyle = '#0095DD'; 120 ctx.fillText(message, canvas.width / 4, canvas.height / 2); 121} 122 123function draw() { 124 ctx.clearRect(0, 0, canvas.width, canvas.height); 125 drawBricks(); 126 drawBall(); 127 drawPaddle(); 128 drawScore(); 129 130 if (isGameWon) { 131 drawMessage("Congratulations! You win!"); 132 return; 133 } 134 135 if (isGameOver) { 136 drawMessage("GAME OVER"); 137 return; 138 } 139 140 collisionDetection(); 141 142 if (x + dx >
canvas.width - ballRadius || x + dx < ballRadius) { dx = -dx; } if (y + dy < ballRadius) { dy = -dy; } else if (y + dy > canvas.height - ballRadius) { if (x > paddleX && x < paddleX + paddleWidth) { dy = -dy; } else { isGameOver = true; return; } }
1if (rightPressed && paddleX < canvas.width - paddleWidth) { 2 paddleX += 7; 3} else if (leftPressed && paddleX > 0) { 4 paddleX -= 7; 5} 6 7x += dx; 8y += dy; 9requestAnimationFrame(draw);
}
draw();
1 2This updated `game.js` code replaces the use of `alert` with drawing text directly onto the canvas. When the game is over or the player wins, it will display a message in the middle of the canvas and stop the game loop. To restart the game, the player will need to reload the page.
write an IIFE
An Immediately Invoked Function Expression (IIFE) in JavaScript is a design pattern used to execute a function immediately as it is defined. It is a common approach to prevent polluting the global namespace, allowing for a more modular and maintainable code structure. Here's a basic example of an IIFE:
javascript1(function() { 2 // Code here is executed immediately 3 console.log("This is an Immediately Invoked Function Expression (IIFE)"); 4})();
In this example, the function is defined and then immediately invoked. The parentheses around the function turn the function declaration into a function expression, and the following parentheses () cause it to be immediately executed.