달력

3

« 2024/3 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

이제 좀 부드럽게 동작하는 듯... 동시동작도 됨.

keypress로 키값을 조사하는 방식으로 짜면 더 깔끔할 듯하나..

방향키는 이벤트로 키코드가 전달이 되지 않아서 부득이하게 keydown과 keyup의 조합을 사용함.


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<!-- jQuery CDN -->

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style>

#stage{position:relative;width:500px;height:500px;border:solid;background-color:greenyellow}

#hero{position:relative;top:450px;left:230px;width:50px;height:50px;background-color:yellowgreen}

.bullet{position:absolute;width:10px;height:10px;background-color:red;border:solid 1px}

</style>

<script>

var keyValue = {};

setInterval(function(){

if(keyValue[37] == 'on'){

console.log("go left");

$("#hero").css("left", "-=5");

}

if(keyValue[38] == 'on'){

console.log("go up");

$("#hero").css("top", "-=5");

}

if(keyValue[39] == 'on'){

console.log("go right");

$("#hero").css("left", "+=5");

}

if(keyValue[40] == 'on'){

console.log("go bottom");

$("#hero").css("top", "+=5");

}

}, 10);

$(function(){

$(document).on("keydown", function(e){

keyValue[e.keyCode] = 'on';

})

$(document).on("keyup", function(e){

keyValue[e.keyCode] = undefined;

})

})

</script>

</head>

<body>

<div id="stage">

<div id="hero"></div>

</div>

</body>

</html>

:
Posted by 클레잇