Home / Web / Game Assignment Using Javascript
game

Game Assignment Using Javascript

Create mind greasing game using JavaScript . Below line of code shows how to create game with the help of JavaScript.

JavaScript Code :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>

<style>
body{background-image: url(‘GameImages/Background.jpg’);height: 650px;width: 1260px;}
.timer_div{text-align: center;font-size: 50px;}
.mainDiv{ background-image: url(‘GameImages/DivBackground.jpg’);height: 614px; width: 614px;border: 1px solid black;margin: 0px auto;}
.imageDiv{height: 100px;width: 100px;border: 1px solid red;float: left;}
.contentImage{display: none;}
.gameName{text-align:center;font-family: Jokerman;}
</style>
<script >
var clickedImageCounter = 0;
var FinishTime = 0;
var totalImageDisplayed = 0;
var previouslyClickedImageNumber = 0;
var seconds = 0; var minutes = 0; var hours = 0;
var firstClick = 0;

//it will start the game timer.
function StartTimer() {
FinishTime = setInterval(function () {
UpdateTime();

}, 1000);
function UpdateTime() {
if (seconds >= 59) {
minutes = minutes + 1;
seconds = 0;
}
if (minutes > 59) {
hours = hours + 1;
seconds = 0; minutes = 0;
}
document.getElementById(‘timer_div’).innerHTML = hours + “:” + minutes + “:” + seconds++;
}
}

//it will stop the timer as game finished.
function StopTimer() {
clearInterval(FinishTime);
alert(“You have Completed game in ” + document.getElementById(‘timer_div’).innerHTML);
var choice = confirm(“Do you want to play again?”);
if (choice) {
location.reload();
}
else {
window.close();
}
}

//this will add <div> and <img> dynamically to main<div>.
function AddingTagsToMainDiv() {
var row = 6;
var generatedScrambledArray = shuffleArrayElement();
var mainDiv = document.getElementById(“mainDiv”);
var imageDivArrayByNameIndexing = 0;

for (var rowIndex = 0; rowIndex < row; rowIndex++) {
for (var columnIndex = 0; columnIndex < row; columnIndex++) {
var imageDiv = document.createElement(‘div’);
imageDiv.setAttribute(“id”, “div” + rowIndex + “” + columnIndex);
imageDiv.setAttribute(“class”, “imageDiv”);
//imageDiv.setAttribute(“name”, “imageDiv”);
imageDiv.setAttribute(“onclick”, “ImageClicked(this)”);
mainDiv.appendChild(imageDiv);
var image = document.createElement(‘img’);
image.setAttribute(“class”, “contentImage”);
image.setAttribute(“name”, “contentImage”);
image.setAttribute(“src”, ‘GameImages/’ + generatedScrambledArray[imageDivArrayByNameIndexing] + ‘.jpg’);
image.setAttribute(“alt”, generatedScrambledArray[imageDivArrayByNameIndexing] + ” image”);
image.setAttribute(“ImageNumber”, generatedScrambledArray[imageDivArrayByNameIndexing]); //user-defined attribute.
image.setAttribute(“id”, generatedScrambledArray[imageDivArrayByNameIndexing]);
imageDiv.appendChild(image);
imageDivArrayByNameIndexing = imageDivArrayByNameIndexing + 1;
}
}
}
function ImageClicked(clickedDiv) {
firstClick++;
//it will start the timer only when clicked first <div>.
if (firstClick == 1) {
StartTimer();
}
var currentChildImage = clickedDiv.childNodes[0];
var currentImageCounter = currentChildImage.getAttribute(“ImageNumber”);
clickedImageCounter = clickedImageCounter + 1;
var isImagesSame = false;

//it will check whether previous and current images are in pair or not.
if (clickedImageCounter % 2 == 0) {
currentChildImage.style.display = “block”;
var isImagesSame = IsImagesSameOrNot(currentImageCounter, previouslyClickedImageNumber);
if (isImagesSame) {
currentChildImage.parentNode.removeAttribute(“onclick”);
document.getElementById(previouslyClickedImageNumber).parentNode.removeAttribute(“onclick”);
totalImageDisplayed = totalImageDisplayed + 2;
if (totalImageDisplayed == 36) {
StopTimer();
}
}
else {
var preiouslyClickedChildImage = document.getElementById(previouslyClickedImageNumber);
setTimeout(function () { HidingImagesWhenNotMatched(currentChildImage, preiouslyClickedChildImage) }, 100);
}
}
else {
previouslyClickedImageNumber = parseInt(currentChildImage.getAttribute(“ImageNumber”));
currentChildImage.style.display = “block”;
}
}

//it will hide the previous image if current image is unmatching.
function HidingImagesWhenNotMatched(currentChildImage, preiouslyClickedChildImage) {
currentChildImage.style.display = “none”;
document.getElementById(previouslyClickedImageNumber).style.display = “none”;
}

//it will check whether previous and current image matches or not.
function IsImagesSameOrNot(currentImageCounter, previouslyClickedImageNumber) {
var isImagesSame = false;
if (previouslyClickedImageNumber >= 1 && previouslyClickedImageNumber <= 18) {
if (currentImageCounter == (previouslyClickedImageNumber + 18)) {
isImagesSame = true;
} else {
isImagesSame = false;
}
} else {
if (currentImageCounter == (previouslyClickedImageNumber – 18)) {
isImagesSame = true;
} else {
isImagesSame = false;
}
}
return isImagesSame;
}

//it will scramble the order of images in each new game.
function shuffleArrayElement() {
var arrayForScrambling = [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ’10’, ’11’, ’12’, ’13’, ’14’, ’15’, ’16’, ’17’, ’18’, ’19’, ’20’, ’21’, ’22’, ’23’, ’24’, ’25’, ’26’, ’27’, ’28’, ’29’, ’30’, ’31’, ’32’, ’33’, ’34’, ’35’, ’36’];
var counter = arrayForScrambling.length, temporaryVariable, randomNumber;
while (counter > 0) {
randomNumber = Math.ceil(Math.random() * counter–);
temporaryVariable = arrayForScrambling[counter];
arrayForScrambling[counter] = arrayForScrambling[randomNumber];
arrayForScrambling[randomNumber] = temporaryVariable;
}
return arrayForScrambling;
}

</script>
</head>
<body onload=”AddingTagsToMainDiv()”>
<h1 class=”gameName”>
Mind-Greasing Game
</h1>
<div id=”mainDiv” class=”mainDiv”>
</div>
<div class=”timer_div”>
<br />
Timer – <span id=”timer_div” class=”timer_div”></span>
</div>
</body>
</html>

Code Output:

Game-Assignment.html Game Assignment  Using Javascript Web

Download complete source code 

About Helpservices

About This site (allhelpservices.com) is dedicated to helping other bloggers learn the skills of blogging, wordpress, education, technology, social media sharing , SEO, Electronics, Earn Money From Blogging, Web hosting and web share their own experiences and promote the blogging medium. We started Allhelpservices in August 2015 mainly because we wanted to keep a record of what we wear learning from development and because we wanted to connect with other learners.

Check Also

benifits

THE BENEFITS OF GOOGLE WEBMASTER TOOLS

Google Webmaster Tools (GWT) is the primary mechanism for Google to communicate with webmasters. Google ...

One comment