Search the Community

Hey there, i am new to JS and PIXI and tried to rebuild a pong game in PIXI.JS to make it responsive. (https://robots.thoughtbot.com/pong-clone-in-javascript) It seems to work but i run into the issue that all elements have a trail on movement, do i have to rerender the stage to avoid the trail or am i missing something? https://jsfiddle.net/02utycqq/ // define gamne variables const appWidth = window.innerWidth; const appHeight = window.innerHeight; const paddleWidth = 50; const paddleHeight = 10; const ballSize = 5; const appWidthHalf = appWidth / 2; const appHeightHalf = appHeight / 2; const paddleWidthHalf = paddleWidth / 2; const pongColor = 0x57dfbf; const computerPositionX = appWidthHalf - paddleWidthHalf; const computerPositionY = 50; const playerPositionX = computerPositionX; const playerPositionY = appHeight - computerPositionY - paddleHeight; const ballPositionX = appWidthHalf; const ballPositionY = appHeightHalf; const playerSpeed = 4; const computerSpeed = 4; const ballSpeed = 3; // Setup the ticker and the root stage PIXI.Container. const app = new PIXI.Application(appWidth, appHeight, { antialias: false, transparent: false, resolution: 1, }); function Paddle(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; this.x_speed = 0; this.y_speed = 0; } Paddle.prototype.render = function renderPaddle() { this.graphics = new PIXI.Graphics(); this.graphics.beginFill(pongColor); this.graphics.drawRect(this.x, this.y, this.width, this.height); this.graphics.endFill(); app.stage.addChild(this.graphics); }; Paddle.prototype.move = function (x, y) { this.x += x; this.y += y; this.x_speed = x; this.y_speed = y; if (this.x < 0) { this.x = 0; this.x_speed = 0; } else if (this.x + this.width > appWidth) { this.x = appWidth - this.width; this.x_speed = 0; } }; function Player() { this.paddle = new Paddle(playerPositionX, playerPositionY, paddleWidth, paddleHeight); } Player.prototype.render = function renderPlayer() { this.paddle.render(); }; Player.prototype.update = function () { for (const key in keysDown) { const value = Number(key); if (value === 37) { this.paddle.move(-playerSpeed, 0); } else if (value === 39) { this.paddle.move(playerSpeed, 0); } else { this.paddle.move(0, 0); } } }; function Computer() { this.paddle = new Paddle(computerPositionX, computerPositionY, paddleWidth, paddleHeight); } Computer.prototype.render = function renderComputer() { this.paddle.render(); }; Computer.prototype.update = function (ball) { const x_pos = ball.x; // eslint-disable-next-line let diff = -(this.paddle.x + this.paddle.width / 2 - x_pos); if (diff < 0 && diff < -computerSpeed) { diff = -ballSize; } else if (diff > 0 && diff > computerSpeed) { diff = ballSize; } this.paddle.move(diff, 0); if (this.paddle.x < 0) { this.paddle.x = 0; } else if (this.paddle.x + this.paddle.width > appWidth) { this.paddle.x = appWidth - this.paddle.width; } }; function Ball(x, y) { this.x = x; this.y = y; this.width = ballSize; this.height = ballSize; this.x_speed = 0; this.y_speed = ballSpeed; } Ball.prototype.render = function renderBall() { this.graphics = new PIXI.Graphics(); this.graphics.beginFill(pongColor); this.graphics.drawRect(this.x, this.y, this.width, this.height); this.graphics.endFill(); app.stage.addChild(this.graphics); }; Ball.prototype.update = function (paddle1, paddle2) { this.x += this.x_speed; this.y += this.y_speed; const top_x = this.x - ballSize; const top_y = this.y - ballSize; const bottom_x = this.x + ballSize; const bottom_y = this.y + ballSize; if (this.x - ballSize < 0) { this.x = ballSize; this.x_speed = -this.x_speed; } else if (this.x + ballSize > appWidth) { this.x = appWidth - ballSize; this.x_speed = -this.x_speed; } if (this.y < 0 || this.y > appHeight) { this.x_speed = 0; this.y_speed = ballSpeed; this.x = appWidthHalf; this.y = appHeightHalf; } if (top_y > appHeightHalf) { if ( top_y < paddle1.y + paddle1.height && bottom_y > paddle1.y && top_x < paddle1.x + paddle1.width && bottom_x > paddle1.x ) { this.y_speed = -ballSpeed; this.x_speed += paddle1.x_speed / 2; this.y += this.y_speed; } } else if ( top_y < paddle2.y + paddle2.height && bottom_y > paddle2.y && top_x < paddle2.x + paddle2.width && bottom_x > paddle2.x ) { this.y_speed = ballSpeed; this.x_speed += paddle2.x_speed / 2; this.y += this.y_speed; } }; const player = new Player(); const computer = new Computer(); const ball = new Ball(ballPositionX, ballPositionY); function render() { player.render(); computer.render(); ball.render(); } function update() { player.update(); computer.update(ball); ball.update(player.paddle, computer.paddle); } function step() { update(); render(); // app.ticker.update(step); } document.body.appendChild(app.view); app.ticker.add(step); // Controls const keysDown = {}; window.addEventListener('keydown', (event) => { keysDown[event.keyCode] = true; }); window.addEventListener('keyup', (event) => { delete keysDown[event.keyCode]; }); // resize function for app function resize() { app.view.style.position = 'absolute'; app.view.style.width = `${window.innerWidth}px`; app.view.style.height = `${window.innerHeight}px`; app.view.style.display = 'block'; } window.onresize = () => { app.ticker.add(resize); }; Thanks a lot.