Search me is a game based on keywords like search,time and puzzle. This is a simple game where the user will face a 10 letter word and From that word, the user needs to search letter by letter in the given shuffled letters in matrix format with the given time. The user will earn 10 plus points for finding out the each letter.
To accomplish this, I had used only javascript code.
Algorithm I followed with text :
1) Initially I thought about the 10 letter word displaying to user which he needs to find out and also making the first letter to be with highlighted color(whcih the usrer needs to find). For this I had taken
the 10 letter words which are unique and every time I randomize them for not getting repeated. 2)There after I went with showing a button called "start new game". Whenever user hits that button, the game policies should be started I thought.
3)As soon as the user hits the button, Thought of showing two things one is shuffled 5x6 matrix with letters and another is timer.
4)Whenever the user clicks over the first letter in the matrix, Thereafter the highlighted word should be moved to the second letter and the user needs to find out that word which is moved(second letter) and also needs to provide the score with 10 points.
5)While the user in search mode, I needs to set the timer which allows the user to play within time and stops out if the time is out. To test my code: Copy the below code and paste in the followed w3 schools try it editor link Copy the below code and test here
Note: If you find any mistakes please provide in comments, so that I can rectify the things.
Result :
huhhhh... In my next article on this section(basic games), I'll come with code reduction of this game.
Thank you.
To accomplish this, I had used only javascript code.
Algorithm I followed with text :
1) Initially I thought about the 10 letter word displaying to user which he needs to find out and also making the first letter to be with highlighted color(whcih the usrer needs to find). For this I had taken
the 10 letter words which are unique and every time I randomize them for not getting repeated. 2)There after I went with showing a button called "start new game". Whenever user hits that button, the game policies should be started I thought.
3)As soon as the user hits the button, Thought of showing two things one is shuffled 5x6 matrix with letters and another is timer.
4)Whenever the user clicks over the first letter in the matrix, Thereafter the highlighted word should be moved to the second letter and the user needs to find out that word which is moved(second letter) and also needs to provide the score with 10 points.
5)While the user in search mode, I needs to set the timer which allows the user to play within time and stops out if the time is out. To test my code: Copy the below code and paste in the followed w3 schools try it editor link Copy the below code and test here
Note: If you find any mistakes please provide in comments, so that I can rectify the things.
<html>
<head>
<style>
.findbutton {background-color: #f44336; color: white;}
.successbutton {background-color: #106d2c; color: white;}
</style>
<script type="text/javascript">
String.prototype.shuffle = function () {
var a = this.split(""),
n = a.length;
for(var i = n - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = a[i];
a[i] = a[j];
a[j] = tmp;
}
return a.join("");
}
var valcompare='';
var totsecremain = 17;
var randomword='';
var shuffletext = '';
var findletter='';
var findletterindex=0;
var score=0;
var wordtofind='';
var words = ["AFTERSHOCK", "BACKGROUND", "BLACKSMITH","DESTROYING","DUPLICATES","SHOCKINGLYS","MOTHERLAND","REGULATION","PATHFINDER","PALINDROME" ];
var getRandomWord = function () {
randomword='';
randomword = words[Math.floor(Math.random() * words.length)];
valcompare=randomword[0];
wordtofind=randomword;
return randomword;
};
wordtofind = getRandomWord();
window.onload = function () {
CreateDynamicButtonWord();
};
function shuffleletters(e) {
var alphabets = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
shuffletext=alphabets.shuffle();
//Fill grid with random characters in each cellpadding
FillGrid();
StartTimer();
e.style.visibility = 'hidden';
document.getElementById("dvcountdown").style.visibility='';
}
function FillGrid()
{
//Adding +4 letters to make whole 5x6 grid. As the letters having the count 26.
var finalshuffle='';
var addedfourletters='';
var addfourcount=0;
for(let u=0; u<shuffletext.length;u++ )
{
if(randomword.indexOf(shuffletext[u])>= -1)
{
if(addfourcount<4)
{
addedfourletters=addedfourletters+shuffletext[u];
addfourcount++;
}
}
}
shuffletext=shuffletext+addedfourletters;
finalshuffle=shuffletext.shuffle();
//Filing the final shuffled values in each cell
var arrcount=0;
var table = document.getElementById("table2");
for (var i = 0, row; row = table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
var dv = table.rows[i].cells[j].getElementsByTagName("div") // = finalshuffle[j];
arrcount=arrcount+1;
dv[0].innerHTML=finalshuffle[arrcount-1];
//dv.innerText=finalshuffle[j];
}
}
}
function StartTimer() {
document.getElementById('dvcountdown').innerHTML = totsecremain + 'sec remaining';
totsecremain--;
if (totsecremain < -1) {
alert('Your score : '+score);
SetInitials();
}
else {
setTimeout(StartTimer, 1000);
}
}
function SetInitials(){
document.getElementById("btnstart").style.visibility='';
document.getElementById("btnstart").style.visibility = 'block';
document.getElementById("dvcountdown").style.visibility='hidden';
totsecremain = 17;
findletterindex=0;
score=0;
getRandomWord();
CreateDynamicButtonWord();
}
function CheckMatch(e){
if(document.getElementById("btnstart").style.visibility != 'hidden'){
alert("Please click 'start new game' button.");
return;
}
//alert(randomword);
//alert(e.innerHTML);
//alert(valcompare);
if(e.innerHTML === valcompare)
{
var table = document.getElementById("table1");
for (var i = 0, row; row = table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
var btn = table.rows[i].cells[j].getElementsByTagName("button") // = finalshuffle[j];
if(btn.length>0)
{
var test = btn[0].className;
btn[findletterindex].classList.remove("findbutton");
btn[findletterindex].className='successbutton';
btn[findletterindex + 1].className='findbutton';
valcompare=btn[findletterindex + 1].value;
findletterindex++;
score=score+10;
}
//dv.innerText=finalshuffle[j];
}
}
}
}
//Creating Dynamic buttons
function CreateDynamicButtonWord(){
var myNode = document.getElementById("dvword");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
for(let i=0;i<wordtofind.length;i++)
{
var buttontag = document.createElement("button");
buttontag.setAttribute("type", "button");
buttontag.setAttribute("value", wordtofind[i]);
buttontag.innerHTML = wordtofind[i];
document.getElementById('dvword').appendChild(buttontag);
if(i==0){buttontag.className = "findbutton"; findletter=wordtofind[i]}
}
}
</script>
</head>
<body>
<table id="table1" cellspacing="0" cellpadding="0" style="border:none">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td><div id="dvword"></div> </td>
</tr>
</table><br/>
<div>
<button type="button" value="Start New Game" id="btnstart" onclick="shuffleletters(this)" />Start New Game</button><br/><br/><br/>
Find Red Color Word
</div><br/><br/>
<div id="dvcountdown"></div>
<table id="table2" border='1'>
<tr>
<td><div id="1" onclick="CheckMatch(this)">A</div></td>
<td><div id="2" onclick="CheckMatch(this)">B</div></td>
<td><div id="3" onclick="CheckMatch(this)">C</div></td>
<td><div id="4" onclick="CheckMatch(this)">D</div></td>
<td><div id="5" onclick="CheckMatch(this)">E</div></td>
</tr>
<tr>
<td><div id="6" onclick="CheckMatch(this)">F</div></td>
<td><div id="7" onclick="CheckMatch(this)">G</div></td>
<td><div id="8" onclick="CheckMatch(this)">H</div></td>
<td><div id="9" onclick="CheckMatch(this)">I</div></td>
<td><div id="10" onclick="CheckMatch(this)">J</div></td>
</tr>
<tr>
<td><div id="11" onclick="CheckMatch(this)">K</div></td>
<td><div id="12" onclick="CheckMatch(this)">L</div></td>
<td><div id="13" onclick="CheckMatch(this)">M</div></td>
<td><div id="14" onclick="CheckMatch(this)">N</div></td>
<td><div id="15" onclick="CheckMatch(this)">o</div></td>
</tr>
<tr>
<td><div id="16" onclick="CheckMatch(this)">P</div></td>
<td><div id="17" onclick="CheckMatch(this)">Q</div></td>
<td><div id="18" onclick="CheckMatch(this)">R</div></td>
<td><div id="19" onclick="CheckMatch(this)">S</div></td>
<td><div id="20" onclick="CheckMatch(this)">T</div></td>
</tr>
<tr>
<td><div id="21" onclick="CheckMatch(this)">U</div></td>
<td><div id="22" onclick="CheckMatch(this)">V</div></td>
<td><div id="23" onclick="CheckMatch(this)">W</div></td>
<td><div id="24" onclick="CheckMatch(this)">X</div></td>
<td><div id="25" onclick="CheckMatch(this)">Y</div></td>
</tr>
<tr>
<td><div id="26" onclick="CheckMatch(this)">Z</div></td>
<td><div id="27" onclick="CheckMatch(this)">A</div></td>
<td><div id="28" onclick="CheckMatch(this)">B</div></td>
<td><div id="29" onclick="CheckMatch(this)">C</div></td>
<td><div id="30" onclick="CheckMatch(this)">D</div></td>
</tr>
</table>
</body>
</html> Result :
huhhhh... In my next article on this section(basic games), I'll come with code reduction of this game.
Thank you.
Excellent game.
ReplyDeleteThank you.
Deletenice game
ReplyDeleteThank you.
DeleteFull time pass, Mr. Sreekanth.
ReplyDeleteThank you.
Thank you.
Delete