Top Down Shoot Em Up

In this example below you will see how to do a Top Down Shoot Em Up with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SirDaev, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SirDaev ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Top Down Shoot Em Up</title>
  
  
  
  
  
</head>

<body>

  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/entities.js?6" type="text/javascript"></script>
<canvas id="ctx" width="700px" height="500px" style="border:1px solid #000;"></canvas>
<div id="debug">
	<span id="fps"></span>
	<span id=""></span>
	<span id=""></span>
	<span id=""></span>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SirDaev/top-down-shoot-em-up-zdgRBe */
var ctx = document.getElementById("ctx").getContext("2d");

var WIDTH = 700;
var HEIGHT = 500;

var frameCount = 0;
var fps = {
    startTime : 0,
    frameNumber : 0,
    getFPS : function(){
        this.frameNumber++;
        var d = new Date().getTime(),
        currentTime = ( d - this.startTime ) / 1000,
        result = Math.floor( ( this.frameNumber / currentTime ) );
        if( currentTime > 1 ){
            this.startTime = new Date().getTime();
            this.frameNumber = 0;
        }
    	return result;
		}
}

var Img = {};
//Img.player = new Image();
//Img.player.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/player.jpg";

player = {
	id: 1,
	xPos: (WIDTH/2) - 20,
	yPos: HEIGHT - 80,
	width: 40,
	height: 40,
	acceptInput: true,
	speed: 5
}

document.onkeydown = function(event){
	if(event.keyCode === 68)	//d
		player.pressingRight = true;
	else if(event.keyCode === 83)	//s
		player.pressingDown = true;
	else if(event.keyCode === 65) //a
		player.pressingLeft = true;
	else if(event.keyCode === 87) // w
		player.pressingUp = true;
}

document.onkeyup = function(event){
	console.log(event.keyCode);
	if(event.keyCode === 68) {	//d
		player.pressingRight = false;
	} else if(event.keyCode === 83) {	//s
		player.pressingDown = false;
	} else if(event.keyCode === 65) { //a
		player.pressingLeft = false;
	} else if(event.keyCode === 87) { // w
		player.pressingUp = false;
	}
	if(event.keyCode === 187) { //+
		if(player.speed < 8) {
			player.speed++;
		}
	}
	if(event.keyCode === 189) { //-
		if(player.speed > 2) {
			player.speed--;
		}
	}
}

update = function(){
	ctx.clearRect(0,0,WIDTH,HEIGHT);
	ctx.fillStyle = '#bb0011';	
	ctx.fillText('FPS: ' + fps.getFPS() + ' | ' + 
							 'xPos: ' + player.xPos + ' | ' + 
							 'yPos: ' + player.yPos + ' | ' +
							 'Input: ' + player.acceptInput + ' | ' +
							 'Speed: ' + player.speed,10,10);
	
	if (player.pressingUp) {
			player.yPos -= player.speed;
	}
	if (player.pressingDown) {
			player.yPos += player.speed;
	}
	if (player.pressingLeft) {
			player.xPos -= player.speed;
	}
	if (player.pressingRight) {
			player.xPos += player.speed;
	}
	
ctx.fillStyle = '#a8c';	ctx.fillRect(player.xPos,player.yPos,player.width,player.height);
	//ctx.drawImage(Img.player,player.xPos,player.yPos);
}

setInterval(update,16);

Comments