Game in canvas
How do I make an game in canvas?
By Mozilla tutorial. What is a game in canvas? How do you make a game in canvas? This script and codes were developed by Khangeldy on 09 November 2022, Wednesday.
Game in canvas - Script Codes HTML Codes
<!DOCTYPE html>
<html class="pen">
<head> <meta charset="UTF-8"> <title>Game in canvas</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="game"></canvas> <script src="js/index.js"></script>
</body>
</html>
Game in canvas - Script Codes CSS Codes
html, body { height: 100%;
}
* { padding: 0; margin: 0;
}
#game { background: #eee;
}
Game in canvas - Script Codes JS Codes
var canvas = document.getElementById('game');
canvas.width = document.querySelector('.pen > body').clientWidth;
canvas.height = document.querySelector('.pen > body').clientHeight;
var ctx = canvas.getContext('2d'), x = canvas.width / 2, y = canvas.height - 30, dx = 2, dy = -2;
// ball
var ballRadius = 10;
// paddle
var paddleHeight = 10, paddleWidth = 75, paddleX = (canvas.width - paddleWidth) / 2, rightPressed = false, leftPressed = false;
// bricks
var bricks = [], brickWidth = 75, brickRowCount = 3, brickColumnCount = 5, brickHeight = 20, brickPadding = 20, brickOffsetTop = 30, brickOffsetLeft = 30;
// score
var score = 0;
// lives
var lives = 3;
for(var c = 0; c < brickColumnCount; c++) { bricks[c] = []; for(var r = 0; r < brickRowCount; r++) { bricks[c][r] = {x: 0, y: 0, status: 1}; }
}
function drawBricks() { for(var c = 0; c < brickColumnCount; c++) { for(var r = 0; r < brickRowCount; r++) { if(bricks[c][r].status == 1) { var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft; var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop; bricks[c][r].x = brickX; bricks[c][r].y = brickY; ctx.beginPath(); ctx.rect(brickX, brickY, brickWidth, brickHeight); ctx.fillStyle = '#0045ae'; ctx.fill(); ctx.closePath(); } } }
}
function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI * 2, false); ctx.fillStyle = '#454545'; ctx.fill(); ctx.closePath();
}
function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); ctx.fillStyle = '#242424'; ctx.fill(); ctx.closePath();
}
function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBricks(); drawBall(); drawPaddle(); drawScore(); drawLives(); collisionDetection(); x += dx; y += dy; if(y + dy < ballRadius) { dy = -dy; } else if(y + dy > canvas.height - ballRadius) { if(x > paddleX && x < paddleX + paddleWidth) { if(y = y - paddleHeight) { dy = -dy; } draw(); } else { lives--; if(!lives) { lives = 3; alert("GAME OVER"); } x = canvas.width / 2; y = canvas.height - 30; dy = -2; dx = 2; score = 0; for(c = 0; c < brickColumnCount; c++) { for(r = 0; r < brickRowCount; r++) { bricks[c][r].status = 1; } } draw(); } requestAnimationFram(draw); } if(x + dx < ballRadius || x + dx > canvas.width - ballRadius) { dx = -dx; } if(rightPressed && paddleX < canvas.width - paddleWidth) { paddleX += 7; } else if(leftPressed && paddleX > 0) { paddleX -= 7; } requestAnimationFrame(draw);
}
function keyDownHandler(event) { if(event.keyCode == 39) { rightPressed = true; } else if(event.keyCode == 37) { leftPressed = true; }
}
function keyUpHandler(event) { if(event.keyCode == 39) { rightPressed = false; } else if(event.keyCode == 37) { leftPressed = false; }
}
function mouseMoveHandler(event) { var relativeX = event.x - canvas.offsetLeft; if(relativeX > 0 && relativeX < canvas.width) { paddleX = relativeX - paddleWidth / 2; }
}
function collisionDetection() { for(var c = 0; c < brickColumnCount; c++) { for(var r = 0; r < brickRowCount; r++) { var b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) { dy = -dy; b.status = 0; score++; if(score == brickRowCount * brickColumnCount) { alert('You win'); draw(); } } } } }
}
function drawScore() { ctx.font = '15px Serif'; ctx.fillStyle = '#343434'; ctx.fillText('Score:' + score, 8, 20);
}
function drawLives() { ctx.font = '15px Serif'; ctx.fillStyle = '#343434'; ctx.fillText('Lives: ' + lives, canvas.width - 65, 20);
}
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);
document.addEventListener('mousemove', mouseMoveHandler, false);
draw();
Developer | Khangeldy |
Username | Khangeldy |
Uploaded | November 09, 2022 |
Rating | 3 |
Size | 2,977 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Freecodecamp3 | 0 Kb |
Detect Facebook app in mobile devices | 1,819 Kb |
A Pen by Khangeldy | 2,352 Kb |
Css grid test | 1,683 Kb |
Water shader implement in three.js | 4,300 Kb |
Shadertoy.com test | 2,371 Kb |
Freecodecamp 1 | 0 Kb |
Trello canvas | 2,539 Kb |
Shadertoy in three.js | 4,402 Kb |
Loader | 1,559 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
SCSS Social Icons Flat | Mattsince87 | 3,482 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Toggling Divs with jQuery | Yying6 | 1,967 Kb |
Hello People | Danburrows | 2,365 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
Border image | JohnRiordan | 2,120 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!