Demo entry 6658160

shooting game

   

Submitted by anonymous on Nov 06, 2017 at 11:36
Language: JavaScript. Code size: 17.5 kB.

<html>
<head>
    <title>Shooting_game</title>
    <style>
		.plane{
			position: absolute;	
			left:50px;
			top:400px;
			margin-left: 0px;
			margin-top: 0px;
		}
		.damage{
			position: absolute;
			left:50px;
			top:400px;
			margin-left: 0px;
			margin-top: 0px;
		}
		.fire{
			position: absolute;
			left:110px;
			top:410px;
			margin-left: 0px;	
			margin-top: 0px;
		}
		#myBar{
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    left: 0px;
		    top: 0px;
		    background-color: green;
		}
		.alien{
			position: absolute;
			right:10px;
			top:0px;
			margin-left: 0px;
			margin-top: 0px;
		}
		.missile{
			position: absolute;
			left:130px;
			top:440px;
			margin-left: 0px;
			margin-top: 0px;
		}
		form{
			width:200px;
			background-color:brown;
			padding:10px;
	    }
		input:valid {background:green;}
		input:invalid {background:blue;}
		body{
			background-image: url(sky.jpg);
			background-repeat: no-repeat;
			background-size:1800px 600px;
		}
		#myProgress{
			position: relative;
			width: 100%;
			height: 30px;
			left: 120px;
			top: -170px; /*HP바 전체 위치*/
			background-color: #ddd;
		}
		#myBar{
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    left: 0px;
		    top: 0px;
		    background-color: green;  
		}
		#label{
		    text-align: center;
		    line-height: 30px;
		    color: white;
		    left: 0px; 
		    top: 400px;
		}
		#AlienBar{
		   position: absolute;
		   width: 100%;
		   height: 100%;
		   left: 0px;
		   top: 0px;
		   background-color: Black;
		}
		#AlienProgress{
		   position: relative;
		   width: 100%;
		   height: 30px;
		   left: 120px;
		   top: -145px;/*alien HP바 전체 위치*/
		   background-color: #ddd;
		}
		#Alienlabel{
		   text-align: center;
		   line-height: 30px;
		   color: white;
		   left: 0px;
		   top: 400px;
		}
		.alien_damage{
		   position: absolute;
		   right:50px;
		   top:400px;
		   margin-left: 0px;
		   margin-top: 0px;
	    } 
	    .playerHP{
		   position: absolute;
		   top:612px;
		   left:0px;
		}
		.alienHP{
		   position: absolute;
		   top:670px;
		   left:10px;
		}
		.alien_fire{
		   position: absolute;
		   right:100px;
		   top:0px;
		   margin-left: 0px;
		   margin-top: 0px;
		}
	 	#start_button{
	 	   position: absolute;
		   top:260px;
	 	   left:760px;
	 	   background-color: blue; /* Green */
	       border: none;
	       color: white;
	       padding: 15px 32px;
	       text-align: center;
	       text-decoration: none;
	       display: inline-block;
	       font-size: 50px;
	       cursor: pointer;
	 	}
	 	 #restart_button{
	 	   position: absolute;
		   top:380px;
	 	   left:730px;
	 	   background-color: blue; /* Green */
	       border: none;
	       color: white;
	       padding: 15px 32px;
	       text-align: center;
	       text-decoration: none;
	       display: inline-block;
	       font-size: 50px;
	       cursor: pointer;
	 	}
	 	.win{
	 		position: absolute;
	 		top:30px;
	 	  left:655px;
	 	  font-size: 50px;

	 	}
	 	.lose{
	 		position: absolute;
	 		top:100px;
	 		left:645px;
			font-size: 50px;
	 	}
	 	.up{
	 		position: absolute;
	 		top:330px;
	 	  	left:580px;
			font-size: 20px;

	 	}
	 	.left{
	 		position: absolute;
	 		top:400px;
	 	  	left:420px;
			font-size: 20px;
	 		
	 	}
	 	.right{
	 		position: absolute;
	 		top:400px;
	 	  	left:710px;
			font-size: 20px;
	 		
	 	}
	 	.down{
	 		position: absolute;
	 		top:470px;
	 	  	left:550px;
			font-size: 20px;
	 		
	 	}
	 	.attack{
	 		position: absolute;
	 		top:400px;
	 	  	left:940px;
			font-size: 20px;
	 		
	 	}
	 	.arrow{
	 		position: absolute;
	 		top:410px;
	 	  	left:575px;
			font-size: 20px;
		}
		.missile_icon{
			position: absolute;
	 		top:410px;
	 	  	left:1150px;
			font-size: 20px;
		}
		#Time{
			position: absolute;
	 		top:-15px;
	 	  	left:15px;
			font-size: 40px;
		}
		#score{
			position: absolute;
	 		top:180px;
	 	 	left:510px;
	 	  	font-size: 30px;
	 	}
	 	 #result{
	 	 	position: absolute;
	 		top:210px;
	 	 	left:580px;
	 	  	font-size: 50px;
	 	}
		
	</style>
    
    <script type="text/javascript">
	var cwidth = 400; 
	var cheight = 300;
	var ballrad = 10;
	var boxx = 0;
	var boxy = 0;
	var boxwidth = 1680;
	var boxheight = 600;
	var boxboundx = boxwidth+boxx-ballrad; //오른쪽 벽
	var boxboundy = boxheight+boxy-ballrad;  //아래쪽 벽
	var inboxboundx = boxx+ballrad;  //왼쪽 벽
	var inboxboundy = boxy+ballrad; //윗쪽 벽
	var ballx = 1800;
	var bally = 60;
	var beamx = 0;
	var beamy = 0;
	var ctx;
	var ballvx = 6;
	var ballvy = 9;
	
	var left_px=0;
	var top_px=0;
	var move_d=2.5;
	var savex_key;
	var savey_key;
	var saveBeam_key;
	var movex_time;
	var movey_time;
	var moveBeam_time;
	var x_on=0;
	var y_on=0;
	var beam_on=0;
	var br_width=window.outerWidth-100;
	var br_height=window.innerHeight-53;
	var HP = 100;
	var alienHP=100;
	var alien1_top=0;
	var move_alien_d=2;
	var missile_left=0;
	var missile_top=0;
	var move_missile_d=8;
	var missile_ok=false;
	var plane_ok=true;

	var moveball_time;
	var movealien_time;
	var clear_time;
	
	document.onkeydown=onKeyPress;
	document.onkeyup=onKeyClear;

	var time = 0;
	var running = 0;
	var score;
	var mins;
  	var secs;
  	var tenths;

function reset(){ //타이머를 리셋시키는 함수
 	running = 0;
 	time = 0;
  	document.getElementById("Time").innerHTML = "Time[00:00:00]";
  }
function increment(){ //타이머의 시간을 증가시켜 나가면서 분 초 밀리초를 계산하여 표시하는 함수
 time++;
 mins = Math.floor(time/10/60);
 if(mins==0){secs = Math.floor(time/10);}
  else{secs = Math.floor((time-(mins*600))/10);} //60초가 되었을때 secs부분을 00으로 초기화 시킨다
  	tenths = time % 10;
 if(mins <10){mins = "0" + mins;}
 if(secs <10){secs = "0" + secs;}
 document.getElementById('Time').innerHTML ="Time["+mins + ":" + secs + ":" + "0" + tenths+"]"; //시간 표시
}

function init(){ //새로고침을 했을 때 실행되는 함수
	document.getElementsByClassName("restart")[0].style.visibility='hidden';
	document.getElementsByClassName("win")[0].style.visibility='hidden';
	document.getElementsByClassName("lose")[0].style.visibility='hidden';
	document.getElementById('score').style.visibility='hidden';
	document.getElementById('result').style.visibility='hidden';
	movealien_time=setInterval(moveAlien,1); //에이리언 움직이기	
	hiddenDamageIcon();
	hiddenFireIcon();
	hiddenAlienDamageIcon();
	hiddenAlienFireIcon();
	hiddenMissileIcon();
}

function initofinit(){  //start버튼을 눌렀을 때 모습을 화면에 표시해주는 함수
	ctx = document.getElementById('canvas').getContext('2d');  
 	document.getElementsByClassName("start")[0].style.visibility='hidden';
 	document.getElementsByClassName("up")[0].style.visibility='hidden';
 	document.getElementsByClassName("left")[0].style.visibility='hidden';
 	document.getElementsByClassName("right")[0].style.visibility='hidden';
 	document.getElementsByClassName("down")[0].style.visibility='hidden';
 	document.getElementsByClassName("attack")[0].style.visibility='hidden';
 	document.getElementsByClassName("arrow")[0].style.visibility='hidden';
 	document.getElementsByClassName("missile_icon")[0].style.visibility='hidden';
 	clear_time=setInterval(increment,100);  //타이머 시작
 	missile_ok=true;  //자신의 공격 활성화 
  	moveball_time=setInterval(moveball,7); //공 움직이기  
	hiddenDamageIcon();
	hiddenFireIcon();
	hiddenAlienDamageIcon();
	hiddenAlienFireIcon();
	hiddenMissileIcon();
}  

function moveAlien(){ //에이리언을 움직일 수 있게하는 함수
	var alien1 = document.getElementsByClassName("alien");   	
	alien1_top+=move_alien_d;  //이동 거리만큼 y좌표값 증가
	document.styleSheets[0].rules[4].style.top=alien1_top+'px';       
	document.styleSheets[0].rules[16].style.top=alien1_top+'px';
	document.styleSheets[0].rules[19].style.top=alien1_top+'px';
  	if(alien1_top==500){ //맨 밑에 왔을 때 방향 전환
		move_alien_d=-2;
	}
	if(alien1_top==0){ //맨 위에 왔을 때 방향 전환
		move_alien_d=2;
	}
}

function onKeyPress(){ //해당 키가 눌러져 있을 때만 호출이 되는 함수 
	if(plane_ok==false){return;} //게임에 졌을 때 자신은 못 움직이기 비활성화
	if(event.keyCode==65||event.keyCode==68){ //키보드에서 A나 D가 눌러지면(좌우)
		savex_key=event.keyCode; //누른 키 코드를 변수에 저장
		if(x_on!=1){ //
			x_on=1;
			movex_time=setInterval(keyx_move,1); //x방향으로 이동하는 함수 호출
		}
	}
	else if(event.keyCode==87||event.keyCode==83){//키보드에서 W나 S가 눌러지면(상하)
		savey_key=event.keyCode;  //누른 키 코드를 변수에 저장
		if(y_on!=1){
			y_on=1;
			movey_time=setInterval(keyy_move,1);  //y방향으로 이동하는 함수 호출
		}
	} 
	 if(event.keyCode==75){  //미사일(K)가 눌러졌을 때
		saveBeam_key = event.keyCode; //누른 키 코드를 변수에 저장
		if(beam_on!=1&&missile_ok==true){ 
			beam_on=1;
			missile_left=left_px; //발사하는 위치를 현재 자신이 있는 위치에 갖다 놓는다
			missile_top=top_px;
			document.styleSheets[0].rules[5].style.top=missile_top+440+'px';
			moveBeam_time=setInterval(moveBeam,1);  //미사일 이동
		}
	}
}

function moveBeam(){    //자신의 공격(미사일)을 움직이게 하는 함수
	var mb = document.getElementsByClassName("missile");   
	showMissileIcon();
	missile_left+=move_missile_d;
	document.styleSheets[0].rules[5].style.left=missile_left+100+'px';
	if(missile_left>=1600){ // 미사일이 끝단까지 가면 setInterval을 멈추게 하고 미사일 아이콘을 지운다
		clearInterval(moveBeam_time);
		hiddenMissileIcon();
		beam_on=0;
	}
	/*에이리언을 맞추면*/
	if(1510<missile_left+140&&missile_left+140<1660&&alien1_top<missile_top+456&&missile_top+456<alien1_top+80){ 
		aliendamage();  //에이리언의 HP를 감소
  		showAlienDamageIcon();  //damage아이콘을 표시했다가
  		setTimeout(function(){hiddenAlienDamageIcon();},300);  //0.3초후에 지우기
  	}
}

function onKeyClear(){ //누르고 있었던 키를 놨을 때 호출되는 함수
	if(plane_ok==false){return;}
	if(event.keyCode==65||event.keyCode==68){ //좌우
		clearInterval(movex_time); //x방향으로 이동하는 setInterval을 멈추게 한다
		x_on=0;
	}
	else if(event.keyCode==87||event.keyCode==83){//상하
		clearInterval(movey_time);//y방향으로 이동하는 setInterval을 멈추게 한다
		y_on=0;
	}
}
	
function keyx_move(){ //자신이 x방향으로 이동할 때 호출 되는 함수
	if(plane_ok==false){return;}
	if(savex_key==65){
		document.styleSheets[0].rules[0].style.marginLeft=left_px+'px';
		document.styleSheets[0].rules[1].style.marginLeft=left_px+'px';
		document.styleSheets[0].rules[2].style.marginLeft=left_px+'px';
		left_px=left_px-move_d;
		if(left_px<-50){
			left_px=-50;
		}
	}
	else if(savex_key==68){
		document.styleSheets[0].rules[0].style.marginLeft=left_px+'px';
		document.styleSheets[0].rules[1].style.marginLeft=left_px+'px';
		document.styleSheets[0].rules[2].style.marginLeft=left_px+'px';
		left_px=left_px+move_d;
		if(left_px>br_width-300){
			left_px=br_width-300;
		}
	}
			beamx=left_px+50;
}

function keyy_move(){  //자신이 y방향으로 이동할 때 호출 되는 함수
	if(plane_ok==false){return;}
	if(savey_key==87){
		document.styleSheets[0].rules[0].style.marginTop=top_px+'px';
		document.styleSheets[0].rules[1].style.marginTop=top_px+'px';
		document.styleSheets[0].rules[2].style.marginTop=top_px+'px';
		top_px=top_px-move_d;
		if(top_px<-400){
			top_px=-400;
		}
	}
	else if(savey_key==83){
		document.styleSheets[0].rules[0].style.marginTop=top_px+'px';
		document.styleSheets[0].rules[1].style.marginTop=top_px+'px';
		document.styleSheets[0].rules[2].style.marginTop=top_px+'px';
		top_px=top_px+move_d;
		if(top_px>br_height-630){
			top_px=br_height-630;
		}
	}
	
	beamy=top_px+400;
}

function moveball(){  //공을 그렸다 지우면서 이동시키는 함수
  ctx.clearRect(boxx,boxy,boxwidth,boxheight);
  moveandcheck();  //공이 벽에 부딪쳤는지 검사
  ctx.beginPath();
  ctx.fillStyle ="rgb(0,0,0)";
  ctx.arc(ballx, bally, ballrad,0,Math.PI*2,true);
  ctx.fill();
 }

function moveandcheck() {  //공이 벽에 부딪쳤는지 검사하는 함수 
  var nballx = ballx + ballvx;
  var nbally = bally +ballvy;
  if (nballx > boxboundx) {  /*오른쪽 벽*/
	 ballvx =-ballvx;
	 nballx = boxboundx;
  }
  if (nballx < inboxboundx) {   /*왼쪽 벽*/
     nballx = inboxboundx
	 ballvx = -ballvx;
  }
  if (nbally > boxboundy) {   /*이래쪽 벽*/
	 nbally = boxboundy;
	 ballvy =-ballvy;
  }
  if (nbally < inboxboundy) {  /*윗쪽 벽*/
    nbally = inboxboundy;
	 ballvy = -ballvy;
  }
  if (left_px+50<ballx&&ballx<left_px+170&&top_px+410<bally&&bally<top_px+460){  
	  damage();
	  showDamageIcon();
	  setTimeout(function(){hiddenDamageIcon();},300);
  }
  ballx = nballx;
  bally = nbally;
}

function damage() { //자신이 공격을 당했을 때 호출 되는 함수
	var elem = document.getElementById("myBar");   
      HP-=4; 
      elem.style.width = HP + '%'; 	
      document.getElementById("label").innerHTML = HP + '%';
	 if(HP<=20){
	 	showFireIcon();
	 	elem.style.backgroundColor="red";
	 }
	 if(20<HP&&HP<=50){
	 	elem.style.backgroundColor="orange";
	 }

	 if(HP<=0){
	     clearInterval(clear_time);
	     elem.style.backgroundColor="#ddd";
	     clearInterval(moveball_time);
	   
	     document.getElementsByClassName("restart")[0].style.visibility='visible';
	     document.getElementsByClassName("lose")[0].style.visibility='visible';
	     document.getElementById("label").innerHTML = 0 + '%'; 	
	 	missile_ok=false;
	 	plane_ok=false;	
	 }
}
function aliendamage() {  //자신의 공격이 에이리언한테 맞았을 때 호출 되는 함수
var alienelem = document.getElementById("AlienBar");   
      alienHP-=1; 
      alienelem.style.width = alienHP + '%'; 	
      document.getElementById("Alienlabel").innerHTML = alienHP + '%';
	  if(alienHP<=20){
	 	showAlienFireIcon();	
	 	alienelem.style.backgroundColor="red";
		
	  }
	  if(20<alienHP&&alienHP<=50){
	 	alienelem.style.backgroundColor="orange";
	  }

	  if(alienHP<=0){
	    clearInterval(clear_time);
	    score=HP*100;
	    score-=time;
		document.getElementById('score').innerHTML = '<h2>'+'HP Score['+(HP*100)+'] - Time Score[' + time + ']</h2>';
		if(score<=0){
			document.getElementById('result').innerHTML = '<h2>'+'Your Score : 0</h2>';			
		}
		else{
	        document.getElementById('result').innerHTML = '<h2>'+'Your Score : '+score+'</h2>';
	    }
	    document.getElementById('result').style.visibility='visible';
	    alienelem.style.backgroundColor="#ddd";
	    clearInterval(moveball_time);
	    clearInterval(movealien_time);
	    document.getElementsByClassName("restart")[0].style.visibility='visible';
	    document.getElementsByClassName("win")[0].style.visibility='visible';
	    document.getElementById("Alienlabel").innerHTML = 0 + '%';
	    document.getElementById('score').style.visibility='visible';
	    missile_ok=false;
	}
}


/*편의상 화면상의 아이콘들을 지웠다 표시하는 함수*/
function showDamageIcon(){ 
		document.getElementsByClassName("damage")[0].style.visibility='visible';
	}
	function hiddenDamageIcon(){ 
		document.getElementsByClassName("damage")[0].style.visibility='hidden';
	}
	function showAlienDamageIcon(){ 
		document.getElementsByClassName("alien_damage")[0].style.visibility='visible';
	}
	function hiddenAlienDamageIcon(){ 
		document.getElementsByClassName("alien_damage")[0].style.visibility='hidden';
	}
	function showFireIcon(){ 
		document.getElementsByClassName("fire")[0].style.visibility='visible';
	}
	function hiddenFireIcon(){ 
		document.getElementsByClassName("fire")[0].style.visibility='hidden';
	}
	function showAlienFireIcon(){ 
		document.getElementsByClassName("alien_fire")[0].style.visibility='visible';
	}
	function hiddenAlienFireIcon(){ 
		document.getElementsByClassName("alien_fire")[0].style.visibility='hidden';
	}
	function showMissileIcon(){ 
		document.getElementsByClassName("missile")[0].style.visibility='visible';
	}
	function hiddenMissileIcon(){ 
		document.getElementsByClassName("missile")[0].style.visibility='hidden';
	}
	



</script>
</head>
<body onLoad="init();">  
<canvas id="canvas" width="2000" height="800">
</canvas>  
<br/>
<div class="start">
			<button id="start_button"  onClick="initofinit();">START</button>
</div>

<div class="restart">
			<button id="restart_button"  onClick="location.reload();">RESTART</button>		
</div>

<img src="plane.png" class="Plane"  width="150" height="100">
<img src="damage.png" class="damage"   width="90" height="70">
<img src="fire.png" class="fire"   width="60" height="50">
<img src="alien.png" class="alien"   width="150" height="100">
<img src="fire.png" class="alien_fire"   width="60" height="50">
<img src="missile.png" class="missile"   width="50" height="50">
<img src="damage.png" class="alien_damage"   width="90" height="70">
<img src="arrow.png" class="arrow"   width="120" height="100">
<img src="missile.png" class="missile_icon"   width="120" height="100">
<div id="myProgress" clsaa="bar">
  
  <div id="myBar">
    <div id="label">100%</div>
  </div>
</div>

<div id="AlienProgress" clsaa="Alienbar">
  <div id="AlienBar">
    <div id="Alienlabel">100%</div>
  </div>
</div>
<div class="playerHP" >
	<h2>Player HP:</h2>
</div>
<div class="alienHP">
	<h2>Alien HP:</h2>
</div>

<div class="win">
	<h1>You Win!!</h1>
</div>
<div class="lose">
	<h1>You Lose!!</h1>
</div>

<div class="up">
	<h1>W(UP)</h1>
</div>
<div class="left">
	<h1>A(LEFT)</h1>
</div>
<div class="right">
	<h1>D(RIGHT)</h1>
</div>
<div class="down">
	<h1>S(DOWN)</h1>
</div>
<div class="attack">
	<h1>K(ATTACK)</h1>
</div>

<h1 id="Time">Time[00:00:00]</h1>
<div id="score">
	<h1>Score:</h1>
</div>
<div id="result">
	<h2>Your Score:</h2>
</div>
<br>
</body>
</html>

This snippet took 0.05 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).