How to make a hangman game web development project using php or html?
<div class="wrapper">
<h1>Hangman</h1>
<h2>HomeworkLib game</h2>
<p>Employing the letters given below. you can use the clue or guess a word straight way </p>
</div>
<div class="wrapper">
<div id="buttons">
</div>
<p id="name of group "></p>
<div id="hold">
</div>
<p id="chancesyougot"></p>
<p id="clue">Clue -</p>
<canvas id="stickman">The browser should support HML5</canvas>
<div class="container">
<button id="clue">clue</button>
<button id="reset">start again</button>
</div>
</div>
css
/* Variabes */
$orange: #ffa600;
$green: #c1d72e;
$blue: #82d2e5;
$grey:#f3f3f3;
$white: #fff;
$base-color:$green ;
/* Mixin's */
@mixin transition {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
@mixin clear {
&:after {
content: "";
display: table;
clear: both;
}
}
@mixin box-size {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@mixin transition {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
@mixin fade {
-moz-transition: all 1s ease-in;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
@mixin opacity {
opacity:0.4;
filter:alpha(opacity=40);
@include fade;
}
@mixin corners ($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
-khtml-border-radius: $radius;
}
body {
background:$base-color;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande",
sans-serif;
color:$white;
height:100%;
text-align:center;
font-size:18px;
}
.wrappper{
@include clear;
width:100%;
margin:0 auto;
}
canvas{
color:$white;
border: $white dashed 2px;
padding:15px;
}
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
text-transform: uppercase;
margin:5px 0;
}
h1 {
font-size: 2.6em;
}
h2 {
font-size: 1.6em;
}
p{
font-size: 1.6em;
}
#alphabet {
@include clear;
margin:15px auto;
padding:0;
max-width:900px;
}
#alphabet li {
float:left;
margin: 0 10px 10px 0;
list-style:none;
width:35px;
height:30px;
padding-top:10px;
background:$white;
color:$base-color;
cursor:pointer;
@include corners(5px);
border: solid 1px $white;
&:hover{
background:$base-color;
border: solid 1px $white;
color:$white;
}
}
#my-word {
margin: 0;
display: block;
padding: 0;
display:block;
}
#my-word li {
position: relative;
list-style: none;
margin: 0;
display: inline-block;
padding: 0 10px;
font-size:1.6em;
}
.active {
@include opacity;
cursor:default;
&:hover{
@include fade;
@include opacity;
}
}
#mylives{
font-size:1.6em;
text-align:center;
display:block;
}
button{
@include corners (5px);
background:$base-color;
color:$white;
border: solid 1px $white;
text-decoration:none;
cursor:pointer;
font-size:1.2em;
padding:18px 10px;
width:180px;
margin: 10px;
outline: none;
&:hover{
@include transition;
background:$white;
border: solid 1px $white;
color:$base-color;
}
}
@media (max-width: 767px) {
#alphabet {
padding:0 0 0 15px;
}
}
@media (max-width: 480px) {
#alphabet {
padding:0 0 0 25px;
}
}
Javascript:
window.onload = function () {
var alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h',
'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',
't', 'u', 'v', 'w', 'x', 'y', 'z'];
var groups;
var groupselected;
var getclue ;
var word ;
var guess ;
var geusses = [ ];
var lives ;
var counter ;
var space;
var showLives = document.getElementById("chancesyougot");
var showCatagory = document.getElementById("group");
var getclue = document.getElementById("clue");
var showClue = document.getElementById("clue");
var buttons = function () {
myButtons = document.getElementById('buttons');
letters = document.createElement('ul');
for (var i = 0; i < alphabet.length; i++) {
letters.id = 'alphabet';
list = document.createElement('li');
list.id = 'letter';
list.innerHTML = alphabet[i];
check();
myButtons.appendChild(letters);
letters.appendChild(list);
}
}
var selectCat = function () {
if (groupselected === groups[0]) {
name of group .innerHTML = "The group is football team";
} else if (groupselected === groups[1]) {
name of group .innerHTML = "The group selected is Films";
} else if (groupselected === groups[2]) {
name of group .innerHTML = "The group selected is Cities";
}
}
result = function () {
wordHolder = document.getElementById('hold');
correct = document.createElement('ul');
for (var i = 0; i < word.length; i++) {
correct.setAttribute('id', 'my-word');
guess = document.createElement('li');
guess.setAttribute('class', 'guess');
if (word[i] === "-") {
guess.innerHTML = "-";
space = 1;
} else {
guess.innerHTML = "_";
}
geusses.push(guess);
wordHolder.appendChild(correct);
correct.appendChild(guess);
}
}
comments = function () {
showLives.innerHTML = "You have " + lives + " lives";
if (lives < 1) {
showLives.innerHTML = "Game Over";
}
for (var i = 0; i < geusses.length; i++) {
if (counter + space === geusses.length) {
showLives.innerHTML = "You Win!";
}
}
}
var animate = function () {
var drawMe = lives ;
drawArray[drawMe]();
}
canvas = function(){
myStickman = document.getElementById("stickman");
context = myStickman.getContext('2d');
context.beginPath();
context.strokeStyle = "#fff";
context.lineWidth = 2;
};
head = function(){
myStickman = document.getElementById("stickman");
context = myStickman.getContext('2d');
context.beginPath();
context.arc(60, 25, 10, 0, Math.PI*2, true);
context.stroke();
}
draw = function($pathFromx, $pathFromy, $pathTox, $pathToy) {
context.moveTo($pathFromx, $pathFromy);
context.lineTo($pathTox, $pathToy);
context.stroke();
}
frame1 = function() {
draw (0, 150, 150, 150);
};
frame2 = function() {
draw (10, 0, 10, 600);
};
frame3 = function() {
draw (0, 5, 70, 5);
};
frame4 = function() {
draw (60, 5, 60, 15);
};
torso = function() {
draw (60, 36, 60, 70);
};
rightArm = function() {
draw (60, 46, 100, 50);
};
leftArm = function() {
draw (60, 46, 20, 50);
};
rightLeg = function() {
draw (60, 70, 100, 100);
};
leftLeg = function() {
draw (60, 70, 20, 100);
};
drawArray = [rightLeg, leftLeg, rightArm, leftArm, torso, head, frame4, frame3, frame2, frame1];
check = function () {
list.onclick = function () {
var geuss = (this.innerHTML);
this.setAttribute("class", "active");
this.onclick = null;
for (var i = 0; i < word.length; i++) {
if (word[i] === geuss) {
geusses[i].innerHTML = geuss;
counter += 1;
}
}
var j = (word.indexOf(geuss));
if (j === -1) {
lives -= 1;
comments();
animate();
} else {
comments();
}
}
}
play = function () {
groups = [
["everton", "liverpool", "swansea", "chelsea", "hull", "manchester-city", "newcastle-united"],
["alien", "dirty-harry", "gladiator", "finding-nemo", "jaws"],
["manchester", "milan", "madrid", "amsterdam", "prague"]
];
groupselected = groups[Math.floor(Math.random() * groups.length)];
word = groupselected[Math.floor(Math.random() * groupselected.length)];
word = word.replace(/\s/g, "-");
console.log(word);
buttons();
geusses = [ ];
lives = 10;
counter = 0;
space = 0;
result();
comments();
selectCat();
canvas();
}
play();
clue.onclick = function() {
clues = [
["Based in manchester", " Most top ranked team"],
["Science-adventure film", "James camerron film", "Top five most earned move of all time"],
["South city in India", "Most cleanest city of Tamil Nadu", "Central governement defence factory"]
];
var catagoryIndex = groups.indexOf(groupselected);
var clueIndex = groupselected.indexOf(word);
showClue.innerHTML = "Clue: - " + clues [catagoryIndex][clueIndex];
};
// Reset
document.getElementById('reset').onclick = function() {
correct.parentNode.removeChild(correct);
letters.parentNode.removeChild(letters);
showClue.innerHTML = "";
context.clearRect(0, 0, 400, 400);
play();
}
}
How to make a hangman game web development project using php or html?
How to make a hangman game web development project using php or html?
PHP, HTML
I have this code in the picture below for a guess game.
I have a web development project.
First, it requires to have a website with a simple design like
the picture.
Second, after fill in the information in the text box, click
submit, the information will be save in the database using MySQL.
Must have a captcha (like Google Captcha) to reduce spam. Also,
must have a database password encryption. You can code this using
php, html for coding, and css for designing.
Third, code a php file to show all...
C++ Hangman (game) In this project, you are required to implement a program that can play the hangman game with the user. The hangman game is described in https://en.wikipedia.org/wiki/Hangman_(game) . Your program should support the following functionality: - Randomly select a word from a dictionary -- this dictionary should be stored in an ASCII text file (the format is up to you). The program then provides the information about the number of letters in this word for the user to...
Create a Hangman Game in C++ using Classes. The program doesn't need to have the hangman drawing, it just needs the following: - Ten 3-letter words - Keep track of everytime the player misses a letter - Simple and commented code
PHP & HTML please Design a web form that contains an input field. The input field will accept a list of words that are separated by comma "," . When user hits the submit button, show the results: 1. The count of words. Also show if the count is an even or odd number. 2. The count of words that contains letter 'a' or 'A'.
Create a simple commented C++ HANGMAN game using CLASSES using the following specifications: - The game must keep track of the player misses - It must ONLY use 10 three letter words - It does NOT need a graphical implementation
PHP Program Complete PHP code (and HTML Code) Using functions to abstract the logic away from the rest of your code makes it easier to read and maintain. PHP provides a number of useful functions as standard, and this week you will use some of these functions to obtain information. Create a program that compares two strings provided on an HTML form, and determine if the two strings are anagrams. The HTML page asks the user for the input strings,...
Create web pages for your database using PHP. You should have one page that will return all the information from the database. You should create additional pages that will allow you to do various queries of your database. You should be able to retrieve and insert data; also include functionality to delete data from your database. Create an html form that will allow you to enter in new information for the database. The information should be handled by a PHP...
PHP I am taking a Web Development class and brand new to PHP I am running a WAMP server on my local machine When I run my code from my WAMP server everything runs fine, but when I upload my code to the school's server I run into a problem: the if(isset($_POST['submit']){ //run code } else{ echo "uh oh something went wrong"; } the else portion is being ran. any ideas what can be wrong? i know these are very...