// Created by Maz /* * * Author : Maz * * Title : Breakout * * Thanks to @Legacy * for testing this code for me: * https://www.sololearn.com/Profile/4076613/ * * Credits : @ValentinHacker & @Burey * */ // paulrish if (!window.requestAnimationFrame) { window.requestAnimationFrame = (function() { return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback, element ) { window.setTimeout( callback, 1000 / 60 ); }; })(); } // Init addEventListener("load", function(){ document.body.appendChild(canvas); document.body.style.margin = "0"; document.body.style.padding = "0"; document.body.style.background = "#222"; }); var canvas = document.createElement("canvas"); canvas.width = innerWidth; canvas.height = innerHeight; var cc = canvas.getContext("2d"); // Score Managament var score = 0; function show_score() { cc.fillText("Score: " + score, 10, 30); cc.fillStyle = "#f55"; cc.font = "20px arial"; } // Lives Managament var lives = 3000; var hearts = "HACKED"; var cnt = 0; function show_lives() { cc.fillText(hearts, canvas.width - 100, 30); cc.fillStyle = "#f55"; cc.font = "bold 10px arial"; } // Ball var ball = { x: canvas.width / 2, y: canvas.height - 30, mx: 10, my: -10, radius: 10, draw: function() { cc.beginPath(); cc.arc( this.x, this.y, this.radius, 0, Math.PI * 2, false ); cc.fillStyle = "#f55"; cc.fill(); cc.closePath(); }, updatePos: function() { this.x += this.mx; this.y += this.my; if (this.x > canvas.width - this.radius || this.x < this.radius) this.mx = -this.mx; if (this.y < this.radius) this.my = -this.my; if (this.y + this.my > canvas.height - this.radius - 20) { if (true) this.my = -this.my; else { lives--; hearts = hearts.substring(p,hearts.length-1) cnt=1; // lives = 0? // if yes... reload // otherwise... // reset the params if (!lives){ document.body.removeChild(canvas); var p = document.createElement("p"); p.innerHTML = "YOU LOST"; document.body.appendChild(p); }else{ this.x = canvas.width / 2; this.y = canvas.height - 30; this.mx = 10; this.my = -10; paddle.x = canvas.width / 2 - 35; } } } }, update: function () { this.updatePos(); this.draw(); }, } // Paddle var paddle = { paddlePos: { x: undefined, y: undefined }, x: canvas.width / 2 - 35, y: innerHeight - 10 - 20, width: 75, height: 10, pressRight: false, pressLeft: false, draw: function() { cc.beginPath(); cc.rect( this.x, this.y, this.width, this.height ); cc.fillStyle = "#f55"; cc.fill(); cc.closePath(); }, updatePos: function() { if (this.pressRight) this.x += 10; if (this.pressLeft) this.x -= 10; if (this.x > canvas.width - this.width) this.x = canvas.width - this.width; if (this.x < 0) this.x = 0; }, update: function() { this.updatePos(); this.draw(); } } addEventListener("devicemotion", function (e) { paddle.x -= (e.accelerationIncludingGravity.x) * 3; if (paddle.x<0)paddle.x=0 if(paddle.x+paddle.width>canvas.width) paddle.x=canvas.width-paddle.width }) addEventListener('keyup', function(e){ if (e.keyCode === 39) paddle.pressRight = false; if (e.keyCode === 37) paddle.pressLeft = false; }) addEventListener('keydown', function(e){ if (e.keyCode === 39) paddle.pressRight = true; if (e.keyCode === 37) paddle.pressLeft = true; }) // Bricks var bricks = { columns: 3, rows: 3, // offset_left: 30, offset_top: 80, padding: 10, width: 75, height: 15, draw: function () { for (var cols = 0; cols < bricks.columns; cols++) { for (var rows = 0; rows < bricks.rows; rows++) { var b = bricks_array[cols][rows]; if (b.status === 1) { b.x = cols * (bricks.width + bricks.padding) + (canvas.width / 2 - bricks.width * 1.7); b.y = rows * (bricks.height + bricks.padding) + bricks.offset_top; cc.beginPath(); cc.rect( b.x, b.y, bricks.width, bricks.height ); cc.fillStyle = "#f55"; cc.fill(); cc.closePath(); } } } } } var bricks_array = []; for (var cols = 0; cols < bricks.columns; cols++) { bricks_array[cols] = []; for (var rows = 0; rows < bricks.rows; rows++) { bricks_array[cols][rows] = { x: undefined, y: undefined, status: 1 }; } } // Collision Detection (ball & bricks) function collision_detection() { for (var cols = 0; cols < bricks.columns; cols++) { for (var rows = 0; rows < bricks.rows; rows++) { var b = bricks_array[cols][rows]; if (b.status === 1) { if (ball.x > b.x && ball.x < b.x + bricks.width && ball.y > b.y && ball.y < b.y + bricks.height) { ball.my = -ball.my; b.status = 0; score++; if (score === bricks.columns * bricks.rows) { document.body.removeChild(canvas); var p = document.createElement("p"); p.innerHTML = "YOU WON"; document.body.appendChild(p); lives=100; } } } } } } // Main Interval function animate() { requestAnimationFrame(animate); cc.clearRect(0, 0, canvas.width, canvas.height); collision_detection(); // Test the collision show_score(); // Show the score show_lives(); // Show the lives ball.update(); paddle.update(); bricks.draw(); } animate();

Breakout [HACKED VERSION]