JSFiddle - React, Tailwind, and code Playground
HTML
<div class="starship" id="starship"></div>
CSS
html,body{
background: #444;
height:100%;
margin:0;
padding:0;
}
#starship{
width:100px;
height:100px;
background-color:#4169E0;
position:absolute;
left:0;
top:0;
}
JavaScript
var keydown = [0,0];//keydown [0] - l\r left\right keydown[1] u/d up/down
var speed = 5;//скорость
function e_keydown(e){
switch(e.keyCode){
case 37: // если нажата клавиша влево
keydown[0] = "l";
break;
case 38: // если нажата клавиша вверх
keydown[1] = "u";
break;
case 39: // если нажата клавиша вправо
keydown[0] = "r";
break;
case 40: // если нажата клавиша вниз
keydown[1] = "d";
break;
}
}
function e_keyup(e){
switch(e.keyCode){
case 37: // если нажата клавиша влево
if(keydown[0] == "l")
keydown[0] = 0;
break;
case 38: // если нажата клавиша вверх
if(keydown[1] == "u")
keydown[1] = 0;
break;
case 39: // если нажата клавиша вправо
if(keydown[0] == "r")
keydown[0] = 0;
break;
case 40: // если нажата клавиша вниз
if(keydown[1] == "d")
keydown[1] = 0;
break;
}
}
window.addEventListener("keydown", e_keydown,false);
window.addEventListener("keyup", e_keyup,false);
handler();
function handler(){
var blueRect = document.getElementById("starship");
var x = blueRect.offsetLeft;
if(keydown[0] == "l")
x -=speed;
else if(keydown[0] == "r")
x+=speed;
if(x < 0) x= 0;
if(x + blueRect.offsetWidth > document.body.offsetWidth) x = document.body.offsetWidth - blueRect.offsetWidth ;
var y = blueRect.offsetTop;
if(keydown[1] == "u")
y -=speed;
else if(keydown[1] == "d")
y+=speed;
if(y < 0) y= 0;
else if(y + blueRect.offsetHeight > document.body.offsetHeight) y = document.body.offsetHeight - blueRect.offsetHeight;
blueRect.style.left = x+"px";
blueRect.style.top =...