CodeBreaker a Javascipt Game of Deduction

Let me first start of by simply telling you I have been reading Flash Game University by Gary Rosenzweig. This is an excellent resource for anyone who wants to teach themselves how to create games. The examples in the book are relatively simple but of course the logic that goes into creating them is not. While reading and studying the examples I have decide to convert some of the examples over to JavaScript not because I think JavaScript is better etc. etc. Personally I hate reading articles where people flame Adobe and say flash is dead etc.. Most of the time the people who write these articles can’t do both I can so I like both! Simply because I thought it would help me along in the thinking process. Some people play Bridge, Chess, Sudoku, or Crossword Puzzles to stay sharp I write code and study code to stay sharp. So in his book he has an example that is similar to the MasterMind board game. I decided to port over this game to JavaScript and have done this you can find the example by clicking here. If you like this example please purchase his book it is an excellent book and this code was generated by studying his example so please pay him tribute and purchase the book like I have. A little background about the game if it says you have a correct spot and the correct color. If it says you have the correct color you have the correct color but it is in the incorrect spot.

 		// constants
        const numPegs = 5;
        const numColors = 5;
        const maxTries = 10;
        const horizOffset = 30;
        const vertOffset = 60;
        const pegSpacing = 30;
        const rowSpacing = 30;
 
        // game play variables
        var solution = new Array();
		var solutionButtonArray;
        var turnNum;
 
        // references to display objects
		var buttonImages = new Array("img/cbBlack.png","img/cbGreen.png","img/cbYellow.png","img/cbPurple.png","img/cbRed.png", "img/cbBlue.png" );
        var currentRow = new Array();
        var currentText;
		var currentButton;
	    var mainIds = 0;
		var myButton;
		function startGame() {
			for(var i =0;i<numPegs;i++) {
				// random, from 0 to 4
				var r = Math.floor(Math.random()*numColors) + 1;
				solution.push(r);
			}
			turnNum = 0;
			createPegRow();
		}
 
	   function createPegRow(start) {
		   solutionButtonArray = new Array();
		   if(start == undefined){
		   $('#cbMainGame').html("");
		   }
		   var cbButton1 = '<div class="divCButton" id="div';
		   var cbButton2 = '" onclick="clickButton(this)"><img id="img';
		   var cbButton3 = '" alt="0" src="img/cbBlack.png" /></div>';
		   var mainWrapper1 = '<div class="mainWrapper">';
		   var mainWrapper2 = '</div>';
		   $('#cbMainGame').append(mainWrapper1);
		   var btnFinished = '<div class="imgButton" id="divButtonFinished';
		   var btnFinished2= '"><center><div class="mainButton" id="divButtonDone';
		   var btnFinished3= '" onclick="executeGameQuery(this)"><span id="spnMainButton">Done</span></div></center></div>';
	   	   currentRow = new Array();
		   for(i=0;i<numPegs;i++) {
				$('#cbMainGame').append(cbButton1+mainIds+cbButton2+mainIds+cbButton3);
				solutionButtonArray.push("img"+mainIds);
				mainIds++;
			}
			$('#cbMainGame').append(btnFinished+mainIds+btnFinished2+mainIds+btnFinished3+mainWrapper2);
	   }
 
	   function clickButton(clicked){
		   var myButton = clicked;
		   var img = $(clicked).find('img');
		   var imageToChange = img[0].alt.toString();
		   if(imageToChange == 6){
			imageToChange = 0;   
		   }
		   //console.log(imageToChange);
		   $("#"+img[0].id).attr("src",buttonImages[parseInt(imageToChange) + 1]);
		   $("#"+img[0].id).attr("alt", parseInt(imageToChange) + 1);
	   }
 
	   function executeGameQuery(mainButton){
		   var buttonClicked = mainButton;
		   var changeThis = buttonClicked.id;
		   var currentColorList = new Array();
		   var colorList = new Array(0,0,0,0,0);
		   var soltionList = new Array(0,0,0,0,0);
		   changeThis = $("#"+changeThis).parent().parent();
		   //console.log(changeThis);
		   var numberCorrect = 0;
		   var numberColorsCorrect = 0;
		   turnNum++;
		   for(i=0; i<numPegs; i++){
			   currentColorList.push($("#"+solutionButtonArray[i]).attr("alt"));
			   $("#"+solutionButtonArray[i]).parent().removeAttr("onclick");
		   }
		   for(i=0; i<numPegs; i++){
			  if(currentColorList[i] == solution[i] ){
				  numberCorrect++;
			  }else{
				  soltionList[solution[i]]++;
				  colorList[parseInt(currentColorList[i])]++;
			  }
		   }
		   for(i=0; i<numColors; i++){
			   var test = Math.min(soltionList[i],colorList[i]);
				numberColorsCorrect = numberColorsCorrect + Math.min(soltionList[i],colorList[i]);
			}
		   $("#"+buttonClicked.id).remove();
		   if(numberCorrect == numPegs){
		   $(changeThis).html('You Got It!<br/><div class="imgButton"><center><div onclick="startGame()" id="divButtonDone5" class="mainButton"><span id="spnMainButton">Play Again</span></div></center></div>');
		   }else if(turnNum == maxTries){
			   $(changeThis).html('I regret to infrom you just lost next time do it quicker! <br/><div class="imgButton"><center><div onclick="startGame()" id="divButtonDone5" class="mainButton"><span id="spnMainButton">Play Again</span></div></center></div>');
 
		   }
		   else{
		   $(changeThis).html("Correct Spot: "+numberCorrect+", Correct Color: "+numberColorsCorrect);
		   var start = true;
		   createPegRow(start);
		   }
	   }
$(document).ready(function() { 
$('#cbMainGame').append(startGameHTML);						   
});

Launch Game / Download Code

I have also been spending some time playing around with Alchemy last post I displayed some examples of RayCasters the old style 3d of Games like Wolfenstien and Doom. In short most of the raycasters out their follow this example this example is a c++ example and Adobe has a project in their labs called Alchemy. Alchemy allows you to port existing C/C++ to ActionScript. Which is really cool but also extremely difficult to do:) Right now I need to rewrite a chunk of it that uses SDL lib an old library that was used to create most video games years ago. I searched to see if someone was doing something similar and sure enough someone is Bruce Jawn. He informed me that instead of using SDL I need to pass it to the screen buffer as a byte array. So that is currently what I am trying to do he also mentioned posting his Make file under Google code in the near future. Hopefully he does I have also noticed haXe has an SDL wrapper. This might also be useful to study RayFaster2 this is a RayCaster built with haXe that is super fast. Their are numerous examples of RayCasters written in ActionScript but I am looking for speed. I might think about also just writing one from scratch and implementing a JavaScript version of it as well. I could have spent this weekend working on my new portfolio but unfortunately I didn’t do that:( I will have to extend it deadline beyond the 4 days time limit once again:(

Other Websites

Brendon Smith Social Networks

CodeBreaker a Game of Deduction

Brendon Smith

Photos

Recent Comments

LifeStream