<!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>