Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,153,504 members, 7,819,828 topics. Date: Tuesday, 07 May 2024 at 01:50 AM

Building A Word Scramble Game With Javascript (text Based) - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Building A Word Scramble Game With Javascript (text Based) (5256 Views)

Please Help A Script Kiddie Out With Javascript / Tic Tac Toe Online Game With AI / How To Get A User IP Address With Javascript (2) (3) (4)

(1) (Reply) (Go Down)

Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 10:17am On Apr 30, 2015
Hello all, I've been learning JavaScript for a while now and a few weeks back I was able to build my first program with it (a scramble word game). Here, I hope to document the process and also maybe teach newbies a thing or two about JavaScript (I don't think pros would learn anything new as I don't even consider myself a pro yet).

The game logic is simple, a word appears on screen all jumbled up and misspelt and it is the player's job to figure out the correct spelling of the word. so for example a word like 'eqlotenu' could appear on screen and the user has to figure out that the correct spelling is 'eloquent' and at that case the user's score is increased and a new word appears on screen until a max list of words has been reached (in my own case, 10) and at that point, the user gets theirs score displayed to them.


By the end, I'll post a working demo to google drive so that every other person can interact and play with it.

Let's get started.
Re: Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 10:21am On Apr 30, 2015
Before we get started with the core JavaScript code, we need to make sure that we have the HTML all fired up and ready to go. I also made use of bootstrap for the layout of elements on the page and we'll be writing a few sass/css of our own for some custom touches.
Re: Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 10:31am On Apr 30, 2015
Let's get our project folders all fired up and ready as well, this is how the project directory will / should look like

project-name
----------index.html
----------assets
-------------------css (will contain our style.css and bootstrap's css)
-------------------sass (Will contain style.scss which compiles to style.css)
-------------------js (will contain bootstrap's javascript file and jQuery because bootstrap requires jQuery and we'll be using bootstrap's modal components. Will also contain our custom scripts for the game)
-------------------img (will contain a fancy gif image used for a fancy animation (not really necessary) )
Re: Building A Word Scramble Game With Javascript (text Based) by Nastydroid(m): 10:46am On Apr 30, 2015
following cool
Re: Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 10:48am On Apr 30, 2015
The HTML page is pretty basic but I will try to explain as much as I can. Here's how it should look like



<!DOCTYPE html> <!--This is the HTML5 Doctype declaration, pretty basic stuff, you're all HTML ninjas out there-->
<html lang="en">
  <head>
    <meta charset="utf-8"> <!--Here I declare the  character set for the document. This should preferably come immediately after the head element -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--This forces Internet Explorer to display the document with latest standards-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!--Responsive meta component for responsive stuff, pretty basic-->
    <title>FIx The Word!!</title> 

    
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <!--Here we link to bootstrap's core css file. Relative path links-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <!-- Link to font awesome stylesheet, used for icon fonts, super awesome -->
    <link rel="stylesheet" href="assets/css/style.css"> <!--Here we link to our own css stylesheet. We don't link to the sass file but to the generated css file-->
  </head>
  
  <body>
    <div class="container-fluid"> <!-- Wraps the entire page in a container, this just sets the width of the entire page -->
	
	 <section class="main_section">
			<div class="row">
				<div class="col-sm-6 col-sm-push-3">
					<h1 class="text-center">Fix the word!</h1>
					
					<div class="how-to-play text-center">
						<p><strong>Premise: </strong>The evil king 'scatter scatter' has jumbled up the words, your mission is to fix the words by filling in the correct word!</p>
						
						<p><strong>How to play:</strong> The goal of the game is simple; The words that appear on screen are not in correct order and as such don't make much sense, you are to fill in the correct form of the word.
						</p>
						<p>Use <strong>'Next'</strong> to move to the next word </p>
						<p>
							Use<strong>'Clear Field'</strong> 
							if you need to delete your value and replace it with a newer one.
						</p>
						<p>Use<strong>'Hint'</strong> if you get stuck and need a little help on a particular word</p>
						
						<p><strong>Points: </strong>Each correct answer gets you one point</p>
						<p><strong>Timed: </strong>Yes! You have 5 minutes to fix each word.</p>
					</div>
					
					<div class="start-game-btn-wrapper text-center">
						<button class="btn btn-success launch-game">
							<span class="fa fa-car"></span> Start
						</button>
					</div>
					
					<div class="game">
					<div class="row">
						<div class="col-sm-12 text-center">
							<p class="lead">
								<span class="timer">05:00</span> 
								<span class="rem-time">minutes remaining</span>
							</p>
						</div>
						<div class="col-sm-8">
							<h3>Jumbled word: <strong class="jumbled-word"></strong></h3>
						</div>
						
						<div class="col-sm-4">
							<div class="alert alert-success alert-dismissible text-center" role="alert">
  								<strong class="success-msg"></strong>
							</div>
							
							<div class="alert alert-danger alert-dismissible text-center" role="alert">
  								<strong class="warning-msg"></strong>
							</div>
						</div>
					</div>
						
						
						<div class="form-group">
							<input type="text" name="user-answer" class="form-control" placeholder="Enter your answer">
						</div>
						<button class="btn btn-success next" disabled>Next</button>
						<button class="btn btn-danger clear">Clear Field</button>
						<button class="btn btn-info hint pull-right">Hint</button>
						<p class="pull-right hint-msg"><em>Word begins with:</em> 
							<strong class="first-letter"></strong><br>
							<em>Ends with:</em> <strong class="last-letter"></strong></p>
						
						<div class="result">

						<div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="resultModal" aria-hidden="true">
  						<div class="modal-dialog">
    						<div class="modal-content">
      							<div class="modal-header">
        							<h4 class="modal-title">Your Score</h4>
      							</div>
      							
      							<div class="modal-body">
      								<div id="resultText">
      									<h4 class="result_title"> </h4>
      									<p class="additional_notes"></p>
      									
      									<div class="word-list">
      										<p>The words were:</p>
      									</div>
      									
      									<div>
      										<p><small><strong>You can click on each word to find out it's meaning.</strong></small></p>
      									</div>
      								</div>
      							</div>
      							
      							<div class="modal-footer">
        							<button type="button" class="btn btn-default close-modal" data-dismiss="modal">Close</button>
        							<button type="button" class="btn btn-primary replay">Play Again</button>
      							</div>
    						</div>
 		 				</div>
						</div>
						</div>
						
					</div>
				</div>
			</div>
    </section>
		
    </div>
   
<!-- As you can see, all my scripts are placed at the bottom, this is good for performance as it enables all assets to be loaded before the browser starts parsing script files -->
    <script src="assets/js/jquery-1.11.1.min.js"></script> <!-- Link to jQuery File -->
    <script src="assets/js/bootstrap.min.js"></script>  <!-- Link to Bootstrap's js file -->
    <script src="assets/js/wordDatabase.js"></script> <!-- A js file containing almost 10, 000 words -->
    <script src="assets/js/game.js"></script> <!-- Our main js file -->
 
  </body>
</html>


So we got the basic HTML up and running, now for the sass file (I'll also mention why I'm using sass instead of plain old css)
Re: Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 10:51am On Apr 30, 2015
Nastydroid:
following cool
Cool, please feel free to ask any questions about any part that feels confusing or isn't clear and I'll try my possible best to explain to the best of my ability.
Re: Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 11:27am On Apr 30, 2015
So onto the sass file but before that, let me take some time to preach the gospel of sass to everyone grin grin

Sass stands for semantically awesome style sheet

It was invented by Hampton Catlin who also created the haml markup language.

It is a super-set of css. What this means is that by writing css, you are totally writing valid sass. Sass just builds on top of css and gives css super powers.

So, why Sass

Well sass gives you the ability to use css like a programming language, we are talking about stuffs like variables, functions, mixins, loops, math and the likes. It also allows nesting of selectors and rules which help saves you as a developer some keystrokes. Enough talk, an example:

in plain old css, you could write something like this:

.container .wrapper > a {
    color: #fff;
    background-color: #002660;
    border: 3px solid #002660;
    border-radius: 15px;
}
.container .wrapper > a span {
    transform: scale(1.3);
}
div .widget {
    color: #fff;
}
div .widget::before {
    content: '';
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #002660;
}


You can see from this, there's a lot of repetition going on especially with the color value #002660, also we have to write those descendant rules all the time. Also imagine we have a very large style-sheet and that declaration #002660 happens in hundred places, with css, we would have to find every instance of that value and manually replace it (very.......... tiresome, trust me). Let's refactor that example with sass instead:


$brand-color: #002660; // We declare a variable with the dollar symbol and then the name of the variable
$white: #fff;

.container { // we can also nest rules and so every related group of selectors can be grouped together
    .wrapper {
        > a {
                color: $white;
                background-color: $brand-color;
                border: 3px solid $brand-color;
                border-radius: 15px;
                
                span {
                       transform: scale(1.1);
                }
         }
    }
}
div {
    .widget {
        color: $white;

        &::before { // the & symbol is a parent selector, so this refers to div .widget::before
                content: '';
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
                border-bottom: 12px solid $brand-color;
        }
    }
}


This might feel a bit strange but after some time it will only feel natural. The variable $brand-color holds the color value #002660 and can be re-used anywhere in our style-sheet and if for some reason we decide, we don't like the color anymore, we can easily change it from the variable and it will be reflected in the entire style-sheet. The color value #fff has also been stored in the variable $white and can be reused as well, if I decide that I want my white to be #f5f5f5 instead, I can easily change it and it will be reflected throughout the entire style-sheet.

This is not a sass tutorial so I will encourage any interested person to go check out the docs at sass-lang.com and also thesassway.com for neat things that can be achieved with sass.

Now unto the main course.........
Re: Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 10:17pm On Apr 30, 2015
I'll have to continue tomorrow
Re: Building A Word Scramble Game With Javascript (text Based) by Nmeri17: 10:29pm On Apr 30, 2015
hmmmmmmm *strokes beard
Re: Building A Word Scramble Game With Javascript (text Based) by Urine: 6:21pm On May 01, 2015
@blueyedgeek, good job. Why not post screen shots from your computer, reading through the lines will like this will be hard for folks.
Re: Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 7:54pm On May 01, 2015
Urine:
@blueyedgeek, good job. Why not post screen shots from your computer, reading through the lines will like this will be hard for folks.
I'll be posting a full link to google drive with the full working code but I guess posting screenshots is a better idea than manually typing out the codes again. Thanks.
Re: Building A Word Scramble Game With Javascript (text Based) by Nmeri17: 8:00pm On May 01, 2015
blueyedgeek:
I'll be posting a full link to google drive with the full working code but I guess posting screenshots is a better idea than manually typing out the codes again. Thanks.
consider those surfing on mobile 90% of the time. they'll have to DL each image
Re: Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 8:04pm On May 01, 2015
Nmeri17:
consider those surfing on mobile 90% of the time. they'll have to DL each image
you're right as well, I'll have to take that into account as well.
Re: Building A Word Scramble Game With Javascript (text Based) by Urine: 8:41pm On May 01, 2015
blueyedgeek:
I'll be posting a full link to google drive with the full working code but I guess posting screenshots is a better idea than manually typing out the codes again. Thanks.
cool cool cool cool
Re: Building A Word Scramble Game With Javascript (text Based) by Nobody: 2:07pm On May 02, 2015
*Spreads mat*
Re: Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 6:54pm On May 03, 2015
Before I continue, let me start off by posting the link to a working demo on google drive to make everything easier to follow.


Here is the link:

h t t p : // b i t . l y /1 K E R z 3 j

Modified: I was unable to link directly because of some nairaland restrictions. Please copy and paste (also remember to trim out all white space in the link).

2 Likes 1 Share

Re: Building A Word Scramble Game With Javascript (text Based) by DAvIt0(m): 9:25pm On May 03, 2015
Good stuff @blueyedgeek
Re: Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 7:09pm On May 05, 2015
@DAvit0, you specifically requested that I put this up on github and I've finally gotten around to doing it.

here's the link

Fix-the-word github
Re: Building A Word Scramble Game With Javascript (text Based) by blueyedgeek(m): 9:45pm On Jul 29, 2015
Anyone still interested in this?
Check it out on github
https://github.com/blueyedgeek/Fix-the-word

(1) (Reply)

Let's Be Honest Php Sucks When Building Enterprise Applications / If You Are A Developer, Take This Survey And Win $1000(New Survey ) / What Is Your Favorite IDE [lately]?

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 52
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.