Make a Scrolling background that moves with the character's game

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

No:11097

←

Prev Next

→

Make a Scrolling background that moves with the ..ALL
Developer unknown｜Date and time 23/8/7 21:26:19
Build time 31.047 sec｜Game capacity 3.829KB｜

Script

To use this code, you need to replace the file paths "emozi_rabbit.png" and "emozi_apple.png" with the actual paths to your character and background images. This code sets up a canvas element with a scrolling background and a character that can be controlled using touch events on a smartphone. The character moves horizontally or vertically based on swipe direction. The background continuously scrolls in one direction, creating a scrolling effect. Both the character and background dimensions can be adjusted according to your specific game requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    canvas {
        background-color: #000;
        display: block;
    }
</style>
</head>
<body>
<script>
    const canvas = document.createElement('canvas');
    document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');

// Set canvas size to fit the screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

const characterImage = new Image();
    characterImage.src = 'path_to_character_image.png';

const backgroundImage = new Image();
    backgroundImage.src = 'path_to_background_image.png';

const character = {
        x: canvas.width / 2 - 50,  // Initial position of the character
        y: canvas.height / 2 - 50,
        width: 100,
        height: 100,
        speed: 5  // Adjust character movement speed as desired
    };

const background = {
        x: 0,
        y: 0,
        width: canvas.width,
        height: canvas.height,
        speed: 1  // Adjust background scrolling speed as desired
    };

// Add event listeners for character movement on touch
    document.addEventListener("touchstart", handleTouchStart, false);
    document.addEventListener("touchmove", handleTouchMove, false);

let xDown = null;
    let yDown = null;

function handleTouchStart(event) {
        const firstTouch = event.touches[0];
        xDown = firstTouch.clientX;
        yDown = firstTouch.clientY;
    };

function handleTouchMove(event) {
        if (!xDown || !yDown) {
            return;
        }

const xUp = event.touches[0].clientX;
        const yUp = event.touches[0].clientY;

const xDiff = xDown - xUp;
        const yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
            if (xDiff > 0) {
                // Left swipe
                character.x -= character.speed;
            } else {
                // Right swipe
                character.x += character.speed;
            }
        } else {
            if (yDiff > 0) {
                // Up swipe
                character.y -= character.speed;
            } else {
                // Down swipe
                character.y += character.speed;
            }
        }

xDown = null;
        yDown = null;

event.preventDefault();
    };

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

// Draw background
        ctx.drawImage(backgroundImage, background.x, background.y, background.width, background.height);

// Update background position for scrolling effect
        background.x -= background.speed;

if (background.x < -canvas.width) {
            background.x = 0;  // Reset background position to start
        }
        
        // Draw character
        ctx.drawImage(characterImage, character.x, character.y, character.width, character.height);

requestAnimationFrame(draw);
    };

function init() {
        characterImage.onload = function () {
            backgroundImage.onload = function () {
                draw();
            }
        };
    };

init();
</script>
</body>
</html>
```

To use this code, you need to replace the file paths "path_to_character_image.png" and "path_to_background_image.png" with the actual paths to your character and background images.

This code sets up a canvas element with a scrolling background and a character that can be controlled using touch events on a smartphone. The character moves horizontally or vertically based on swipe direction. The background continuously scrolls in one direction, creating a scrolling effect. Both the character and background dimensions can be adjusted according to your specific game requirements.