Do you want to play ?
Click Here
Source Code:
Step 1: Create Apex Class.
public class MemoryCheckController {
public integer counter {get;set;}
public integer totalCleared {get;set;}
public Integer secCount {get;set;}
public Set<Integer> alreadyUsed {get;set;}
public List<Integer> shuffledNumbersByCh {get;set;}
Public List<List<Integer>> numberList {get;set;}
public MemoryCheckController () {
totalCleared = 1;
shuffleNumbers();
}
public void shuffleNumbers() {
//set the range of numbers from to N
Integer lsitSize = 25;
alreadyUsed= new Set<Integer>();
shuffledNumbersByCh = new List<Integer>();
while(shuffledNumbersByCh .size() < lsitSize){
shuffledNumbersByCh .add(getRandom(lsitSize));
}
for(integer i=0; i< shuffledNumbersByCh.size(); i++) {
shuffledNumbersByCh[i] = shuffledNumbersByCh[i]+1;
}
system.debug('Final shuffled Numbers'+shuffledNumbersByCh );
numberList = new List<List<Integer>>();
List<Integer> rowList = new List<Integer>();
Integer j =0;
for(integer i =0; i<=24; i++) {
J= i+1;
rowList.add(shuffledNumbersByCh[i]);
if(Math.Mod(j,5) ==0) {
numberList.add(rowList);
rowList = new List<Integer>();
}
}
}
public Integer getRandom(Integer shuffledMaxNumber){
Integer randomNum;
do {
randomNum = (math.random() * shuffledMaxNumber).intValue();
} while (alreadyUsed.contains(randomNum));
alreadyUsed.add(randomNum);
return randomNum;
}
public void updateCount() {
counter = counter +1;
totalCleared = totalCleared +1;
system.debug('counter counter '+counter );
}
}
Step 2: Create visualforce Page
<apex:page controller="MemoryCheckController" sidebar="false" showHeader="false" id="page1">
<apex:form id="form1">
<style>
h1 {
color: red;
}
.grid-cell {
width: 50px;
height: 50px;
border-radius: 3px;
text-align:center;
text-color:red;
background: rgb(82, 128, 201);
}
</style>
<script>
var startTimer;
function fun(rowIndex,columnIndex) {
var myTable = document.getElementById('NumberTable');
var previousValue = document.getElementById('page1:form1:displayCounter').value;
var currentValue = myTable.rows[rowIndex].cells[columnIndex].innerHTML ;
if(currentValue == 1) {
startTime();
}
if(currentValue == +previousValue +1) {
myTable.rows[rowIndex].cells[columnIndex].innerHTML = '';
var totalClear = document.getElementById('page1:form1:displayCounter1').value;
if(totalClear == 25) {
var sec = document.getElementById("displayTime").innerHTML;
document.getElementById("displayTime").innerHTML = "Great ..You cleared all the numbers in "+sec+". Refresh the Browser Url to start new Game";
stopTime();
}
updateCounter();
}
}
function stopTime() {
clearInterval(startTimer);
}
function startTime() {
var sec = 0;
startTimer = setInterval(
function () {
sec = sec + 1;
document.getElementById("displayTime").innerHTML = sec + " Seconds!!!";
}, 1000);
}
</script>
<body >
<table border="1" cellpadding="0" cellspacing ="0" id="table1" style="padding-left:5px;">
<tr><td>
<table >
<tr><td >
<b style="color:red;">Game Instructions : </b>Touch all the numbers from 1 to 25 in Sequence to empty this Grid
The Counter will get started as soon as you start the game.Try to finish as early as possible.
</td><td><apex:image url="{!$Resource.KSK}" width="100%" height="70%"/></td>
</tr>
</table>
</td></tr>
<tr><td>Timer :<b id="displayTime" style="Color:red;"></b></td></tr>
<tr><td>
<table border="1" cellpadding="0" cellspacing = "0" id="NumberTable" width="100%" >
<apex:variable var="rowIndex" value="{!0}"/>
<apex:repeat value="{!numberList}" var="rowNums">
<tr style="border:1px"><apex:variable var="columnIndex" value="{!0}"/>
<apex:repeat value="{!rowNums}" var="num">
<td class="grid-cell" onClick="fun('{!rowIndex}','{!columnIndex}')"> {!num}</td>
<apex:variable var="columnIndex" value="{!columnIndex+1}"/>
</apex:repeat><apex:variable var="rowIndex" value="{!rowIndex+1}"/>
</tr>
</apex:repeat>
</table>
</td></tr></table>
<apex:inputtext value="{!counter}" id="displayCounter" style="display:none;"/>
<apex:inputtext value="{!totalCleared}" id="displayCounter1" style="display:none;"/>
</body>
<button onclick="window.location.reload()" id="startGame" style="display:none;">Start New Game</button>
<apex:actionFunction action="{!updateCount}" name="updateCounter" rerender="displayCounter,displayCounter1">
</apex:actionFunction>
</apex:form>
</apex:page>
Step3 : Create one public site in Salesforce and add vf page and controller to it.
Thats it.You can get that vf page url to play the simple Game.
Output :
