Breakout Clone
How do I make an breakout clone?
What is a breakout clone? How do you make a breakout clone? This script and codes were developed by Edward R Haase on 13 January 2023, Friday.
Breakout Clone - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Breakout Clone</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> div(ng-app='game', ng-controller='gameController') div.row#c div.row {{ball.position | json}} {{lives}} <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.8.0-alpha/matter.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Breakout Clone - Script Codes CSS Codes
html, body { width: 100%; height: 100%; margin: 15px; text-align: center;
}
canvas { display: inline;
}
Breakout Clone - Script Codes JS Codes
var Engine = Matter.Engine, World = Matter.World, Body = Matter.Body, Bodies = Matter.Bodies, Constraint = Matter.Constraint, Events = Matter.Events, Vector = Matter.Vector, MouseConstraint = Matter.MouseConstraint;
var bricks = [];
// create a Matter.js engine
var engine = Engine.create({ enableSleeping: true, render: { // element: document.body, element: document.getElementById("c"), options: { // height: window.innerHeight / 2, // width: window.innerWidth / 2, height: 600, width: 800, background: '#CCCCCC', hasBounds: true, wireframes: true, showAngleIndicator: true } }, world: { gravity: {x: 0, y: 0} }
});
// Todo: Gravity mode? (Paddle needs to apply upward force)
// Todo: Non-rectangle paddle?
// Todo: Spinning paddle?
var numCols = 5;
var brickWidth = engine.render.options.width / numCols;
var brickHMargin = 5;
var leftMargin = (engine.render.options.width - ((brickWidth+(brickHMargin*2))*numCols))/2;
console.log('brickWidth: ', brickWidth);
console.log('leftMargin: ', leftMargin);
for(var row = 0; row < 5; row++) { for(var col = 0; col < numCols; col++ ) { var brick = Bodies.rectangle( leftMargin+((brickWidth+(brickHMargin*2))*col), 100*row, brickWidth, 25, {isStatic: true}) bricks.push(brick); }
}
World.add(engine.world, bricks);
var paddle = Bodies.rectangle(400, 580, 100, 20, { isStatic: true,
});
var ball = Bodies.circle(400, 550, 10, { force: { x: 0, y: -0.01 }, friction: 0.0, frictionAir: 0.0, restitution: 1.0, inertia: 4.0
}, 15);
// ball.force = { x: 0, y: -0.01 };
World.add(engine.world, [paddle, ball]);
Engine.run(engine);
/** Keyboard */
function keyDownHandler(e) { if (e.keyCode == 39) { Body.translate(paddle, {y: 0, x: 17 }); } else if (e.keyCode == 37) { Body.translate(paddle, {y: 0, x: -17 }); }
}
document.addEventListener( "keydown", keyDownHandler, // _.debounce(keyDownHandler, 5, {maxWait: 25}), false
);
/** Mouse */
Events.on(engine, 'mousemove', _.debounce(onMouseMove, 5, {maxWait: 25})
);
function onMouseMove(evt) { Body.translate(paddle, { y: 0, x: evt.mouse.position.x - paddle.position.x });
};
Events.on(engine, 'collisionStart', function(evt) { /* pairs, timestamp, source, name */
})
var lives = 5;
// Let's hack breakout
var game = angular
.module('game', [])
.controller('gameController', function($scope) { $scope.paddle = paddle.position; // $scope.ball = ball.position; $scope.ball = ball; $scope.lives = lives;
})
.run(function($rootScope) { // Wire up MatterJS to trigger Angular digests. Events.on(engine, 'afterTick', function() { $rootScope.$apply(); if(ball.position.y < 0 && ball.velocity.y < 0) { Body.applyForce(ball, {x:0,y:0}, {x:0,y:10} ); } if(ball.position.y > 600) { lives--; } })
})
;
![Breakout Clone - Script Codes](http://shots.codepen.io/ehaase/pen/vLyPBR-512.jpg)
Developer | Edward R Haase |
Username | ehaase |
Uploaded | January 13, 2023 |
Rating | 3 |
Size | 3,170 Kb |
Views | 6,072 |
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 |
Sortable panels with Angular | 2,840 Kb |
Font awesome toggle button with Angular | 2,327 Kb |
AngularJS filtered checklist directive | 2,732 Kb |
AngularJS search filter examples | 2,325 Kb |
Playing with ng-repeat and ng-include | 2,102 Kb |
Maintain calculated relationship between input fields with AngularJS | 2,393 Kb |
Simple angular smart table demo | 2,096 Kb |
Form demo | 3,379 Kb |
Angular Accordian Demo | 2,175 Kb |
AngularJS Inline template with ng-repeat | 1,860 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 |
Brent Burns Tribute Page | Nevada48 | 2,569 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
CSS Org Chart | Appirio-ux | 3,882 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Mario | Takaneichinose | 3,902 Kb |
Table Exercise | Fresco | 9,585 Kb |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
Button Option Group | Honchoman | 1,859 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 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!