Gamedev Canvas Workshop - lesson 4

Paddle and keyboard controls.

HTML

<canvas id="myCanvas" width="480" height="320"></canvas>

CSS

canvas { background: #eee; }

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var paddleHeight = 48;
var paddleWidth = 48;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;

document.onkeydown=(e)=>{
            let k=e.key;
            if(k==="ArrowRight"){
                rightPressed=true;
            }else if(k==="ArrowLeft"){
                leftPressed = true;
            }
        }

        document.onkeyup=(e)=>{
            let k=e.key;
            if(k==="ArrowRight"){
                rightPressed=false;
            }else if(k==="ArrowLeft"){
                leftPressed = false;
            }
        }

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPaddle();
    
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }
}

setInterval(draw, 10);