Basic player movement, Client Side

Basic player movement

<!DOCTYPE html>
<html>
    
    <head>
        <title>Basic player movement</title>
        <meta charset="UTF-8"/>
    </head>
    
    <body>
        
        
        <style>
            #player {
                background-color: red;
                height: 60px;
                width: 60px;
                position: relative;
                left: 0px;
            }
            
            .string {
                background-color: black;
                color: white;
                font-family: arial; 
                border: 2px solid grey;
                border-radius: 5px;
            }
            
            * {
                margin: 5px;
            }
        </style>
        
        
        <script>
            var move = 10
            var position = 0
            
            function left() {
                position = position - move
                document.getElementById("player").style.left = position + "px";
            }
            
            function right() {
                position = position + move
                document.getElementById("player").style.left = position + "px";
            }
        </script>
        
        
        <div id="player"></div>
        
        <div align="center">
            <button type="button" onclick="left()">&lt;</button>
            <button type="button" onclick="right()">&gt;</button>
            <br/>
            <span class="string">Use the buttons to move the player</span>
        </div>
    </body>
</html>


run \| edit \| history \| help	5

Please log in to post a comment.