Let me first start of by simply telling you I have been reading MasterMind board game. I decided to port over this game to JavaScript and have done this you can find the example by clicking 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);
});
RayCasters the old style 3d of Games like Wolfenstien and Doom. In short most of the raycasters out their follow this 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 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:(
