const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const brickRowCount = 3; const brickColumnCount = 5; const brickWidth = 75; const brickHeight = 20; const brickPadding = 10; const brickOffsetTop = 30; const brickOffsetLeft = 30; let score = 0; let lives = 3; let level = 1; let powerUp = false; let powerUpX; let powerUpY; let powerUpSpeed = 3; let powerUpType; let powerUpWidth = 50; let powerUpHeight = 20; let powerUpColor = '#00FF00'; let bricks = []; for(let c=0; c b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) { dy = -dy; b.status = 0; score++; if(score == brickRowCount*brickColumnCount) { if(level == 3) { alert("YOU WIN, CONGRATULATIONS!"); document.location.reload(); } else { level++; brickRowCount++; brickColumnCount++; powerUp = false; powerUpX = undefined; powerUpY = undefined; powerUpType = undefined; powerUpWidth = 50; powerUpHeight = 20; powerUpColor = '#00FF00'; score = 0; dx += 2; dy = -dy; x = canvas.width/2; y = canvas.height-30; paddleX = (canvas.width-paddleWidth)/2; drawBricks(); drawPaddle(); drawBall(); drawScore(); drawLives(); drawLevel(); setTimeout(function() { powerUp = true; powerUpType = Math.floor(Math.random() * 3) + 1; powerUpX = Math.floor(Math.random() * (canvas.width - powerUpWidth)); powerUpY = 0; }, 3000); } } else { if(powerUp) { if(Math.random() < 0.5) { powerUp = false; powerUpX = undefined; powerUpY = undefined; powerUpType = undefined; powerUpWidth = 50; powerUpHeight = 20; powerUpColor = '#00FF00'; } else { powerUpX = b.x; powerUpY = b.y; powerUp = true; powerUpType = Math.floor(Math.random() * 3) + 1; } } } } } } } } function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function drawBricks() { for(let c=0; c canvas.height) { powerUp = false; powerUpX = undefined; powerUpY = undefined; powerUpType = undefined; powerUpWidth = 50; powerUpHeight = 20; powerUpColor = '#00FF00'; } } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBricks(); drawBall(); drawPaddle(); drawScore(); drawLives(); drawLevel(); collisionDetection(); movePowerUp(); if(powerUp) { drawPowerUp(); if(powerUpType == 1) { powerUpColor = '#FFA500'; powerUpWidth = 100; powerUpHeight = 10; if(x > powerUpX && x < powerUpX + powerUpWidth && y > powerUpY && y < powerUpY + powerUpHeight) { powerUp = false; powerUpX = undefined; powerUpY = undefined; powerUpType = undefined; powerUpWidth = 50; powerUpHeight = 20; powerUpColor = '#00FF00'; paddleWidth = 100; } } else if(powerUpType == 2) { powerUpColor = '#FF0000'; if(x > powerUpX && x < powerUpX + powerUpWidth && y > powerUpY && y < powerUpY + powerUpHeight) { powerUp = false; powerUpX = undefined; powerUpY = undefined; powerUpType = undefined; powerUpWidth = 50; powerUpHeight = 20; powerUpColor = '#00FF00'; lives++; } } else if(powerUpType == 3) { powerUpColor = '#FFFF00'; if(x > powerUpX && x < powerUpX + powerUpWidth && y > powerUpY && y < powerUpY + powerUpHeight) { powerUp = false; powerUpX = undefined; powerUpY = undefined; powerUpType = undefined; powerUpWidth = 50; powerUpHeight = 20; powerUpColor = '#00FF00'; dx = -dx; dy = -dy; } } } 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 { lives--; if(!lives) { alert("GAME OVER"); document.location.reload(); } else { x = canvas.width/2; y = canvas.height-30; dx = 3; dy = -3; paddleX = (canvas.width-paddleWidth)/2; } } } if(rightPressed && paddleX < canvas.width-paddleWidth) { paddleX += 7; } else if(leftPressed && paddleX > 0) { paddleX -= 7; } x += dx; y += dy; requestAnimationFrame(draw); } draw();

GPTgame

Sign up for free tokens!

breakout game with power ups and experience levels

GPTgame