A retro hockey game that you play against bots and you can get penalties and you can score goals on the world’s best goalies's game

Click here for free DL of the app version that can save data.

No:45896

←

Prev Next

→

A retro hockey game that you play against bots and..ALL
Developer User19741｜Date and time 24/2/22 0:18:38
Build time 17.341 sec｜Game capacity 2.603KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Retro Hockey Game</title>
</head>
<body>

var player = {
    x: 50,
    y: canvas.height / 2,
    width: 20,
    height: 100,
    speed: 5,
    score: 0
};

var bot = {
    x: canvas.width - 70,
    y: canvas.height / 2,
    width: 20,
    height: 100,
    speed: 4
};

var puck = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: 10,
    speedX: 5,
    speedY: 5
};

function drawPlayer() {
    ctx.fillStyle = 'white';
    ctx.fillRect(player.x, player.y, player.width, player.height);
}

function drawBot() {
    ctx.fillStyle = 'red';
    ctx.fillRect(bot.x, bot.y, bot.width, bot.height);
}

function drawPuck() {
    ctx.beginPath();
    ctx.arc(puck.x, puck.y, puck.radius, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.closePath();
}

function movePlayer(key) {
    if (key === 'ArrowUp') {
        player.y -= player.speed;
    } else if (key === 'ArrowDown') {
        player.y += player.speed;
    }
}

function moveBot() {
    if (bot.y + bot.height / 2 < puck.y) {
        bot.y += bot.speed;
    } else {
        bot.y -= bot.speed;
    }
}

function movePuck() {
    puck.x += puck.speedX;
    puck.y += puck.speedY;

if (puck.y + puck.radius > canvas.height || puck.y - puck.radius < 0) {
        puck.speedY *= -1;
    }

if (puck.x + puck.radius > canvas.width) {
        player.score++;
        resetPuck();
    } else if (puck.x - puck.radius < 0) {
        bot.score++;
        resetPuck();
    }

if ((puck.x - puck.radius < player.x + player.width) && (puck.y + puck.radius > player.y) && (puck.y - puck.radius < player.y + player.height)) {
        puck.speedX *= -1;
    }

if ((puck.x + puck.radius > bot.x) && (puck.y + puck.radius > bot.y) && (puck.y - puck.radius < bot.y + bot.height)) {
        puck.speedX *= -1;
    }
}

function resetPuck() {
    puck.x = canvas.width / 2;
    puck.y = canvas.height / 2;
    puck.speedX = 5;
    puck.speedY = 5;
}

function drawScore() {
    ctx.fillStyle = 'black';
    ctx.font = '30px Arial';
    ctx.fillText(player.score + ' - ' + bot.score, canvas.width / 2 - 50, 50);
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPlayer();
    drawBot();
    drawPuck();
    drawScore();

moveBot();
    movePuck();
}

document.addEventListener('keydown', function(event) {
    movePlayer(event.key);
});

setInterval(draw, 1000/60);
</script>

</body>
</html>