Demo entry 6658158

shooting game

   

Submitted by anonymous on Nov 06, 2017 at 11:22
Language: JavaScript. Code size: 17.4 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:40px;
	 		left:655px;
			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;


function reset(){
 	running = 0;
 	time = 0;
  	document.getElementById("Time").innerHTML = "Time[00:00:00]";
  }
  var mins;
  var secs;
  var tenths;

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);}

  	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(){  
	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();  
  	//moveball_time=setInterval(moveball,7);  
	hiddenDamageIcon();
	hiddenFireIcon();
	hiddenAlienDamageIcon();
	hiddenAlienFireIcon();
	hiddenMissileIcon();

	
}  



function moveAlien(){
	var alien1 = document.getElementsByClassName("alien");   	
	alien1_top+=move_alien_d;
	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);
		}
	}
	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);
		}
	} 
	 if(event.keyCode==75){  //미사일
		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){
		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();
  		showAlienDamageIcon();
  		setTimeout(function(){hiddenAlienDamageIcon();},300);
  	}
}

function onKeyClear(){
		if(plane_ok==false){return;}
		if(event.keyCode==65||event.keyCode==68){ //좌우
			clearInterval(movex_time);
			x_on=0;
		}
		else if(event.keyCode==87||event.keyCode==83){//상하
			clearInterval(movey_time);
			y_on=0;
		}
	}
	
function keyx_move(){
	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;
		}
	}
	//turget();
			beamx=left_px+50;
}

function keyy_move(){
	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;
		}
	}
	//turget();
	beamy=top_px+400;
}

function turget(){
	  ctx.lineWidth = ballrad;
  	  ctx.beginPath();
	  ctx.fillStyle ="red";
	  ctx.arc(left_px+60,top_px+420,3,0,Math.PI*2,true);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle ="red";
	  ctx.arc(left_px+180,top_px+420,3,0,Math.PI*2,true);
	  ctx.fill();

	  ctx.lineWidth = ballrad;
  	  ctx.beginPath();
	  ctx.fillStyle ="red";
	  ctx.arc(left_px+60,top_px+460,3,0,Math.PI*2,true);
	  ctx.fill();
	  ctx.beginPath();
	  ctx.fillStyle ="red";
	  ctx.arc(left_px+180,top_px+460,3,0,Math.PI*2,true);
	  ctx.fill();
}

/*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();
  //ctx.strokeRect(boxx,boxy,boxwidth,boxheight);
} */

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';
	}
	function change() {
		ballvx = Number(f.hv.value);
		ballvy = Number(f.vv.value);
		return false;
	}
</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.06 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).