JS 별 점 제거 게임 실현

본 논문 의 사례 는 JS 실현 점 별 제거 게임 의 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
절차 및 게임 기능 분석:
1.홈 페이지 에 무 작위 로 작은 별 이 나타난다.
2.작은 별 을 클릭 하면 작은 별 이 사라 집 니 다.
    onclick 이벤트 바 인 딩:
    대상.이벤트=이벤트 처리 함수;
    메모:어떤 노드 를 삭제 하려 면 부모 노드 를 찾 아야 합 니 다.
    메모:귀속 이벤트 중 this 를 직접 사용 할 수 있 습 니 다
3.기능 추가 게임 시작
4.기능 추가 일시 정지 게임
5.게임 진행 표시 줄 기능

<style type="text/css">
 #d2{
 width: 100px;
 height: 20px;
 border: 1px solid red;
 display: inline-block;
 }
 #d3{
 display: inline-block;
 background: yellow;
 height: 20px;
 }
</style>
<script type="text/javascript">
 //window.onload = init;
 
 var countstar = 0;//        
 var timerStar;//       
 var timerGameTime
 var t = 0;//      
 //       
 function startGame(){
 window.clearInterval(timerStar);
 window.clearInterval(timerGameTime);
 timerStar = window.setInterval("star()",500);
 timerGameTime = window.setInterval("time()",1000); //      
 }
 
 //       
 function star(){
 var obj = document.createElement("img");
 obj.src = "images/star.png";
 obj.width = Math.floor(Math.random()*60+20);
 obj.style.position = "absolute";
 obj.style.left = Math.floor(Math.random()*1700+100)+"px";
 obj.style.top = Math.floor(Math.random()*500+30)+"px";
 document.body.appendChild(obj);
 countstar++;
 var sp = document.getElementById("d3");
 sp.style.width = countstar*10+"px";
 
 if (countstar > 10) {
  alert("    ");
  window.clearInterval(timerStar);
  location.reload();
 }
 obj.onclick = removeStar;
 }
 
 //         
 function removeStar(){
 this.parentNode.removeChild(this);
 countstar --;
 var sp = document.getElementById("d3");
 sp.style.width = countstar*10+"px";
 }
 
 //         
 function pauseGame(){
 alert("     ,        。");
 }
 
 //         
 function time(){
 t++
 var obj = document.getElementById("d1");
 obj.innerHTML= "     "+t+" ";
 }
</script>
 
<body>
  <input type="button" value="    " οnclick="startGame()" name="">
  <input type="button" value="    " οnclick="pauseGame()" name="">
  <span id="d1">     0 </span>
  <span id="d2"><span id="d3"></span></span>
</body>
게임 효과:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기