I have a canvas game in my webpage and it operates with arrow key controls, but whenever somebody tries to play it the page scrolls. Is there any way I can prevent it? The code for my game is here. All I need is for the page to not be bouncing up and down whenever somebody is trying to play. I know it would be easier to just use the wasd keys but to me that feels like putting duct tape on a leak on the hull of a boat instead of actually fixing it. Any suggestions? I'm using google apps script HTML service so I'm not sure if using jquery is possible or if it is whether its going going to be hours and hours of work that are eventually ditched in favor of a quicker solution. Anyways, hope somebody can help.
<h1> example html</h1> <p>exampleHTMLexampleHTMLexampleHTMLexampleHTMLexampleHTMLexampleHTMLexampleHTMLexampleHTMLexampleHTMLexampleHTMLexampleHTMLexampleHTML</p> <h2>example html </h2> <canvas id='my' width = '640' height = '480' style = 'display: none;'></canvas> <script> var paused = false function PausePlay(){ if (paused === false) {paused = true;} else{paused = false;} } var canvas = document.getElementById("my"); var ctx = canvas.getContext("2d"); function paddle(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; this.speedModifier = 0; this.hasCollidedWith = function(ball) { var paddleLeftWall = this.x; var paddleRightWall = this.x + this.width; var paddleTopWall = this.y; var paddleBottomWall = this.y + this.height; if (ball.x > paddleLeftWall && ball.x < paddleRightWall && ball.y > paddleTopWall && ball.y < paddleBottomWall) { return true; } return false; }; this.move = function(keyCode) { var nextY = this.y; if (keyCode == 40) { nextY += 5; this.speedModifer = 1.5; } else if (keyCode == 38) { nextY += -5; this.speedModifier = 1.5; } else { this.speedModifier = 0; } nextY = nextY < 0 ? 0 : nextY; nextY = nextY + this.height > 480 ? 480 - this.height : nextY; this.y = nextY; }; } var player = new paddle(5, 200, 25, 100); var ai = new paddle(610, 200, 25, 100); var ball = { x: 320, y: 240, radius: 7, xSpeed: 2, ySpeed: 0, playerscore: 0, aiscore: 0, reverseX: function() { this.xSpeed *= -1; }, reverseY: function() { this.ySpeed *= -1; }, reset: function() { alert('The score is now ' + this.playerscore + ' to ' + this.aiscore); this.x = 20; this.y = 24; this.xSpeed = 2; this.ySpeed = 0; }, isBouncing: function() { return ball.ySpeed != 0; }, modifyXSpeedBy: function(modification) { modification = this.xSpeed < 0 ? modification * -1 : modification; var nextValue = this.xSpeed + modification; nextValue = Math.abs(nextValue) > 9 ? 9 : nextValue; this.xSpeed = nextValue; }, modifyYSpeedBy: function(modification) { modification = this.ySpeed < 0 ? modification * -1 : modification; this.ySpeed += modification; } }; function tick() { updateGame(); draw() window.setTimeout("tick()", 1000 / 60); } function updateGame() { if (paused === false){ ball.x += ball.xSpeed; ball.y += ball.ySpeed; if (ball.x < 0) { ball.reset(); ball.aiscore = ball.aiscore + 1; } if (ball.x > 640) { ball.reset(); ball.playerscore = ball.playerscore + 1 } if (ball.y <= 0 || ball.y >= 480) { ball.reverseY(); } var collidedWithPlayer = player.hasCollidedWith(ball); var collidedWithAi = ai.hasCollidedWith(ball); if (collidedWithPlayer || collidedWithAi) { ball.reverseX(); ball.modifyXSpeedBy(0.25); var speedUpValue = collidedWithPlayer ? player.speedModifier : ai.speedModifier; ball.modifyYSpeedBy(speedUpValue); } for (var keyCode in heldDown) { player.move(keyCode); } var aiMiddle = ai.y + (ai.height / 2); if (aiMiddle < ball.y) { ai.move(40); } if (aiMiddle > ball.y) { ai.move(38); } } } function draw() { if(paused === false){ ctx.fillStyle = "black"; ctx.fillRect(0, 0, 640, 480); renderPaddle(player); renderPaddle(ai); renderBall(ball); } } function renderPaddle(paddle) { ctx.fillStyle = "blue"; ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height); } function renderBall(ball) { ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false); ctx.fillStyle = "pink"; ctx.fill(); } var heldDown = {}; window.addEventListener("keydown", function(keyInfo) { heldDown[event.keyCode] = true; }, false); window.addEventListener("keyup", function(keyInfo) { delete heldDown[event.keyCode]; }, false); function playPong(){ canvas.style.display = 'block'; tick() } function show(){ var canvas = document.getElementById('my') canvas.style.display = 'block'; } </script> <div> <button onclick = 'hide()'> Hide or show the games</button> <br> <button onclick = 'PausePlay()'> Pause/play games</button> <br> </div> <br><br><br><br> <button onclick = 'playPong()'> Play pong </button>
