I have a unique idea for a breakout game where the paddle is shaped like a piece of roof trim, with its shape changing based on the pitch of the roof. Hitting special bricks will alter the pitch variable, thus changing the "steepness" of the paddle. However, I am facing an issue where every time a pitch change occurs, a new paddle is drawn on the screen but the old one remains. As a result, multiple paddles with varying pitches end up cluttering the screen after hitting multiple special bricks.
//Innovative breakout game with dynamic paddle shape
var gridSize=50;
var geometry;
var extrudeSettings;
var startPitch = 1;
var pitch = startPitch;
var pitchChange = false;
var paddle;
var paddleWidth = run*2;
var paddleX = 0;
var paddleLineThickness = .5;
var paddleMat = new THREE.MeshLambertMaterial({color: "purple"});
var paddleShape = new THREE.Shape();
var side = 10;
var pi = Math.PI;
function definePaddleShape() {
roofAngle = Math.atan(pitch/12);
rise = side*Math.sin(roofAngle);
run = side*Math.cos(roofAngle);
paddleWidth = run*2;
paddleShape.moveTo( -run, 0 );
paddleShape.lineTo( -run, paddleLineThickness );
paddleShape.lineTo(0, rise + paddleLineThickness );
paddleShape.lineTo( run, paddleLineThickness );
paddleShape.lineTo( run, 0 );
paddleShape.lineTo( 0, rise );
extrudeSettings = {amount:4, steps: 1, bevelSegments:0, bevelSize:0, bevelThickness:0};
}
function drawPaddle() {
geometry = new THREE.ExtrudeGeometry(paddleShape, extrudeSettings);
paddle = new THREE.Mesh(geometry, paddleMat);
paddle.castShadow = true;
scene.add(paddle);
paddle.rotateX(-pi/2);
paddle.translateY(-gridSize);
paddle.translateX(paddleX);
}
function draw() {
requestAnimationFrame(draw);
// pitch gets changed when a collision
// between ball and special brick occurs
// sets pitchChange to true
if(pitchChange) {
scene.remove(paddle);
definePaddleShape();
drawPaddle();
pitchChange = false;
}
renderer.render(scene, camera);
}
definePaddleShape();
drawPaddle();
document.addEventListener("mousemove", mouseMoveHandler, false);
draw();