FreeCodeCamp - Simon Game

Developer
Jason Thomas
Size
4,301 Kb
Views
24,288
  1. FreeCodeCamp - Simon Game Previews
  2. FreeCodeCamp - Simon Game HTML Codes
  3. FreeCodeCamp - Simon Game CSS Codes
  4. FreeCodeCamp - Simon Game JS Codes

How do I make an freecodecamp - simon game?

What is a freecodecamp - simon game? How do you make a freecodecamp - simon game? This script and codes were developed by Jason Thomas on 14 September 2022, Wednesday.

FreeCodeCamp - Simon Game Previews
IQ Test

FreeCodeCamp - Simon Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>freeCodeCamp - Simon Game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<div class="back">	<div class="pad shape1" data-pad="1">	<audio preload="auto" class="sound1">	<source src="sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>	<source src="sounds/ogg/sounds_01.ogg" type="audio/ogg"/>	</audio>	</div>	<div class="pad shape2" data-pad="2">	<audio preload="auto" class="sound2">	<source src="sounds/mp3/sounds_02.mp3" type="audio/mpeg"/>	<source src="sounds/ogg/sounds_02.ogg" type="audio/ogg"/>	</audio>	</div>	<div class="pad shape3" data-pad="3">	<audio preload="auto" class="sound3">	<source src="sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>	<source src="sounds/ogg/sounds_03.ogg" type="audio/ogg"/>	</audio>	</div>	<div class="pad shape4" data-pad="4">	<audio preload="auto" class="sound4">	<source src="sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>	<source src="sounds/ogg/sounds_04.ogg" type="audio/ogg"/>	</audio>	</div>	<div class="circle"></div>	</div>	<div class="level">	<h2>Level: 1</h2>	</div>	<div class="score">	<h2>Score: 0</h2>	</div>	<ul class="difficulty">	<li>	<input type="radio" class="difOpt" name="difficulty" value="2">Easy	</li>	<li>	<input type="radio" class="difOpt" name="difficulty" value="1" checked>Normal	</li>	<li>	<input type="radio" class="difOpt" name="difficulty" value="0.5">Hard	</li>	<li>	<input type="radio" class="difOpt" name="difficulty" value="0.25">Insane	</li>	</ul>	<div class="sButton">	<button class="start">start</button>	</div>	</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FreeCodeCamp - Simon Game - Script Codes CSS Codes

body { background-color: #333; color: #fff;
}
ul { list-style: none; margin: 0 0 20px 0; padding: 0; text-align: center;
}
li { display: inline-block; padding: 3px;
}
.wrapper { position: relative; width: 640px; margin: 0 auto;
}
.back { position: absolute; top: 170px; width: 640px; height: 640px; z-index: 0; background-color: #000; border-radius: 310px;
}
.pad { width: 300px; height: 300px; float: left; z-index: 1; margin: 10px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); opacity: 0.6;
}
.shape1 { border-top-left-radius: 300px; background-color: green;
}
.shape2 { float: left; border-top-right-radius: 300px; background-color: red; clear: right;
}
.shape3 { float: left; border-bottom-left-radius: 300px; background-color: yellow; clear: left;
}
.shape4 { float: left; border-bottom-right-radius: 300px; background-color: blue;
}
.circle { position: absolute; top: 195px; left: 195px; width: 250px; height: 250px; background: #000; border-radius: 125px; z-index: 10;
}
.level, .score { width: 50%; float: left; text-align: center;
}
.sButton { width: 30%; margin: 0 auto;
}
.start { width: 100%; height: 30px; text-align: center;
}

FreeCodeCamp - Simon Game - Script Codes JS Codes

var game={ //game object	level: 1, //current level	turn: 0, //current turn	difficulty: 1, // user difficulty	score: 0, //current score	active: false, //whether a turn is active or not	handler: false, // whether the click and sound handlers are active	shape: '.shape', // cached string for the pad class	genSequence: [], //array containing the generated/randomized pads	plaSequence: [], //array containing the users pad selections	init: function(){	//initialises the game	if(this.handler === false){	//checks to see if handlers are already active	this.initPadHandler();	//if not activate them	}	this.newGame();	//reset the game defaults	},	initPadHandler: function(){	that=this;	$('.pad').on('mouseup',function(){	if(that.active===true){	var pad=parseInt($(this).data('pad'),10);	that.flash($(this),1,300, pad);	that.logPlayerSequence(pad);	}	});	this.handler=true;	},	newGame: function(){	//resets the game and generates a starts a new level	this.level=1;	this.score=0;	this.newLevel();	this.displayLevel();	this.displayScore();	},	newLevel: function(){	this.genSequence.length=0;	this.plaSequence.length=0;	this.pos=0;	this.turn=0;	this.active=true;	this.randomizePad(this.level); //randomize pad with the correct amount of numbers for this level	this.displaySequence(); //show the user the sequence	},	flash: function(element, times, speed, pad){ //function to make the pads appear to flash	var that = this;	//cache this	if(times > 0){	//make sure we are supposed to flash	that.playSound(pad);	//play the corresponding pad sound	element.stop().animate({opacity: '1'}, {	//animate the element to appear to flash	duration: 50,	complete: function(){	element.stop().animate({opacity: '0.6'}, 200);	}	});	//end animation	}	if (times > 0) {	//call the flash function again until done the correct amount of times	setTimeout(function () {	that.flash(element, times, speed, pad);	}, speed);	times -= 1;	//times - 1 for each time it's called	}	},	playSound: function(clip){	//plays the sound that corresponds to the pad chosen	var sound= $('.sound'+clip)[0];	console.log(sound);	console.log($('.sound'+clip));	sound.currentTime=0;	//resets audio position to the start of the clip	sound.play();	//play the sound	},	randomizePad: function(passes){	//generate random numbers and push them to the generated number array iterations determined by current level	for(i=0;i<passes;i++){	this.genSequence.push(Math.floor(Math.random() * 4) + 1);	}	},	logPlayerSequence: function(pad){	//log the player selected pad to user array and call the checker function	this.plaSequence.push(pad);	this.checkSequence(pad);	},	checkSequence: function(pad){	//checker function to test if the pad the user pressed was next in the sequence	that=this;	if(pad !== this.genSequence[this.turn]){	//if not correct	this.incorrectSequence();	}else{	//if correct	this.keepScore();	//update the score	this.turn++;	//incrememnt the turn	}	if(this.turn === this.genSequence.length){	//if completed the whole sequence	this.level++;	//increment level, display it, disable the pads wait 1 second and then reset the game	this.displayLevel();	this.active=false;	setTimeout(function(){	that.newLevel();	},1000);	}	},	displaySequence: function(){	//display the generated sequence to the user	var that=this;	$.each(this.genSequence, function(index, val) {	//iterate over each value in the generated array	setTimeout(function(){	that.flash($(that.shape+val),1,300,val);	},500*index*that.difficulty);	// multiply timeout by how many items in the array so that they play sequentially and multiply by the difficulty modifier	});	},	displayLevel: function(){	//just display the current level on screen	$('.level h2').text('Level: '+this.level);	},	displayScore: function(){	//display current score on screen	$('.score h2').text('Score: '+this.score);	},	keepScore: function(){	//keep the score	var multiplier=0;	switch(this.difficulty)	//choose points modifier based on difficulty	{	case '2':	multiplier=1;	break;	case '1':	multiplier=2;	break;	case '0.5':	multiplier = 3;	break;	case '0.25':	multiplier = 4;	break;	}	this.score += (1 * multiplier);	//work out the score	this.displayScore();	//display score on screen	},	incorrectSequence: function(){	//if user makes a mistake	var corPad = this.genSequence[this.turn],	//cache the pad number that should have been pressed	that = this;	this.active=false;	this.displayLevel();	this.displayScore();	setTimeout(function(){	//flash the pad 4 times that should have been pressed	that.flash($(that.shape+corPad),4,300,corPad);	},500);	$('.start').show();	//enable the start button again and allow difficulty selection again	$('.difficulty').show();	}
};
$(document).ready(function(){	//document ready	$('.start').on('mouseup', function(){	//initialise a game when the start button is clicked	$(this).hide();	game.difficulty = $('input[name=difficulty]:checked').val();	$('.difficulty').hide();	game.init();	});
});
FreeCodeCamp - Simon Game - Script Codes
FreeCodeCamp - Simon Game - Script Codes
Home Page Home
Developer Jason Thomas
Username samoht513
Uploaded September 14, 2022
Rating 3
Size 4,301 Kb
Views 24,288
Do you need developer help for FreeCodeCamp - Simon Game?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jason Thomas (samoht513) Script Codes
Name
FreeCodeCamp - Local Weather App
FreeCodeCamp - Pomodoro Clock
FreeCodeCamp - Javascript Calculator
FreeCodeCamp - Random Quote Generator
FreeCodeCamp - Twitchtv API
FreeCodeCamp - Wikipedia Viewer
Html - canvas
FreeCodeCamp - Tic Tac Toe Game
Freecodecamp - Tribute Page
FreeCodeCamp - Personal Portfolio
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!