CODEWITHSUNDEEP
javascript
Filip Bartoš
Filip Bartoš

Reputation: 301

Canvas - How to do background image moving

I want background image to keep moving from left to right. Any idea how can I do that ? I tried to use code from stackoverflow, didnt work, I tried to google, didnt work. This is my code. There is nothing about the moving background I am just placing it here because it might help. I´d like to know why any code never worked.

<!DOCTYPE html>
<html dir='ltr'>
    <head>
        <title>Temponary Rush</title>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <script type='text/javascript' src='js/classes.js'></script>
        <style>
        body {
            background-color: #232B2B;
            background-image:url('../web/css/cave-background.png');
            background-position:top;
            background-repeat:no-repeat;
            color:#FFFFFF; 
        }
        #container{
            flex-flow: row nowrap;
            display: -webkit-flex; 
            -webkit-justify-content: space-around; 
            display: flex;
            justify-content: space-around;

        }
        #container > div {
            background: #5F85DB;
            padding: 5px;
            color: #fff;
            font-weight: bold;
            font-family: Tahoma;
            border:5px inset #DC3D24;
            background-color:#232B2B;
        }
        #container > .advert {
            width:200px;
        }
        canvas {
            background-image:url('imgs/backgrounds/cave-bcg.png');
            background-position:center;
        }
        </style>

    </head>
    <body>
        <div id='container'>
            <div id='left' class='advert'>
                levá strana
            </div>
            <div id='center'>
                <canvas id="ctx" width="800" height="600"></canvas>
                <script type='text/javascript'>  

                    var ctx = document.getElementById("ctx").getContext("2d");
                    ctx.font = '30px Arial';
                    ctx.fillStyle = 'white';

                    var player = {
                        x: 10,
                        y: 549,
                        spdX: 1,
                        spdY: 51,
                        width:50,
                        height:50
                    };

                    var obstacles = [

                    ];

                    var allowedJump = true;
                    document.onkeydown = function(event){
                        if (event.keyCode === 32 && allowedJump) {
                            for(i; i<10;i++){
                                setTimeout(function(){
                                    player.y-= player.spdY/10;   
                                },60);
                            }
                            setTimeout(function(){
                                allowedJump = true;
                                player.y+=player.spdY;
                            },600);
                        };
                        allowedJump = false; 
                    };

                    setInterval(update,10);
                    function update(){
                        ctx.clearRect(0,0,800,600,45);   
                        ctx.fillRect(player.x, player.y, player.width, player.height);
                        player.x += player.spdX;
                        for(i = 0; i < obstacles.length; i++) {
                            ctx.fillRect(obstacles[i][0], obstacles[i][1], obstacles[i][2], obstacles[i][3]);
                            var is_colliding = collision.testCollision(player,obstacles[i][0], obstacles[i][1],obstacles[i][2],obstacles[i][3]);
                            if(is_colliding) {
                                afterImpact.stun(2,player);
                            }
                        }
                    }
                </script>
            </div>
            <div id='right' class='advert'>
                pravá strana
            </div>
        </div>
    </body>
</html>

I have the website on xampp server for now, later I will go to node.js server. this is my file tree. enter image description here

Upvotes: 0

Views: 554

Answers (1)

Dee_wab
Dee_wab

Reputation: 1165

  please remove this code from body
body {
        background-color: #232B2B;
        background-image:url('../web/css/cave-background.png');
        background-position:top;
        background-repeat:no-repeat;
        color:#FFFFFF;            
    }

you can set the following div code inside the body tag 

   div{
        background-color: #232B2B;
        background-image:url('../web/css/cave-background.png');
        background-position:top;
        background-repeat:no-repeat;

       }

Upvotes: 1

Related Questions