Jump to content
  • Advertisement
Sign in to follow this  
The Last Programmer

Problem in html/javascript gme

This topic is 2111 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hello,

 

i just wanted to create a simple game with javascript and HTML (not HTML5), in the game you will control a ship represented as a circle.

i made the circle move, but what i did not know is how to make it shoot bullets represented as a rectangles.

 

i tried to make the bullet as an object in javascript and when i press the spacebar a new object will be created and it will be pushed into and array and that bullets y coordinate will be decremented until it reaches the top of the screen then it will be deleted from the array but i cannot implement that idea in code tongue.png .

 

any help will be appreciated smile.png

 

this is the full code 

<!DOCTYPE HTML>
<meta charset='utf-8'>
<title>shoot</title>

<style>
	body {
		margin:0px;
		padding:0px;
	}

	#background {
		border: 1px solid black;
	}
	
	#ball {
		background: blue;
		width: 20px;
		height: 20px;
		border-radius: 20px;
		position:absolute;
	}
</style>


<div id='background'>
	<div id='ball'></div>
</div>



<script>
	var ball = document.querySelector('#ball'),
		background = document.querySelector('#background');
		background.style.width = "500px";
		background.style.height = "500px";
	
	var pw = parseInt(background.style.width);
	var ph = parseInt(background.style.height);	
		
	ball.style.left = (pw / 2 - 20) + 'px';
	ball.style.top = (ph - 50) + 'px';
	
	var bx = parseInt(ball.style.left);
	var by = parseInt(ball.style.top);
	var isSpace = false;
	var isLeft = false;
	var isRight = false;
	var bullets = [];
		
	game();
	handleKeys();
	
	function game() {
		movePlayer();
		window.requestAnimationFrame(game);
	}
	
	
	
	function movePlayer() {
		if (isLeft && bx <= pw - 20) {
			bx += 5;
			ball.style.left = bx + "px";
		}
		if (isRight && bx >= 0) {
			bx -= 5;
			ball.style.left = bx + "px";
		}
		
	}
	
	function handleKeys() {
		window.addEventListener('keydown', function(e) {
		var key = e.which || e.keycode;
		e.preventDefault;
		
		if (key === 32) {
			isSpace = true;
		}
		if (key === 37) {
			isRight = true;
		}
		if (key === 39) {
			isLeft = true;
		}}, false);
		
		window.addEventListener('keyup', function(e) {
		var key = e.which || e.keycode;
		e.preventDefault;
		
		if (key === 32) {
			isSpace = false;
		}
		if (key === 37) {
			isRight = false;
		}
		if (key === 39) {
			isLeft = false;
		}}, false);
	}
	
	function Bullet() {
		this.bull = document.createElement('div');
		this.color = 'green';
		this.bull.style.background = this.color;
		
		this.render = function() {
			this.width = 3;
			this.height = 5;
			this.x = bx + 9;
			this.y = by;
			this.vy = 5;
			this.canShoot = false;
			this.bull.style.position = "absolute";
			this.bull.style.width = this.width + "px";
			this.bull.style.height = this.height + "px";
			this.bull.style.left = this.x + "px";
			this.bull.style.top = this.y + "px";
			plan.appendChild(this.bull);
		}	
		
		this.fire = function () {
			this.y -= this.vy;
			this.bull.style.top = this.y + "px";
		}
		
		this.delete = function() {
			plan.removeChild(this.bull);
		}
	}
	
		
</script>

Share this post


Link to post
Share on other sites
Advertisement
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!