JAVASCRIPT make object move javascript - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution
join us

make object move in javascript


 172

Show ResultJAVASCRIPT


1

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


By        
The power of the user (%)
80%



The most helpful JAVASCRIPT solutions

How can I get the last day and the next day in javascript ?How can I get the last day and the next day in javascript ?JAVASCRIPT

Click to see more ...

  5.6K     467

How to get client machine name or computer name with javascript ?How to get client machine name or computer name with javascript ?JAVASCRIPT

Click to see more ...

  25.6K     396

get client hostname javascriptget client hostname javascriptJAVASCRIPT

Click to see more ...

  4.9K     301

create 3d barrel using javascriptcreate 3d barrel using javascriptJAVASCRIPT

Click to see more ...

  3.6K     258

Create fireworks using javascriptCreate fireworks using javascriptJAVASCRIPT

Click to see more ...

  3.3K     204

create qr code javascriptcreate qr code javascriptJAVASCRIPT

Click to see more ...

  2.7K     205

detect ie javascriptdetect ie javascriptJAVASCRIPT

Click to see more ...

  2.9K     194

fire event when user is idle javascriptfire event when user is idle javascriptJAVASCRIPT

Click to see more ...

  2.7K     186

create earth in universe with three.jscreate earth in universe with three.jsJAVASCRIPT

Click to see more ...

  2.8K     185

how to create foreach class using javascript ?how to create foreach class using javascript ?JAVASCRIPT

Click to see more ...

  2.3K     183

Welcome aboard!
We are happy you are here and
wish you good net-raft!