js 배경에서 캐릭가둬놓으려고합니다..ㅠㅠ
글쓴이: 익명 사용자 / 작성시간: 수, 2016/11/30 - 11:18오후
안녕하세요.. 저도 js 가지고 처음으로 간단한 게임을 만들어 보았는데요...제가 배경에서 캐릭이 왜...배경안에서 놀지않고 밖까지 나가는 이유를 찾지 못하였어요..혹시 되신다면 한번봐주실 수 있으신가요???
<!DOCTYPE html>
<html>
<head>
<title>달려라 running</title>
<style type="text/css">
#back {
width: 3400px;
height: 800px;
z-index: 1;
}
#myimg {
position: absolute;
bottom: 30%;
z-index: 2;
}
#startBtn {
background-color: blue;
color: white;
font-weight: bold;
width: 100px;
height: 50px;
left: 0px;
border: 1px solid black;
border-radius: 5px;
bottom: 0px;
position: absolute;
}
#stopBtn {
background-color: red;
color: white;
font-weight: bold;
width: 101px;
height: 50px;
border: 1px solid black;
border-radius: 5px;
left: 100px;
bottom: 0px;
position: absolute;
}
</style>
</head>
<body>
<img id="back" src="배경.jpg" />
<img id="myimg" src="순.jpg" widht="100px" height="100px" />
<script type="text/javascript">
window.addEventListener("keydown", moveCharecter);
var imgObj = null;
var animate;
var img_my = document.getElementById("myimg");
var img_x = 0;
function init() {
imgObj = document.getElementById('back');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
// Control background image
function moveRight() {
if (parseInt(imgObj.style.left) > -3060) {
imgObj.style.left = parseInt(imgObj.style.left) - 4 + 'px';
}
else {
init();
}
animate = setTimeout(moveRight, 30);
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
// Move charecter image
function moveCharecter(event) {
var offsetTop = img_my.offsetTop;
if(event.keyCode == 38){
img_my.style.top = parseInt(offsetTop - 10) + "px";
}
if(event.keyCode == 40){
img_my.style.top = parseInt(offsetTop + 10) + "px";
}
}
window.onload = init;
</script>
<input type="button" id="startBtn" value="Start" onclick="moveRight();"/>
<input type="button" id="stopBtn" value="Stop" onclick="stop();"/>
</body>
</html>인데...캐릭이 자꾸배경을 넘어갈 수 있게 되는데 어느부분을 추가시켜줘야하나요?
File attachments:
| 첨부 | 파일 크기 |
|---|---|
 제목 없음.png | 273.09 KB |
Forums:
댓글 달기