Forums » Help » One click game

Hey everyone,

Im trying to make a simple game that has a one click function. The goal is to have the player move to the right with ig.input.bind(ig.KEY.RIGHT_ARROW, 'right'); and once the button is released the game is over.

Right now when the button is pushed the EntityPlayer moves to the right with the screen but once its released they player continues moving.

Any ideas on how to achieve this?

Thanks
-J

I assume that some place in your player entity you check for the right key and then apply some kind of movement! Velocity * speed. If you set the player velocity to 0 on no key press it should stop moving. If that’s not the case can you post your player entity code.

Thanks Stuart,

I updated the code and got the player to stop with an acceleration update.

It should be noted Im very very new to impactjs

Here is my player entity code anyways:

EntityPlayer = ig.Entity.extend({
		size: {x:4, y:4},
		checkAgainst: ig.Entity.TYPE.B,

		animSheet: new ig.AnimationSheet( 'media/player.png', 30, 16 ),

		maxVel: {x: 50, y: 300},
		friction: {x: 600, y:0},
		speed: 300,

		init: function( x, y, settings ) {
			this.addAnim( 'idle', 0.1, [0] );		
			this.parent( x, y, settings );
		},

		update: function() {
			// User Input
			 if( ig.input.state('right') ) {
				this.accel.x = this.speed;
			}
			else {
				this.accel.x = 0;
			}

			this.parent();
		}
	});

So not to start a new thread I thought I'd ask my next question here.

I've been reading through the docs and searching the forums for a way to do animated backgrounds. My code is based off of the "Drop" source code so attached is my whole project.

As you can see Im trying to animate the stars on top of the main background. Im not getting any errors.

Any ideas?

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	'impact.entity',
	'impact.collision-map',
	'impact.background-map',
	'impact.font',
	'impact.debug.debug',
	'plugins.impact-splash-loader'
)
.defines(function(){
	
	// The Backdrop image for the game, subclassed from ig.Image
	// because it needs to be drawn in it's natural, unscaled size, 
	FullsizeBackdrop = ig.Image.extend({
		resize: function(){},
		draw: function() {
			if(!this.loaded) {return;}
			ig.system.context.drawImage(this.data, 0, 0);
		}
	});
	
	EntityPlayer = ig.Entity.extend({
		size: {x:35, y:24},
		offset:{x:0, y:0},
		maxVel: {x: 50, y: 300},
		friction: {x: 600, y:0},
		speed: 300,
		animSheet: new ig.AnimationSheet('media/nyan_cat.png', 35, 24),

		init: function( x, y, settings ) {
			this.addAnim( 'idle', 1, [0] );
			this.addAnim( 'right', 0.07, [0,1,2,3,4,5] );		
			this.parent( x, y, settings );
		},

		update: function() {
			// User Input
			 if(ig.input.state('right')) {
				this.accel.x = this.speed;
				this.currentAnim = this.anims.right;
			}else {
				this.accel.x = 0;
			}
			this.parent();
		}
	});

	SideGame = ig.Game.extend({
		clearColor: null,
		gravity: null, 
		player: null,
		map:[],
		score: 0,
		speed: 1,
		tiles: new ig.Image('media/tiles.png'),
		backdrop: new FullsizeBackdrop('media/backdrop.png'),
		font: new ig.Font( 'media/04b03.font.png' ),
	
	
		init: function() {
			ig.input.bind(ig.KEY.RIGHT_ARROW,'right');
			ig.input.bind(ig.KEY.ENTER, 'ok');
			
			this.map = [
				[0,0,0,0,0,0,0,0,0,0,0,0,0,],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,],
				[0,0,0,0,0,0,0,0,0,0,0,0,0,],
			];
			
			// for(var x = 8; x < 18; x++){
			// 	this.map[x] = this.getColumn(); 
			// }
			
			this.collisionMap = new ig.CollisionMap (8, this.map);
			this.backgroundMaps.push(new ig.BackgroundMap(8, this.map, 'media/tiles.png'));
			this.player = this.spawnEntity(EntityPlayer, ig.system.width/2-2, 16);
			
			var star1 = new ig.AnimationSheet('media/stars1.png',7,7);
			var star2 = new ig.AnimationSheet('media/stars2.png',7,7);
			this.backgroundAnims = {
				'media/stars1.png':{
					0:new ig.Animation(star1, 0.1, [0,1,2,3,4,5])
				},
				'media/stars2.png':{
					0:new ig.Animation(star2, 0.1, [0,1,2,3,4,5])
				}
			}
		},
		
		getColumn: function(){
			var column = [];
			for(var y = 0; y < 32; y++){
				column[y] = Math.random() > 0.93 ? 1:0;
			}
			return column;
		},
	
		update: function() {		
			if(ig.input.pressed('ok')){
				ig.system.setGame(SideGame);
			}
			if(this.gameOver){
				return;
			}
			
			var player = this.getEntitiesByType( EntityPlayer)[0];
			if(player) {
				this.screen.x = player.pos.x - ig.system.width/2;
				this.screen.y = player.pos.y - ig.system.height/2;
			}
			this.parent();
			
			if(ig.input.released('right')){
				this.gameOver = true;
			}
			
		},
	
		draw: function() {
			this.backdrop.draw();
			
			if(this.gameOver){
				this.font.draw('Game Over!', ig.system.width/2, 32, ig.Font.ALIGN.CENTER);
				this.font.draw( 'Press Enter', ig.system.width/2, 48, ig.Font.ALIGN.CENTER );
				this.font.draw( 'to Restart', ig.system.width/2, 56, ig.Font.ALIGN.CENTER );
			}else{
				this.parent();
			}
		}
	});


	// Start the Game with 60fps, a resolution of 240x160, scaled
	// up by a factor of 2
	ig.main( '#canvas', SideGame, 60, 320, 180, 2, ig.ImpactSplashLoader );

});

Thanks
-J

Sorry this was a double post.