Make Simple HTML & Jquery Math Games

0
21
views

make a webbased math game – Well, at today’s opportunity, I will share how to make a website-based math game. I made this game very simple, and it is quite challenging to play for friends who are well-known mathematicians for a long time ..


Broadly speaking, this game will ask players to enter their website, then select the level.
Level consists of 3 options. That is easy, medium and hard. There will be a time in each game. Well, the harder the level is chosen, the more time you get. But, the question given is certainly more difficult: V.


I think that’s enough so the explanation of the
game. It’s quite simple, but very interesting and can be the right material for all of you who want to learn to create a website, especially in the aspect of the client side.

More or less the appearance of the game like this …

Before starting
Gameplay


I will explain one by one the files in this game.
But if you want to directly download the source code, please download it at the end of this blog article, ok .. ^ _ ^

How to Make Simple Math-Based Web Games

1. Run
XAMPP and prepare a folder in htdocs. Suppose we named the folder “/ mathgame”

2. Create the index.html file and enter the following code mathgame / index.html



<! DOCTYPE html>


<html>


<head>

<title> Mini Math Game </ title>

<link rel = “stylesheet” type = “text / css” href = “assets / bootstrap / css / bootstrap.css”>

<script type = “text / javascript” src = “assets / jquery-3.3.1.min.js”> </ script>

<script src = “assets / script.js” charset = “utf-8”> </ script>


</ head>


<body>

<div id = “head”>

<div class = “container”>

<div class = “head-title”>

<h3 class = “page-header mt-4”> Math Game </ h3>

<p> Please input the form below and press <b> play </ b> button to play the game. </ p>

</ div>

<div class = “mt-5 head-component”>

<form id = “form” onsubmit = “return false” method = “post”>

<div class = “form-row”>

<div class = “form-group col-md-3”>

<label for = “username”> Username </ label>

<input type = “text” required autocomplete = “off” name = “username” id = “username” class = “form-control”>

</ div>

<div class = “form-group col-md-3”>

<label for = “level”> Level </ label>

<select id = “level” required class = “form-control”>

<option value = “”> – Select Level – </ option>

<option value = “1”> Easy </ option>

<option value = “2”> Normal </ option>

<option value = “3”> Hard </ option>

</ select>

</ div>

</ div>

<input type = “submit” id = “play” class = “btn btn-danger” value = “Play Game”>

</ div>

</ div>

</ form>

</ div>

<div id = “body” class = “mt-5”>

<div class = “container”>

<div class = “row”>

<div class = “col-md-6 pr-5”>

<div class = “body-title”>

<h4 id = “usernamectn”> </ h4>

<div class = “sub-title score-time” hidden> Point: <span class = “game-time text-success”> <b id = “point”> </ b> </ span> | <span id = “score-time”> </ span> </ div>

</ div>

<div class = “body-game mt-3 bg-secondary px-3 py-3 text-light” hidden>

<span> The Quiz </ span>

<div class = “game-quiz”>

<h2>

<span class = “number-1”> </ span>

<span class = “quiz-type”> <b id = “operation”> </ b> </ span>

<span class = “number-2”> </ span>

<span class = “additional”> </ span>

</ h2>

</ div>

<div class = “game-control mt-3”>

<form class = “form-vertical” onsubmit = “return false” id = “submitanswer”>

<input autofocus class = “answer form-control col-4 float-left” type = “number” name = “answer” placeholder = “Your answer”>

<button type = “submit” class = “btn btn-success”> Submit </ button>

</ form>

</ div>

</ div>

</ div>

<div class = “card col-md-6 pl-5 py-3 history” hidden>

<h4> History </ h4>

<ul class = “history-math”>

</ ul>

</ div>

</ div>

</ div>

</ div>


</ body>


</ html>


3. Create a
score-time.html file to display the score and the remaining time in the game.

mathgame / score-time.html


<span class = “game-time text-danger”> <b id = “time”> </ b> second left </ span>


<script type = “text / javascript”>


$ (“# time”). html (time);


time = time-1;


</ script>


4. Create a folder with the name
“asset” in the “mathgame” folder .

5. In the
asset folder , we will create a system from the web game. Create a file called script.js and enter the following script code.
mathgame / assets / script.js


$ (document) .ready (function () {


// Function Creates a Number Random


function randomangka () {


number1 = 1 + Math.floor (Math.random () * (max-min));


number2 = 1 + Math.floor (Math.random () * (max-min));


$ (“. number-1”). html (number1);


$ (“. number-2”). html (number2);


op = ‘* / + -‘;


op2 = op.charAt (Math.floor (Math.random () * op.length));


$ (“# operation”). html (op2);


$ (“. additional”). html (‘=?’);


}


$ (“# level”). change (function () {// Select Level


val = $ (“# level”). val ();


if (val === ‘1’) {


max = ’10’;


min = ‘1’;


time = ’30’;


}


else if (val === ‘2’) {


max = ‘100’;


min = ’10’;


time = ’60’;


}


else if (val === ‘3’) {


max = ‘1000’;


min = ‘100’;


time = ’90’;


}


});


$ (“# form”). submit (function () {// Ready to Play


// Time and Score


setInterval (function () {


$ (“# score-time”). load (‘score-time.html’);


if (time <= 0) {


alert (‘Game Over!’);


window.location = ‘. /’;


}


}, 1000);


// starting point


point = 0;


$ (“# point”). html (point);


// Turns off Username and Level Input


$ (“# username, #level”). attr (“disabled”, “1”);


// Changing the play button becomes disabled and changes to the word Enjoy the game!


$ (“# play”). attr (‘disabled’, ‘1’). val (‘Enjoy the game!’);


// Print username


$ (“# usernamectn”). html ($ (“# username”). val ());


// Displays hidden ones


$ (“. body-game, history. core-time”). removeAttr (‘hidden’);


// Make a Question


randomangka ();


// Check Answer


$ (“# submitanswer”). submit (function () {


if (op2 === ‘*’) {


answer = number1 * number2;


}


else if (op2 === ‘+’) {


answer = number1 + number2;


}


else if (op2 === ‘/’) {


answer = number1 / number2;


}


else if (op2 === ‘-‘) {


answer = number1-number2;


}


answersaya = $ (“. answer”). val ();


if (answersaya == answer) {// If it’s true


then = ‘Correct’;


dasuc = ‘success’;


point = point + 1;


}


else {// If False


then = ‘Wrong’;


dasuc = ‘danger’;


point = point-1;


}


$ (‘# point’). html (point);


$ (“. history-math”). append (‘<li>’ + number1 + ” + op2 + ” + number2 + ‘=’ + answersaya + ‘| <b class = “text -‘ + dasuc + ‘mr-3”> ‘+ then +’ </ b> answer: <b> ‘+ answer +’ </ b> </ li> ‘);


$ (“. answer”). val (”);


// Making the Problem Back


randomangka ();


});


});


});


Now we will copy-paste and enter the asset script from jquery js and bootstrap css.
Because the javascript language that we use is jquery with the addition of the css bootstrap design so that the game looks more handsome.


Please enter the
mathgame / asset folder .


To download all the files, you can click the link below.

Web-Based Math Game Downloads


Okay, so many articles today about
how to make simple games with html and javascript . May be useful! Thank you!

LEAVE A REPLY

Please enter your comment!
Please enter your name here