Breaking News: Grepper is joining You.com. Read the official announcement!

creat and move square using js

pink code answered on March 1, 2022 Popularity 3/10 Helpfulness 2/10

answer creat and move square using js

creat and move square using js

Comment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        
    x=700;
    y=400;
document.addEventListener("keypress",e=>{
    console.log(e.key)
var player = document.getElementById("player");
switch (e.key) {
    case "z" :
        y-=5;
        break;
    case "s" :
        y+=5;
        break;
    case "q" :
        x-=5;
        break;
    case "d" :
        x+=5;
        break;
    default:
        break;
}

    var pxl_x = String(x)+"px";
    var pxl_y = String(y)+"px";
    player.style.marginTop=pxl_y;
    player.style.marginLeft=pxl_x;
})
    </script>
    <title>move square</title>
    <style>
        h1{
            position: fixed;
            margin-left: 13%;
            font-family: cursive;
            color:rgb(26, 35, 36) ;
            font-size: 72px;

        }
        h2{
            position: fixed;
            margin-top: 140px;
            margin-left: 13%;
            font-family: cursive;
            color:rgb(46, 78, 82) ;
            font-size: 40px;
        }
        body{
            background-color: gray;
        }
        #player{
            background-color: black;
            border: red solid 3px;
            width: 100px;
            height: 100px;
            position: fixed;
            margin-top: 400px;
            margin-left: 700px;
            border-radius: 5px;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
    <h1>creat and move square using js !</h1>
    <h2>without get 2d method, use lowercases <span>Z</span>,<span>S</span>,<span>Q</span>,<span>D</span> to move the square.</h2>
    <div id="player">

    </div>
    
</body>
</html>

Popularity 3/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript move square using

Link to this answer
Share Copy Link

Contributed on Mar 01 2022

pink code

0 Answers Avg Quality 2/10

creat and move square using js

Contents

More Related Answers

creat and move square using js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.