Side scrolling fighter's game

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

No:49559

←

Prev Next

→

Side scrolling fighter
Developer User19847｜Date and time 24/3/5 17:11:40
Build time 13.823 sec｜Game capacity 2.653KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Side Scrolling Fighter Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            background: #222;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Player character
        const player = {
            x: 50,
            y: canvas.height / 2,
            width: 50,
            height: 50,
            speed: 5,
            dx: 0,
            dy: 0
        };

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

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

function newPos() {
            player.x += player.dx;
            player.y += player.dy;

if (player.x < 0) {
                player.x = 0;
            }

if (player.x + player.width > canvas.width) {
                player.x = canvas.width - player.width;
            }

if (player.y < 0) {
                player.y = 0;
            }

if (player.y + player.height > canvas.height) {
                player.y = canvas.height - player.height;
            }
        }

function update() {
            clear();
            drawPlayer();
            newPos();
            requestAnimationFrame(update);
        }

function moveUp() {
            player.dy = -player.speed;
        }

function moveDown() {
            player.dy = player.speed;
        }

function moveLeft() {
            player.dx = -player.speed;
        }

function moveRight() {
            player.dx = player.speed;
        }

function stop() {
            player.dx = 0;
            player.dy = 0;
        }

document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowUp' || e.key === 'w') {
                moveUp();
            }

if (e.key === 'ArrowDown' || e.key === 's') {
                moveDown();
            }

if (e.key === 'ArrowLeft' || e.key === 'a') {
                moveLeft();
            }

if (e.key === 'ArrowRight' || e.key === 'd') {
                moveRight();
            }
        });

document.addEventListener('keyup', stop);

update();
    </script>
</body>
</html>