javascript로 게임 만들기 - 부드러운 동작 Javascript & HTML & CSS2016. 12. 15. 20:20
이제 좀 부드럽게 동작하는 듯... 동시동작도 됨.
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>
'Javascript & HTML & CSS' 카테고리의 다른 글
JSON 정렬 사이트 (0) | 2017.10.01 |
---|---|
파일업로드 하는 방법 (0) | 2016.12.31 |
javascript로 슈팅 게임 만들기 - 미사일 및 테두리 추가 (0) | 2016.12.15 |
Javascript로 게임 만들기(엉터리 코드) (0) | 2016.12.15 |
프론트엔드 연습용 템플릿 (0) | 2016.12.07 |