javascript

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

make object move in javascript

411

Show ResultJAVASCRIPT

<!DOCTYPE html>
<html>

<head>
<meta charset = "utf-8">
<title> MOVEMENT </title>
</head>

<body>
<script type = "text/javascript">

let lock_left = true
let lock_top = true
let lock_right = true
let lock_bottom = true

let html; let htmls
let body; let bodys
let avatar; let avatars

let avatar_x = 0
let avatar_y = 0

const map_main =
{
create: function()
{
html = document.querySelector( "html" ); htmls = html.style
body = document.querySelector( "body" ); bodys = body.style
},

update: function()
{
htmls.width = "100%"
htmls.height = "100%"
htmls.margin = "0"

bodys.width = "100%"
bodys.height = "100%"
bodys.margin = "0"

bodys.backgroundColor = "rgb( 120, 200, 80 )"
},
}

const map_avatar =
{
create: function()
{
avatar = document.createElement( "div" ); avatars = avatar.style
body.appendChild( avatar )
},

update: function()
{
avatars.width = "64px"
avatars.height = "64px"
avatars.backgroundColor = "rgb( 200, 80, 120 )"

avatars.position = "absolute"
avatars.top = avatar_y + "px"
avatars.left = avatar_x + "px"
},
}

const master_create = function()
{
map_main.create()
map_avatar.create()
}

const master_update = function()
{
map_main.update()
map_avatar.update()

movement()

window.requestAnimationFrame( master_update )
}

const press = function( pressed )
{
if( pressed.keyCode === 37 || pressed.keyCode === 69 ) lock_left = false
if( pressed.keyCode === 38 || pressed.keyCode === 82 ) lock_top = false
if( pressed.keyCode === 39 || pressed.keyCode === 70 ) lock_right = false
if( pressed.keyCode === 40 || pressed.keyCode === 68 ) lock_bottom = false
}

const release = function( released )
{
if( released.keyCode === 37 || released.keyCode === 69 ) lock_left = true
if( released.keyCode === 38 || released.keyCode === 82 ) lock_top = true
if( released.keyCode === 39 || released.keyCode === 70 ) lock_right = true
if( released.keyCode === 40 || released.keyCode === 68 ) lock_bottom = true
}

const movement = function()
{
if( lock_left === false ) avatar_x -= 10
if( lock_top === false ) avatar_y -= 10
if( lock_right === false ) avatar_x += 10
if( lock_bottom === false ) avatar_y += 10
}

master_create()
master_update()

body.addEventListener( "keydown", press, false )
body.addEventListener( "keyup", release, false )

</script>
</body>

</html>