2 Replies - 505 Views - Last Post: 28 July 2014 - 04:05 PM

#1 boba fett  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 66
  • Joined: 18-August 13

Weird thing in happening in game I'm making

Posted 28 July 2014 - 02:53 PM

Hello fellow coders. Not sure if this is where I'm supposed to post this or in game Dev. forum. But, it's a game made with HTML5/JS. Anyhow, I've programmed games before in Basic, a long time ago. But want a browser game that people can play on the internet. I'm in infancy testing, trying to test the waters so to speak until I get more familiar and can move on the a more complicated game. My main problem is collision detection and results thereof. It kind of works but yet kind of not and also, shooting objects from player character are't exactly right.

Basically, I have one canvas with only 3 types of objects. 1)the player character(PC) 2)a mob 3)shots from the PC
Right now, the PC can move in 4 directions, the mob is fixed, for testing and the player can shoot. When I move the PC and touch the mob that collision is perfect and works fine. However, when the player shoots the mob is destroyed even the PC misses and the shot goes to the left of the mob. A miss to the right is working and direct shot. The miss to the right is a plane of X co-ordinates past a certain Y co-ordinate.

Also, If I hold down the arrow kills the PC keeps moving. That's what I want. But, If I hold down the space bar, the PC keeps shooting. I don't want that. I want the PC to shoot only if I hit the space bar but not holding down. That's more a detail right now. The main problem is that any shot from the mob to the left hand side of the game field destroys the mob.
Here is the HTML>
<!doctype html>
<html>
	<head>
		<title>test2</title>
		<link rel="stylesheet" href="test2.css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="test2.js"></script>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500"></canvas>	
	</body>
</html>

Here is the JS>
(function(){
	$(document).ready(function(){	
		var game = {};
		game = {
			width: 500,
			height: 500,
			won: false
		}
		game.canvas = document.getElementById("canvas");
		game.context = game.canvas.getContext("2d");
		game.keys = [];
		game.shootSound = new Audio("sounds/shoot.mp3");
		game.explodeSound = new Audio("sounds/explode.wav");
		
		var mob = {
			width: 50,
			height: 50,						
		};				
		
		var player = {
			rendered: false,
			width: 50,
			height: 50					
		};			
		player.shot = [];
		
		shotMax = 50;
		shotTimer= shotMax;	
		
		init();
		
		$(document).keydown(function(e){			
			game.keys[e.keyCode ? e.keyCode : e.which] = true;
		});		
		
		$(document).keyup(function(e){
			delete game.keys[e.keyCode ? e.keyCode : e.which];
		});		
		
		function init(){
			player.x = game.width/2-player.width/2;
			player.y = game.height-player.width;
			mob.x = game.width/2-mob.width/2;
			mob.y = 0;			
			game.context.fillStyle = "red";
			game.context.fillRect(mob.x, mob.y, mob.width, mob.height);
			loop();			
		}		
		
		function update(){
			if(shotTimer > 0){
				shotTimer--;
			}else {
				shotTimer = shotMax;
			}
			if(game.keys[37]){				
				if(player.x >= 1){					
					player.rendered=false;
					game.context.clearRect(player.x, player.y, player.width, player.height);
					player.x--;
				}				
			}
			if(game.keys[39]){				
				if(player.x <= game.width-player.width-1){					
					player.rendered=false;
					game.context.clearRect(player.x, player.y, player.width, player.height);
					player.x++;
				}
			}
			if(game.keys[38]){
				if(player.y >= 1){					
					player.rendered=false;
					game.context.clearRect(player.x, player.y, player.width, player.height);
					player.y--;
				}				
			}
			if(game.keys[40]){				
				if(player.y <= game.height-player.height-1){					
					player.rendered=false;
					game.context.clearRect(player.x, player.y, player.width, player.height);
					player.y++;
				}
			}
			if(game.keys[32] && shotTimer == shotMax){
				addPlayerShot();
				game.shootSound.play();
			}
			for(i in player.shot){
				game.context.clearRect(player.shot[i].x, player.shot[i].y, player.shot[i].size, player.shot[i].size);
				if(!game.won){					
					if(collision(mob, player.shot[i])){	
						game.explodeSound.play();
						player.shot.splice(i, 1);
						game.context.clearRect(mob.x, mob.y, mob.width, mob.height);						
						game.won = true;					
					}else{
						player.shot[i].y--;						
						if(player.shot[i].y <= 0-player.shot[i].size){
							player.shot.splice(i, 1);
						}
					}
				}
			}
			if(!game.won){
				if(collision(mob, player)){
					game.explodeSound.play();
					game.context.clearRect(mob.x, mob.y, mob.width, mob.height);
					game.won = true;
				}
			}
		}
		
		function addPlayerShot(){			
			player.shot.push({
				x: player.x,
				y: player.y-player.height,
				size: 50,				
			});			
		}
		
		function collision(first, second){
			return !(first.x > second.x + second.width ||
					first.x + first.width < second.x ||
					first.y > second.y + second.height ||
					first.y + first.height < second.y);
		}
		
		function render(){						
			if(!player.rendered){				
				game.context.fillStyle = "blue";
				game.context.fillRect(player.x, player.y, player.width, player.height);				
				player.rendered=true;
			}
			if(!game.won){
				for(i in player.shot){
					game.context.clearRect(player.shot[i].x, player.shot[i].y, player.shot[i].size, player.shot[i].size);
					game.context.fillStyle = "silver";
					game.context.fillRect(player.shot[i].x, player.shot[i].y, player.shot[i].size, player.shot[i].size);				
				}
			}
		}
		
		function loop(){
			requestAnimFrame(function(){
				loop();
			});			
			update();
			render();
		}		
	});	
})();

window.requestAnimFrame = (function(){
	return  window.requestAnimationFrame       ||
			window.webkitRequestAnimationFrame ||
			window.mozRequestAnimationFrame    ||
			window.oRequestAnimationFrame ||
			window.msRequestAnimationFrame    ||
			function( callback ){
				window.setTimeout(callback, 1000 / 60);
			};
})();


The graphics are just drawn rects right now, no real graphics. Because just working on engine/mechanics. Can always add better graphics later. What's wierd is that I'm using the same collision detection function for both the PC and his shots. Any advice please, thank you.

This post has been edited by boba fett: 28 July 2014 - 02:59 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Weird thing in happening in game I'm making

#2 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 124
  • View blog
  • Posts: 551
  • Joined: 15-March 14

Re: Weird thing in happening in game I'm making

Posted 28 July 2014 - 03:33 PM

Your problem is in the function addPlayerShot() you are not adding the required properties to the shot. The colision detection function expects both arguments first,second to have a width and height property but you do not add those properties to the shot when you create them.

Changing the addPlayerShot function to
function addPlayerShot(){			
    player.shot.push({
        x: player.x,
        y: player.y-player.height,
        width: 50,   // assuming this is the size?????
        height: 50,  // assuming this is the size?????
        size: 50,				
    });			
}

Should fix the problem.

Or you can change the collision function to test if the second argument has a size property.
function collision(first, second){
    if(second.size !== undefined){   // does it have a size property
        return !(first.x > second.x + second.size ||    // yes use size in the test
                first.x + first.width < second.x ||
                first.y > second.y + second.size ||
                first.y + first.height < second.y);
    
    }     // no use height and width.
    return !(first.x > second.x + second.width ||
            first.x + first.width < second.x ||
            first.y > second.y + second.height ||
            first.y + first.height < second.y);
    }
    
}

Was This Post Helpful? 1
  • +
  • -

#3 boba fett  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 66
  • Joined: 18-August 13

Re: Weird thing in happening in game I'm making

Posted 28 July 2014 - 04:05 PM

Yep, that did it. Thank You! :)

This post has been edited by andrewsw: 28 July 2014 - 04:06 PM
Reason for edit:: Removed large previous quote, press REPLY

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1