-
-
Save Hyeong-jin/9034b32e0d6ba548aa75 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>가속도 예제</title> | |
| <style type="text/css"> | |
| #board { | |
| position: relative; | |
| width : 1000px; | |
| height : 600px; | |
| background-color : #DDD; | |
| } | |
| #block { | |
| position : absolute; | |
| width : 10px; | |
| height: 10px; | |
| background-color: #F30; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| var g = 1; // 가속도값. | |
| var curVelocity = 1; | |
| var maxVelocity = 50; | |
| var leftArrow = 37 ; | |
| var rightArrow = 39 ; | |
| var upArrow = 38; | |
| var downArrow= 40 ; | |
| function accelerate() { | |
| if ( curVelocity < maxVelocity ) { | |
| curVelocity += g ; | |
| } | |
| } | |
| function deccelerate() { | |
| if ( curVelocity >= 1 ) { | |
| curVelocity -= g; | |
| } | |
| } | |
| function moveLeft ( block, fnVelocityChanger ) { | |
| var pos = getPosition( block ); | |
| pos.x -= curVelocity; | |
| if ( pos.x < 0 ) { | |
| curVelocity = 1; | |
| return ; | |
| } | |
| block.style.left = pos.x + "px"; | |
| block.style.top = pos.y + "px"; | |
| fnVelocityChanger(); | |
| } | |
| function moveRight ( block, fnVelocityChanger) { | |
| var pos = getPosition( block ); | |
| pos.x += curVelocity; | |
| if ( pos.x > 1000 -10 ) { | |
| curVelocity = 1; | |
| return ; | |
| } | |
| block.style.left = pos.x + "px"; | |
| block.style.top = pos.y + "px"; | |
| fnVelocityChanger(); | |
| } | |
| function moveUp ( block, fnVelocityChanger) { | |
| var pos = getPosition( block ); | |
| pos.y -= curVelocity; | |
| if ( pos.y < 0 ) { | |
| curVelocity = 1; | |
| return ; | |
| } | |
| block.style.left = pos.x + "px"; | |
| block.style.top = pos.y + "px"; | |
| fnVelocityChanger(); | |
| } | |
| function moveDown ( block, fnVelocityChanger) { | |
| var pos = getPosition( block ); | |
| pos.y += curVelocity; | |
| if ( pos.y > 600- 10 ) { | |
| curVelocity = 1; | |
| return ; | |
| } | |
| block.style.left = pos.x + "px"; | |
| block.style.top = pos.y + "px"; | |
| fnVelocityChanger(); | |
| } | |
| function getPosition ( eBlock ) { | |
| return { x : eBlock.offsetLeft, y : eBlock.offsetTop }; | |
| } | |
| var fnMove = null ; | |
| var interval = null ; | |
| window.onload = function () { | |
| var eBody = document.getElementById("body"); | |
| eBody.addEventListener("keydown", function(e) { | |
| var block = document.getElementById("block"); | |
| if ( interval ) { | |
| curVelocity = 1; | |
| clearInterval( interval); | |
| interval = null ; | |
| } | |
| if ( e.keyCode == leftArrow ) { | |
| fnMove = moveLeft; | |
| } else if ( e.keyCode == rightArrow ) { | |
| fnMove = moveRight ; | |
| } else if ( e.keyCode == upArrow ) { | |
| fnMove = moveUp; | |
| } else if ( e.keyCode == downArrow ) { | |
| fnMove = moveDown; | |
| } else { | |
| return ; | |
| } | |
| fnMove(block, accelerate); | |
| }, false); | |
| eBody.addEventListener("keyup", function(e){ | |
| var block = document.getElementById("block"); | |
| interval = setInterval( function() { | |
| fnMove( block, deccelerate ); | |
| if ( curVelocity == 0 ) { | |
| clearInterval( interval ); | |
| interval = null ; | |
| } | |
| }, 30); | |
| }, false); | |
| } | |
| </script> | |
| </head> | |
| <body id="body"> | |
| <div id="board"> | |
| <div id="block"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment