Game

game project screenshot

One of the funnest project during school!!!!! A challenge to develop and design a game using JavaScript/jQery. This game is a twist on the Whack-A-Mole game with lots of added features such as difficulty selection and the ability for the user to enter their name. This game has a timer for 20 seconds and every time player hit the ball, the ball will change to another ball and the score increases. The challenge about this project was to animate ball in different directions which makes the game a little bit harder and of course there is no hint for player to be ready for that challenge.

Visit Live

For making the game more challenging, I decided to add two different classes, top and bottom,which made balls move in two opposite direction. For gaining this result, the balls are in position absolute and having a transition to move up or down.



Because the balls should shows up randomly then we need to generate a random time to determine how long the moles stay up and randomly selects one of the moles to display which is throught the code below:


	_randomTime(min, max){
		return Math.round(Math.random() * (max - min) + min);
	}
	
	_randomBox(boxes) {
    	const idx = Math.floor(Math.random() * this.numOfBoxes);
    	const box = boxes.eq(idx);
    	if (idx === this.prevBoxNumber) {
      		console.log('...same ball...try again...');
      		return this._randomBox(boxes);
    	}
		this.prevBoxNumber = idx;
			console.log(idx);
    	return box;
	}	

The code below shows how the ball change when player get that and adding a score the player to show on the score board.


	bonk(box) {
		box.children().attr('src', this.boxBonkedImg.src)
				.end()
				.removeClass('show')
		    .addClass('bonked')
		    .one('transitionend', () => {
					box.children().attr('src', this.boxImgSrc);
					box.removeClass('bonked');
			});
		  this.score++;
    	this.scoreOut.text(this.score);
    	
	}