Moving Fish in javascript / 자바스크립트로 물고기 움직이기
<body>
<div id=panel>
<div id="bar"></div>
<img src="fish.png" id="fish">
</div>
<br>
<div id="nav">
<button id="leftBtn" onClick="startMove('leftBtn')">Move to Left</button>
<button id="rightBtn" onClick="startMove('rightBtn')">Move to Right</button>
<button id="stop" onClick="stop()">Stop</button>
</div>
</body>
<style>
#panel{position:relative; width:600px; height:300px; border:1px solid #ccc; }
#bar{position:absolute; left:0px; top:190px; width:100%; height:20px; background:pink;}
#btnStart{margin:0 auto;}
#fish{position:absolute; left:0px; top:120px; width:120px; height:70px;}
#nav{text-align: center; width:600px;}
</style>
<script>
var panel=null;
var fish;
var timer;
window.onload=function(){
this.init();
}
function init(){
this.panel=document.getElementById("panel");
this.fish=document.getElementById("fish");
}
var nCount=0
function startMove(whichbtn){
stop();
function moving(){
if(whichbtn=="rightBtn"){
nCount++;
if(nCount>480) nCount=480;
}else{
nCount--;
if(nCount<0) nCount=0;
}
console.log(nCount);
fish.style.left= nCount+"px";
}
timer = setInterval(moving,5);
}
function stop(){
clearInterval(timer);
}
</script>
-----------------------------------------------------------------------------------------
*Click to move the fish:)
<div id=panel>
<div id="bar"></div>
<img src="fish.png" id="fish">
</div>
<br>
<div id="nav">
<button id="leftBtn" onClick="startMove('leftBtn')">Move to Left</button>
<button id="rightBtn" onClick="startMove('rightBtn')">Move to Right</button>
<button id="stop" onClick="stop()">Stop</button>
</div>
</body>
<style>
#panel{position:relative; width:600px; height:300px; border:1px solid #ccc; }
#bar{position:absolute; left:0px; top:190px; width:100%; height:20px; background:pink;}
#btnStart{margin:0 auto;}
#fish{position:absolute; left:0px; top:120px; width:120px; height:70px;}
#nav{text-align: center; width:600px;}
</style>
<script>
var panel=null;
var fish;
var timer;
window.onload=function(){
this.init();
}
function init(){
this.panel=document.getElementById("panel");
this.fish=document.getElementById("fish");
}
var nCount=0
function startMove(whichbtn){
stop();
function moving(){
if(whichbtn=="rightBtn"){
nCount++;
if(nCount>480) nCount=480;
}else{
nCount--;
if(nCount<0) nCount=0;
}
console.log(nCount);
fish.style.left= nCount+"px";
}
timer = setInterval(moving,5);
}
function stop(){
clearInterval(timer);
}
</script>
-----------------------------------------------------------------------------------------
*Click to move the fish:)
댓글
댓글 쓰기