슈퍼 마리 오 게임
어떻게 버튼 을 통 해 그림 의 위 치 를 제어 합 니까?
이 작은 게임 은 대상 을 대상 으로 하 는 것 이 편리 하고 대상 을 대상 으로 하지 않 으 면 매우 번 거 로 울 것 이다.예 를 들 어 앞으로 설명 할 탱크 대전 게임 은 순수한 과정 이나 함수 식 방식 으로 쓰 면 유지 하기 가 매우 번 거 로 울 것 이다.
게임 분석:
버튼 을 통 해 마리 오의 위 치 를 어떻게 제어 하 는 지 보 세 요.
디자인 관련 대상(Mario x y...)
onclick 속성:사용자 가 대상 을 클릭 할 때 사용 하 는 이벤트 핸들
소재.
코드 디 렉 터 리:슈퍼 마리 아 html
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
.gamediv{
width: 500px;
height: 400px;
background-color: pink;
}
/* */
.controlcenter{
width: 200px;
height: 200px;
border: 1px solid red;
text-align:center;
}
</style>
<head>
<script language="javascript">
// Mario
function Mario(){
this.x=0;
this.y=0;
// 0-> 1-> 2-> 3->
this.move=function(direct){
switch(direct){
case 0: //
//window.alert("mario ");
// img left top， img 。 javascript DOM 。img
var mymario=document.getElementById('mymario');
// img top
//window.alert(mymario.style.top);
// 50px px
var top=mymario.style.top;
//px ， lenght-2
//window.alert(top.substr(0,top.length-2));
// ，
top=parseInt(top.substr(0,top.length-2));
//window.alert(top);
mymario.style.top=(top-2)+"px"; // 2px， ，
// mario ，
break;
case 1: //
var mymario=document.getElementById('mymario');
var left=mymario.style.left;
left=parseInt(left.substr(0,left.length-2));
mymario.style.left=(left+2)+"px";
break;
case 2: //
var mymario=document.getElementById('mymario');
var top=mymario.style.top;
top=parseInt(top.substr(0,top.length-2));
mymario.style.top=(top+2)+"px";
break;
case 3: //
var mymario=document.getElementById('mymario');
var left=mymario.style.left;
left=parseInt(left.substr(0,left.length-2));
mymario.style.left=(left-2)+"px";
break;
}
}
}
// Mario
var mario=new Mario();
</script>
</head>
<body>
<div class="gamediv">
<img id="mymario" src="person.png" style="left:100px; top:50px; position:absolute;" /> <!-- -->
</div>
<table border="1px" class="controlcenter">
<tr >
<td colspan="3" > </td>
</tr>
<tr>
<td>**</td>
<td><input type="button" value=" " onclick="mario.move(0)" /></td>
<!-- <td><input type="button" value=" " onclick="marioMove(0)" /></td> -->
<td>**</td>
</tr>
<tr>
<td><input type="button" value=" " onclick="mario.move(3)" /> </td>
<td>**</td>
<td><input type="button" value=" " onclick="mario.move(1)" /> </td>
</tr>
<tr>
<td>**</td>
<td><input type="button" value=" " onclick="mario.move(2)" /> </td>
<td>**</td>
</tr>
</table>
</body>
</html> 
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
