Firefox Breakout Guide

Developer
Quincy Soeliman
Size
2,576 Kb
Views
32,384
  1. Firefox Breakout Guide Previews
  2. Firefox Breakout Guide HTML Codes
  3. Firefox Breakout Guide CSS Codes
  4. Firefox Breakout Guide JS Codes

How do I make an firefox breakout guide?

What is a firefox breakout guide? How do you make a firefox breakout guide? This script and codes were developed by Quincy Soeliman on 22 July 2022, Friday.

Firefox Breakout Guide Previews
IQ Test

Firefox Breakout Guide - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Firefox Breakout Guide</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="myCanvas" width="480" height="320"></canvas> <script src="js/index.js"></script>
</body>
</html>

Firefox Breakout Guide - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
canvas { display: block; margin: 0 auto; background: #eee;
}

Firefox Breakout Guide - Script Codes JS Codes

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Ball vars.
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
var ballRadius = 10;
// Player vars.
var playerSpeed = 3;
var paddleWidth = 75;
var paddleHeight = 10;
var paddleX = (canvas.width - paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
// Brick vars.
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
// Create bricks array.
var bricks = [];
for (c = 0; c < brickColumnCount; c++) { bricks[c] = []; for (r = 0; r < brickRowCount; r++) { bricks[c][r] = { x: 0, y: 0 }; }
}
function drawBricks() { for (c = 0; c < brickColumnCount; c++) { for (r = 0; r < brickRowCount; r++) { 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 = '#0095DD'; ctx.fill(); ctx.closePath(); } }
}
// Draws a ball.
function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI * 2); ctx.fillStyle = '#0095DD'; ctx.fill(); ctx.closePath();
}
// Draws a paddle.
function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); ctx.fillStyle = '#0095DD'; ctx.fill(); ctx.closePath();
}
// Add event handlers.
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);
function keyDownHandler (e) { if (e.keyCode == 39) { rightPressed = true; } else if (e.keyCode == 37) { leftPressed = true; }
}
function keyUpHandler(e) { if (e.keyCode == 39) { rightPressed = false; } else if (e.keyCode == 37) { leftPressed = false; }
}
// Update function.
function draw() { // Clear canvas. ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw ball. drawBall(); // Draw bricks. drawBricks(); // Draw player. drawPaddle(); // Change direction if ball hits left/right wall. if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { dx = -dx; } // Change direction if ball hits top wall. if (y + dy < ballRadius) { dy = -dy; } else if (y + dy > canvas.height - ballRadius) { if (x > paddleX && x < paddleX + paddleWidth) { dy = -dy; } else { document.location.reload(); } } if (rightPressed) { paddleX += playerSpeed; } else if (leftPressed) { paddleX -= playerSpeed; } // Change position of the ball. x += dx; y += dy;
}
// Keep drawing.
setInterval(draw, 10);
// Rectangle.
// ctx.beginPath();
// ctx.rect(20, 40, 50, 50);
// ctx.fillStyle = '#FF0000';
// ctx.fill();
// ctx.closePath();
// Stroke rectangle.
// ctx.beginPath();
// ctx.rect(160, 10, 100, 40);
// ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
// ctx.stroke();
// ctx.closePath();
Firefox Breakout Guide - Script Codes
Firefox Breakout Guide - Script Codes
Home Page Home
Developer Quincy Soeliman
Username quincysoeliman
Uploaded July 22, 2022
Rating 3
Size 2,576 Kb
Views 32,384
Do you need developer help for Firefox Breakout Guide?

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!

Quincy Soeliman (quincysoeliman) Script Codes
Name
CSS Jenga Loading Animation
Car Animation
Flipping cards
Drawing board
VueJS Multi Select
VueJS Task
A Pen by Quincy Soeliman
Counter
VueJS Names
CSS Rocket Ship
Create amazing SEO content with AI!

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!