Transferred from GitHub
This commit is contained in:
parent
14d77188a5
commit
07d966ea00
36 changed files with 1713 additions and 0 deletions
39
Base/index.html
Executable file
39
Base/index.html
Executable file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!-- Old Code -->
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- CSS only -->
|
||||||
|
<link rel="stylesheet" href="tools/bootstrap.css">
|
||||||
|
<!-- Styles -->
|
||||||
|
<link rel="Stylesheet" href="styles/styles.css">
|
||||||
|
<title>Word Game</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="text-align: left;">
|
||||||
|
<img id="bkgImg" src="res/background.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h1>Word Game</h1>
|
||||||
|
<h2 id="scrambled">SCRAM</h1>
|
||||||
|
<div id="formDiv" class="mx-auto container p-2">
|
||||||
|
<form class="text-light text-center" method="get" action="" autocomplete="off">
|
||||||
|
<div class="mb-3">
|
||||||
|
<input type="text" id="guess" placeholder="Enter your word here.">
|
||||||
|
</div>
|
||||||
|
<input type="submit" class="mbtn" id="finalButton" value="Guess">
|
||||||
|
<input type="button" class="mbtn" id="hintButton" value="Hint">
|
||||||
|
<input type="button" class="mbtn" id="skipButton" value="Skip">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<p id="hint" class="showPrompt">Response</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="tools/bootstrap.js"></script>
|
||||||
|
<script src="tools/jquery.js"></script>
|
||||||
|
<script src="res/words.js"></script>
|
||||||
|
<script src="scripts/systems.js"></script>
|
||||||
|
<script src="scripts/graphics.js"></script>
|
||||||
|
<script src="scripts/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
Base/res/background.jpg
Normal file
BIN
Base/res/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
9
Base/res/words.js
Executable file
9
Base/res/words.js
Executable file
|
|
@ -0,0 +1,9 @@
|
||||||
|
var all_words =
|
||||||
|
["accommodate","accustomed","acquisition","adolescent","amateur","annoyance","antidote","apology","applicant","architect","asterisk","bachelor","belligerent","biannual","brilliance","cameos","catastrophe","characteristic","circumference","colleague","confiscation","considerable","continuous","counsel","critique","deficiency","deterrent","dilemma","discrepancy","endeavor","equilibrium","excessive",
|
||||||
|
"extricate","fiasco","flamboyant","frostbitten","grotesque","hazardous","horrific","inconvenience","inevitable","insufficient","internally","legitimate","longevity","luncheon","malicious","mercenary","meticulous","miscellaneous","necessity"
|
||||||
|
,"newsstand","obesity","obstinate","optimism","pageant","parliament","permeate",
|
||||||
|
"personification","plaintiff","potential","predecessor","procrastinate","protein","questionnaire","recurrent","religious","sacrificial","schedule","scholar","shrine","snobbery","studious","surmise","taboo","tyranny","undernourished","unique","unsanitary","vacillate","vessel","vitamin","voracious","withhold","abstain","acoustics","acquittal","advantageous","amnesty","anonymous","antiseptic","apostrophe","approximate","arrangement","asthma","bankruptcy","berserk","bimonthly","budge","capably ","chameleon","chauffeur","collaborate","colonel","conscious","contagious","correlation","criticism","crypt","desirable","diagnosis","disbursement","dominance","envious","erroneous","existence","facade","fibrous","forgery",
|
||||||
|
"glamorous","gymnasium","headquarters","hospitality","indulgence","innumerable",
|
||||||
|
"integrity","interrogate","leisure","lucrative","luxurious","malignant","mesmerize","metropolitan","mischievous","negligence","nostalgia","obscure","occurred","optimistic","parachute","penitentiary","perseverance","persuade","pneumonia","precipice","preferably","propeller","pseudonym","radioactive","rehearsal","roommate","sanctuary","scheme","semester","shuddering","solitary","subtlety","susceptible","technically","unacceptable","unduly","universal","utopia","venom","vigilant","vivacious","voucher","accumulate","acquaintance","adolescence","aerial","anecdote","antecedent","anxious","appendixes","archaic","asphalt","awkward","barometer","besieged","biographical","burglary","caricature","chandelier","chrysanthemum","collateral","confiscate","consequence","controversy","council","criticize","cylinder","desolate","dialogue","discernible","embargo","epidemic","escalator","extremity","fashionable","fiery","frivolous","gorgeous","haphazard","honorary","incidentally","inept","insistent","intermittent","jewelry","lieutenant","lunar", "malady","melodious","meteor","minimize","misdemeanor","neutral","noticeable","obsolete","ominous","outrageous","paralysis","perceive","personality","phenomenon","politician","precocious","prestigious","prosperous","psychiatrist","rampage",
|
||||||
|
"relevant","sacrifice","scandalized","schism","serviceable","sieve","sophomore",
|
||||||
|
"suburban","suspicious","technology","unconscious","unenforceable","unpredictable","vaccinate","vertigo","villain","vocalize","vulnerable"];
|
||||||
0
Base/scripts/graphics.js
Normal file
0
Base/scripts/graphics.js
Normal file
166
Base/scripts/script.js
Executable file
166
Base/scripts/script.js
Executable file
|
|
@ -0,0 +1,166 @@
|
||||||
|
// Variables
|
||||||
|
// --Constant
|
||||||
|
const retryDelay = 2500;
|
||||||
|
var allWords = ["no","words"];
|
||||||
|
// --Items
|
||||||
|
let usrField = $("form");
|
||||||
|
let usrButton = $("#finalButton");
|
||||||
|
let skpButton = $("#skipButton");
|
||||||
|
let hinButton = $("#hintButton");
|
||||||
|
let scrText = $("#scrambled");
|
||||||
|
let gusText = $("#guess");
|
||||||
|
let hinText = $("#hint");
|
||||||
|
// --Preset
|
||||||
|
var usrTries = 0;
|
||||||
|
var usrIndex = 0;
|
||||||
|
var usrScrambled = "";
|
||||||
|
// --Thread
|
||||||
|
var delay = null;
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function getWords(){
|
||||||
|
retrieveWords(allWords);
|
||||||
|
}
|
||||||
|
function checkWord(){
|
||||||
|
// Set the word to a lowercase value
|
||||||
|
let word = gusText.val().toLowerCase();
|
||||||
|
|
||||||
|
// Disable the input to the input field
|
||||||
|
gusText.attr("disabled", true);
|
||||||
|
hinText.attr("hidden", false);
|
||||||
|
|
||||||
|
gusText.attr("class", "hideBox");
|
||||||
|
|
||||||
|
// Checking if the word is equal to what we want
|
||||||
|
if(word == allWords[usrIndex]){
|
||||||
|
// Telling the user we won! And restarting..
|
||||||
|
hinText.text("Correct! You win!");
|
||||||
|
delay = window.setInterval(onStart, retryDelay);
|
||||||
|
}
|
||||||
|
// Ehh, Looks like you'll need to try again
|
||||||
|
else{
|
||||||
|
switch(usrTries){
|
||||||
|
// This is the first mess up
|
||||||
|
case 0:
|
||||||
|
hinText.text("Incorrect! You have one more try.");
|
||||||
|
delay = window.setInterval(updateDisplay, retryDelay);
|
||||||
|
break;
|
||||||
|
// This is the second mess up
|
||||||
|
case 1:
|
||||||
|
hinText.text("Sorry, your word was " + allWords[usrIndex]);
|
||||||
|
delay = window.setInterval(onStart, 2500);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function updateDisplay(){
|
||||||
|
// Resetting all values to defaults
|
||||||
|
gusText.val("");
|
||||||
|
gusText.attr("disabled", false);
|
||||||
|
hinText.html("");
|
||||||
|
hinText.attr("hidden", true);
|
||||||
|
usrButton.attr("disabled", false);
|
||||||
|
gusText.attr("class", "");
|
||||||
|
if(delay != null){
|
||||||
|
window.clearInterval(delay);
|
||||||
|
delay = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function checkBoldWord(wLetter, matches){
|
||||||
|
var counts = 0;
|
||||||
|
|
||||||
|
for(var i = 0; i < matches.length; i++){
|
||||||
|
if(matches[i] == wLetter){counts += 1; break;}
|
||||||
|
}
|
||||||
|
|
||||||
|
return counts > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onStart(){
|
||||||
|
// Getting words
|
||||||
|
getWords();
|
||||||
|
|
||||||
|
if(delay != null) {
|
||||||
|
window.clearInterval(delay);
|
||||||
|
delay = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Updating the new word and stuff
|
||||||
|
hinButton.attr("disabled", false);
|
||||||
|
usrIndex = Math.floor(Math.random() * allWords.length);
|
||||||
|
scrText.text(scramble(allWords[usrIndex]));
|
||||||
|
usrScrambled = scrText.text();
|
||||||
|
usrButton.attr("disabled", false);
|
||||||
|
|
||||||
|
// IMPORTANT FOR RESTARTING CURRENT GAME!
|
||||||
|
// Change the amount of guesses back to !!ZERO!!
|
||||||
|
usrTries = 0;
|
||||||
|
|
||||||
|
// Updating display
|
||||||
|
updateDisplay();
|
||||||
|
}
|
||||||
|
function onType(event){
|
||||||
|
var typedWord = event.target.value.toLowerCase().split("");
|
||||||
|
var wantedWord = allWords[usrIndex].toLowerCase().split("");
|
||||||
|
var matches = [];
|
||||||
|
|
||||||
|
for(var a = 0; a < typedWord.length; a++){
|
||||||
|
for(var b = 0; b < wantedWord.length; b++){
|
||||||
|
if(typedWord[a] == wantedWord[b]){
|
||||||
|
matches.push(typedWord[a]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var result = "";
|
||||||
|
let wantedTag = "u";
|
||||||
|
|
||||||
|
for(var i = 0; i < usrScrambled.length; i++){
|
||||||
|
if(checkBoldWord(usrScrambled[i], matches)){
|
||||||
|
result = result + "<" + wantedTag + ">" + usrScrambled[i] + "</" + wantedTag + ">";
|
||||||
|
//matches.splice(result.d, 1);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
result = result + usrScrambled[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
scrText.html(result);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Events
|
||||||
|
window.addEventListener("load", function(){
|
||||||
|
// The background
|
||||||
|
let _bg = document.getElementById("bkgImg");
|
||||||
|
|
||||||
|
// The rest of the stuff
|
||||||
|
onStart();
|
||||||
|
});
|
||||||
|
usrField.on("submit", function(event){
|
||||||
|
// Stop page from reloading on submit
|
||||||
|
// REALLY REALLY ANNOYING..
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// Disable the button so the player can see
|
||||||
|
// or learn what they got right or wrong.
|
||||||
|
usrButton.attr("disabled", true);
|
||||||
|
checkWord();
|
||||||
|
|
||||||
|
// Add some tries!
|
||||||
|
usrTries += 1;
|
||||||
|
});
|
||||||
|
gusText.on("input", onType);
|
||||||
|
hinButton.on("click", function(event){
|
||||||
|
// Displaying a hint
|
||||||
|
if(delay != null) {return;}
|
||||||
|
|
||||||
|
// This is something cool!
|
||||||
|
hinText.html("The first two letters of your word are <strong>" + allWords[usrIndex][0] + allWords[usrIndex][1] + "</strong>");
|
||||||
|
hinText.attr("hidden", false);
|
||||||
|
hinButton.attr("disabled", true);
|
||||||
|
|
||||||
|
delay = window.setInterval(updateDisplay, retryDelay);
|
||||||
|
});
|
||||||
|
skpButton.on("click", function(){
|
||||||
|
onStart();
|
||||||
|
})
|
||||||
19
Base/scripts/systems.js
Executable file
19
Base/scripts/systems.js
Executable file
|
|
@ -0,0 +1,19 @@
|
||||||
|
// Functions
|
||||||
|
function scramble(word){
|
||||||
|
var tWord = word.split("");
|
||||||
|
var result = "";
|
||||||
|
|
||||||
|
while(tWord.length > 0){
|
||||||
|
let rInd = Math.floor(Math.random() * tWord.length);
|
||||||
|
result += tWord[rInd];
|
||||||
|
tWord.splice(rInd, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
function retrieveWords(wordList){
|
||||||
|
// Going through all index's
|
||||||
|
for(var i = 0; i < all_words.length; i++){
|
||||||
|
wordList.push(all_words[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
148
Base/styles/styles.css
Executable file
148
Base/styles/styles.css
Executable file
|
|
@ -0,0 +1,148 @@
|
||||||
|
@keyframes slidePrompt{
|
||||||
|
0%{
|
||||||
|
color: transparent;
|
||||||
|
width: 0%;
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
35%{
|
||||||
|
color: rgb(202, 202, 202);
|
||||||
|
width: 40%;
|
||||||
|
margin-left: 28%;
|
||||||
|
}
|
||||||
|
75%{
|
||||||
|
color: rgb(202, 202, 202);
|
||||||
|
width: 40%;
|
||||||
|
margin-left: 28%;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
color: transparent;
|
||||||
|
width: 0%;
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes hideInput{
|
||||||
|
0%{
|
||||||
|
background-color: rgb(39, 39, 39);
|
||||||
|
border: 2px solid rgb(53, 53, 179);
|
||||||
|
color: rgb(202, 202, 202);
|
||||||
|
height: 3rem;
|
||||||
|
}
|
||||||
|
35%{
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0px solid transparent;
|
||||||
|
color: transparent;
|
||||||
|
height: 0rem;
|
||||||
|
}
|
||||||
|
75%{
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0px solid transparent;
|
||||||
|
color: transparent;
|
||||||
|
height: 0rem;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
background-color: rgb(39, 39, 39);
|
||||||
|
border: 2px solid rgb(53, 53, 179);
|
||||||
|
color: rgb(202, 202, 202);
|
||||||
|
height: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
background-color: rgb(39, 39, 39);
|
||||||
|
color: rgb(202, 202, 202);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enclosed{
|
||||||
|
border: 2px solid rgb(180, 180, 180);
|
||||||
|
width: 20%;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.enclosed input{
|
||||||
|
display: block;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
.mbtn{
|
||||||
|
background-color: rgb(39, 39, 39);
|
||||||
|
border: 2px solid rgb(103, 103, 247);
|
||||||
|
color: rgb(202, 202, 202);
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
padding: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-left: -2%;
|
||||||
|
margin-right: 2%;
|
||||||
|
|
||||||
|
width: 12rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
|
||||||
|
transition-duration: 500ms;
|
||||||
|
}
|
||||||
|
.mbtn:disabled{
|
||||||
|
background-color: transparent;
|
||||||
|
color: transparent;
|
||||||
|
|
||||||
|
border: 0px solid transparent;
|
||||||
|
border-radius: 2.5px;
|
||||||
|
|
||||||
|
cursor: default;
|
||||||
|
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
.mbtn:enabled:hover{
|
||||||
|
border: 2px solid rgb(146, 146, 228)
|
||||||
|
}
|
||||||
|
|
||||||
|
#scrambled{
|
||||||
|
background-color: rgb(39, 39, 39);
|
||||||
|
border: 2px solid rgb(68, 68, 68);
|
||||||
|
border-radius: 5px;
|
||||||
|
color: rgb(180, 180, 180);
|
||||||
|
|
||||||
|
width: 25%;
|
||||||
|
margin-left: 37%;
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
#guess{
|
||||||
|
background-color: rgb(39, 39, 39);
|
||||||
|
border: 2px solid rgb(53, 53, 179);
|
||||||
|
color: rgb(202, 202, 202);
|
||||||
|
|
||||||
|
width: 98%;
|
||||||
|
height: 3rem;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#guess:hover{
|
||||||
|
border: 2px solid rgb(103, 103, 247);
|
||||||
|
}
|
||||||
|
#bkgImg{
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#hint{
|
||||||
|
background-color: rgb(39, 39, 39);
|
||||||
|
border: 2px solid rgb(202, 202, 202);
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
|
width: 40%;
|
||||||
|
height: 2rem;
|
||||||
|
margin-left: 28%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showPrompt{
|
||||||
|
animation-name: slidePrompt;
|
||||||
|
animation-duration: 2500ms;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
.hideBox{
|
||||||
|
animation-name: hideInput;
|
||||||
|
animation-duration: 2500ms;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
7
Base/tools/bootstrap.css
vendored
Executable file
7
Base/tools/bootstrap.css
vendored
Executable file
File diff suppressed because one or more lines are too long
7
Base/tools/bootstrap.js
vendored
Executable file
7
Base/tools/bootstrap.js
vendored
Executable file
File diff suppressed because one or more lines are too long
2
Base/tools/jquery.js
vendored
Executable file
2
Base/tools/jquery.js
vendored
Executable file
File diff suppressed because one or more lines are too long
30
Snowman-Animated/index.html
Executable file
30
Snowman-Animated/index.html
Executable file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="Stylesheet" href="tools/bootstrap.css">
|
||||||
|
<link rel="Stylesheet" href="styles/styles.css">
|
||||||
|
<title>Bootstrap demo</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container text-center">
|
||||||
|
<div class="row"><h1 class="display-1 text-center">Snowman</h1></div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col text-center">
|
||||||
|
<canvas></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col d-flex justify-content-end"><button class="btn btn-secondary" id="btnBack">Back</button></div>
|
||||||
|
<div class="col d-flex justify-content-start"><button class="btn btn-secondary" id="btnNext">Next</button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="tools/bootstrap.js"></script>
|
||||||
|
<script src="tools/jquery.js"></script>
|
||||||
|
<script src="scripts/system.js"></script>
|
||||||
|
<script src="scripts/script.js"></script>
|
||||||
|
<script src="scripts/graphics.js"></script>
|
||||||
|
<script src="scripts/snow.js"></script>
|
||||||
|
<script src="scripts/thermometer.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
258
Snowman-Animated/scripts/graphics.js
Executable file
258
Snowman-Animated/scripts/graphics.js
Executable file
|
|
@ -0,0 +1,258 @@
|
||||||
|
// Variables
|
||||||
|
const canvas = document.querySelector("canvas");
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function onstart(){
|
||||||
|
canvas.width = 600;
|
||||||
|
canvas.height = 600;
|
||||||
|
|
||||||
|
ctx.fillStyle="#a0a0a0";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
updateScreen();
|
||||||
|
}
|
||||||
|
function updateScreen(){
|
||||||
|
ctx.clearRect(0,0,canvas.width, canvas.height);
|
||||||
|
ctx.globalAlpha = 1;
|
||||||
|
|
||||||
|
/*
|
||||||
|
less than 7 wrong - bottom
|
||||||
|
less than 6 wrong - middle
|
||||||
|
less than 5 wrong - top
|
||||||
|
less than 4 wrong - features
|
||||||
|
less than 3 wrong - right arm
|
||||||
|
less than 2 wrong - leftArm
|
||||||
|
less than 1 wrong - hat
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Drawing parts
|
||||||
|
switch(tries){
|
||||||
|
case 0:
|
||||||
|
_drawSnow();
|
||||||
|
ground("gray");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
rightArm();
|
||||||
|
leftArm();
|
||||||
|
hat();
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
rightArm();
|
||||||
|
leftArm();
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
rightArm();
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
break;
|
||||||
|
case 6:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
break;
|
||||||
|
case 7:
|
||||||
|
ground("green");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fade effect
|
||||||
|
fade();
|
||||||
|
|
||||||
|
// Thermometer
|
||||||
|
_drawThermometer();
|
||||||
|
|
||||||
|
// Request new frame
|
||||||
|
window.requestAnimationFrame(updateScreen);
|
||||||
|
}
|
||||||
|
function ground(colour){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = colour;
|
||||||
|
ctx.arc(300, 1540, 1000, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function bottomSnowBall(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "#f7f7f7";
|
||||||
|
ctx.arc(300, 470, 100, 0, Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function middleSnowBall(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "#f7f7f7";
|
||||||
|
ctx.arc(300,350,85, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function topSnowBall(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "#f7f7f7";
|
||||||
|
ctx.arc(300,235,60, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function hat(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(265,105, 75,80);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(230,185, 145,10);
|
||||||
|
}
|
||||||
|
function rightArm(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = "brown";
|
||||||
|
ctx.lineWidth = 5;
|
||||||
|
ctx.moveTo(365,300);
|
||||||
|
ctx.lineTo(450,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(450,400);
|
||||||
|
ctx.lineTo(470,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(450,400);
|
||||||
|
ctx.lineTo(470,420);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(450,400);
|
||||||
|
ctx.lineTo(450,420);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
function leftArm(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = "brown";
|
||||||
|
ctx.lineWidth = 5;
|
||||||
|
ctx.moveTo(230,300);
|
||||||
|
ctx.lineTo(150,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(150,400);
|
||||||
|
ctx.lineTo(130,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(150,400);
|
||||||
|
ctx.lineTo(130,420);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(150,400);
|
||||||
|
ctx.lineTo(150,420);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fade(){
|
||||||
|
ctx.globalAlpha = aAlpha;
|
||||||
|
aAlpha = aAlpha+0.125*(-aAlpha);
|
||||||
|
|
||||||
|
switch(tries){
|
||||||
|
case 0:
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
_drawSnow();
|
||||||
|
hat();
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
leftArm();
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
rightArm();
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
features();
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
topSnowBall();
|
||||||
|
break;
|
||||||
|
case 6:
|
||||||
|
middleSnowBall();
|
||||||
|
break;
|
||||||
|
case 7:
|
||||||
|
bottomSnowBall();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function _drawButtons(){
|
||||||
|
for(var i = 0; i < 3; i++){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(300,300+(i*35),8, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _drawEyes(){
|
||||||
|
for(var i = 0; i < 2; i++){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(275+(i*52),220,8, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _drawMouth(){
|
||||||
|
for(var i = 0; i < 2; i++){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(260+(i*80),250,5, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
for(var i = 0; i < 3; i++){
|
||||||
|
var down=0;
|
||||||
|
if(i == 1) {down=1;}
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(280+(i*20),260+(down*3),5, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _drawCarrot(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "orange";
|
||||||
|
ctx.arc(300,235,7, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "orange";
|
||||||
|
ctx.moveTo(300,228);
|
||||||
|
ctx.lineTo(335,239);
|
||||||
|
ctx.lineTo(300,240);
|
||||||
|
ctx.lineTo(300,230);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function features(){
|
||||||
|
//eyes
|
||||||
|
_drawEyes();
|
||||||
|
|
||||||
|
//mouth
|
||||||
|
_drawMouth();
|
||||||
|
|
||||||
|
//buttons
|
||||||
|
_drawButtons();
|
||||||
|
|
||||||
|
//carrot
|
||||||
|
_drawCarrot();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Events
|
||||||
|
window.addEventListener("DOMContentLoaded", onstart);
|
||||||
28
Snowman-Animated/scripts/script.js
Executable file
28
Snowman-Animated/scripts/script.js
Executable file
|
|
@ -0,0 +1,28 @@
|
||||||
|
// Variables
|
||||||
|
var tries = 0;
|
||||||
|
var aAlpha = 0;
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function updateButtons(){
|
||||||
|
if(tries>=7) {$("#btnNext").attr("disabled", true);}
|
||||||
|
else {$("#btnNext").attr("disabled", false);}
|
||||||
|
|
||||||
|
if(tries<=0) {$("#btnBack").attr("disabled", true);}
|
||||||
|
else {$("#btnBack").attr("disabled", false);}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Starting stuff
|
||||||
|
updateButtons();
|
||||||
|
|
||||||
|
// Events
|
||||||
|
$("#btnBack").on("click", function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
if(tries>0) {tries--;}
|
||||||
|
updateButtons();
|
||||||
|
});
|
||||||
|
$("#btnNext").on("click", function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
if(tries<7) {tries++;}
|
||||||
|
updateButtons();
|
||||||
|
aAlpha = 1.0;
|
||||||
|
});
|
||||||
47
Snowman-Animated/scripts/snow.js
Executable file
47
Snowman-Animated/scripts/snow.js
Executable file
|
|
@ -0,0 +1,47 @@
|
||||||
|
// Classes
|
||||||
|
class Snow{
|
||||||
|
constructor(){
|
||||||
|
this.reset();
|
||||||
|
this.position[1] = Math.floor(Math.random() * canvas.height * 4 - 5);
|
||||||
|
}
|
||||||
|
|
||||||
|
reset(){
|
||||||
|
this.position = [Math.floor(Math.random() * canvas.width * 3 - 50),Math.floor(Math.random() * 50 - 5) - 25];
|
||||||
|
this.radius = 5;
|
||||||
|
this.speed = [Math.floor(Math.random() * 4 - 1) + 1,Math.floor(Math.random() * 5) + 1];
|
||||||
|
}
|
||||||
|
draw(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "white";
|
||||||
|
ctx.arc(this.position[0], this.position[1],this.radius, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
update(){
|
||||||
|
this.position[1] += this.speed[1];
|
||||||
|
this.position[0] += this.speed[0];
|
||||||
|
this.radius = Math.abs(lerp(5,1, this.position[1] / canvas.height));
|
||||||
|
this.draw();
|
||||||
|
|
||||||
|
// Resetting
|
||||||
|
if(this.position[1] > canvas.height){
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Varaibles
|
||||||
|
var allSnow = [];
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function _createSnow(){
|
||||||
|
for(var i = 0; i < 1500; i++){
|
||||||
|
allSnow.push(new Snow());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _drawSnow(){
|
||||||
|
for(var i = 0; i < allSnow.length; i++){
|
||||||
|
allSnow[i].update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_createSnow();
|
||||||
3
Snowman-Animated/scripts/system.js
Executable file
3
Snowman-Animated/scripts/system.js
Executable file
|
|
@ -0,0 +1,3 @@
|
||||||
|
function lerp(a,b,t){
|
||||||
|
return a+t*(b-a);
|
||||||
|
}
|
||||||
31
Snowman-Animated/scripts/thermometer.js
Executable file
31
Snowman-Animated/scripts/thermometer.js
Executable file
|
|
@ -0,0 +1,31 @@
|
||||||
|
// Variables
|
||||||
|
var wantedHeight = 0;
|
||||||
|
var newHeight = 0;
|
||||||
|
var newPercent = 0;
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function _drawThermometer(){
|
||||||
|
// Setting stuff
|
||||||
|
let _percent = tries / 7;
|
||||||
|
wantedHeight = lerp(0,280, _percent);
|
||||||
|
newHeight = lerp(newHeight, wantedHeight, 0.2);
|
||||||
|
newPercent = lerp(newPercent, _percent, 0.2);
|
||||||
|
|
||||||
|
let yVal = Math.floor(lerp(0,255,newPercent));
|
||||||
|
let fillColour = "rgb(" + 0 + ", " + yVal + ", " + yVal + ")";
|
||||||
|
|
||||||
|
// Drawing
|
||||||
|
ctx.globalAlpha = 1;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = fillColour;
|
||||||
|
ctx.fillRect(10,10,50,300);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
ctx.fillRect(20,300,30,-newHeight);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Events
|
||||||
24
Snowman-Animated/styles/styles.css
Executable file
24
Snowman-Animated/styles/styles.css
Executable file
|
|
@ -0,0 +1,24 @@
|
||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
background: #333;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas{
|
||||||
|
-moz-transition:background .5s ease-in;
|
||||||
|
-o-transition:background .5s ease-in;
|
||||||
|
-webkit-transition:background .5s ease-in;
|
||||||
|
background: #a0a0a0;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
7
Snowman-Animated/tools/bootstrap.css
vendored
Executable file
7
Snowman-Animated/tools/bootstrap.css
vendored
Executable file
File diff suppressed because one or more lines are too long
7
Snowman-Animated/tools/bootstrap.js
vendored
Executable file
7
Snowman-Animated/tools/bootstrap.js
vendored
Executable file
File diff suppressed because one or more lines are too long
2
Snowman-Animated/tools/jquery.js
vendored
Executable file
2
Snowman-Animated/tools/jquery.js
vendored
Executable file
File diff suppressed because one or more lines are too long
41
Snowman-Full/index.html
Executable file
41
Snowman-Full/index.html
Executable file
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="Stylesheet" href="tools/bootstrap.css">
|
||||||
|
<link rel="Stylesheet" href="styles/styles.css">
|
||||||
|
<title>Snowman game</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Game content -->
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="display-1 text-center">Snowman</h1>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<canvas id="canvas" width="600" height="600"></canvas>
|
||||||
|
<p class="text-center">Save the snowman from melting!</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm">
|
||||||
|
<form class="text-light p-3 border border-info d-flex align-items-end" autocomplete="off">
|
||||||
|
<div class="mb-3" style="line-height: 2">
|
||||||
|
<p id="answer" class="display-4 mb-5">_ _ _ _</p>
|
||||||
|
<div class="d-flex align-baseline justify-content-between" style="width:220px;">
|
||||||
|
<input name="guessInput" type="text" class="form-control text-center mr-5" id="guessInput" maxlength="1" style="text-transform:uppercase" onkeypress="return /[a-z]/i.test(event.key)" >
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary ml-5 mb-0 align-self-end">Submit</button>
|
||||||
|
</div>
|
||||||
|
<p class="display-6 mt-5 my-3" id="alreadyGuessed"></p>
|
||||||
|
<p class="display-6 mt-5 my-3" id="feedback"></p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="tools/bootstrap.js"></script>
|
||||||
|
<script src="tools/jquery.js"></script>
|
||||||
|
<script src="res/words.js"></script>
|
||||||
|
<script src="scripts/script.js"></script>
|
||||||
|
<script src="scripts/graphics.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
9
Snowman-Full/res/words.js
Executable file
9
Snowman-Full/res/words.js
Executable file
|
|
@ -0,0 +1,9 @@
|
||||||
|
var all_words =
|
||||||
|
["accommodate","accustomed","acquisition","adolescent","amateur","annoyance","antidote","apology","applicant","architect","asterisk","bachelor","belligerent","biannual","brilliance","cameos","catastrophe","characteristic","circumference","colleague","confiscation","considerable","continuous","counsel","critique","deficiency","deterrent","dilemma","discrepancy","endeavor","equilibrium","excessive",
|
||||||
|
"extricate","fiasco","flamboyant","frostbitten","grotesque","hazardous","horrific","inconvenience","inevitable","insufficient","internally","legitimate","longevity","luncheon","malicious","mercenary","meticulous","miscellaneous","necessity"
|
||||||
|
,"newsstand","obesity","obstinate","optimism","pageant","parliament","permeate",
|
||||||
|
"personification","plaintiff","potential","predecessor","procrastinate","protein","questionnaire","recurrent","religious","sacrificial","schedule","scholar","shrine","snobbery","studious","surmise","taboo","tyranny","undernourished","unique","unsanitary","vacillate","vessel","vitamin","voracious","withhold","abstain","acoustics","acquittal","advantageous","amnesty","anonymous","antiseptic","apostrophe","approximate","arrangement","asthma","bankruptcy","berserk","bimonthly","budge","capably ","chameleon","chauffeur","collaborate","colonel","conscious","contagious","correlation","criticism","crypt","desirable","diagnosis","disbursement","dominance","envious","erroneous","existence","facade","fibrous","forgery",
|
||||||
|
"glamorous","gymnasium","headquarters","hospitality","indulgence","innumerable",
|
||||||
|
"integrity","interrogate","leisure","lucrative","luxurious","malignant","mesmerize","metropolitan","mischievous","negligence","nostalgia","obscure","occurred","optimistic","parachute","penitentiary","perseverance","persuade","pneumonia","precipice","preferably","propeller","pseudonym","radioactive","rehearsal","roommate","sanctuary","scheme","semester","shuddering","solitary","subtlety","susceptible","technically","unacceptable","unduly","universal","utopia","venom","vigilant","vivacious","voucher","accumulate","acquaintance","adolescence","aerial","anecdote","antecedent","anxious","appendixes","archaic","asphalt","awkward","barometer","besieged","biographical","burglary","caricature","chandelier","chrysanthemum","collateral","confiscate","consequence","controversy","council","criticize","cylinder","desolate","dialogue","discernible","embargo","epidemic","escalator","extremity","fashionable","fiery","frivolous","gorgeous","haphazard","honorary","incidentally","inept","insistent","intermittent","jewelry","lieutenant","lunar", "malady","melodious","meteor","minimize","misdemeanor","neutral","noticeable","obese","obsolete","ominous","outrageous","paralysis","perceive","personality","phenomenon","politician","precocious","prestigious","prosperous","psychiatrist","rampage",
|
||||||
|
"relevant","sacrifice","scandalized","schism","serviceable","sieve","sophomore",
|
||||||
|
"suburban","suspicious","technology","unconscious","unenforceable","unpredictable","vaccinate","vertigo","villain","vocalize","vulnerable"];
|
||||||
350
Snowman-Full/scripts/graphics.js
Executable file
350
Snowman-Full/scripts/graphics.js
Executable file
|
|
@ -0,0 +1,350 @@
|
||||||
|
// Variables
|
||||||
|
const canvas = document.querySelector("canvas");
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
var aAlpha = 0;
|
||||||
|
|
||||||
|
/*
|
||||||
|
Snow Particles
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Classes
|
||||||
|
class Snow{
|
||||||
|
constructor(){
|
||||||
|
this.reset();
|
||||||
|
this.position[1] = Math.floor(Math.random() * canvas.height * 4 - 5);
|
||||||
|
}
|
||||||
|
|
||||||
|
reset(){
|
||||||
|
this.position = [Math.floor(Math.random() * canvas.width * 3 - 50),Math.floor(Math.random() * 50 - 5) - 25];
|
||||||
|
this.radius = 5;
|
||||||
|
this.speed = [Math.floor(Math.random() * 4 - 1) + 1,Math.floor(Math.random() * 5) + 1];
|
||||||
|
}
|
||||||
|
draw(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "white";
|
||||||
|
ctx.arc(this.position[0], this.position[1],this.radius, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
update(){
|
||||||
|
this.position[1] += this.speed[1];
|
||||||
|
this.position[0] += this.speed[0];
|
||||||
|
this.radius = Math.abs(lerp(5,1, this.position[1] / canvas.height));
|
||||||
|
this.draw();
|
||||||
|
|
||||||
|
// Resetting
|
||||||
|
if(this.position[1] > canvas.height){
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Varaibles
|
||||||
|
var allSnow = [];
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function _createSnow(){
|
||||||
|
for(var i = 0; i < 1500; i++){
|
||||||
|
allSnow.push(new Snow());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _drawSnow(){
|
||||||
|
for(var i = 0; i < allSnow.length; i++){
|
||||||
|
allSnow[i].update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_createSnow();
|
||||||
|
|
||||||
|
/*
|
||||||
|
The Thermometer
|
||||||
|
*/
|
||||||
|
// Variables
|
||||||
|
var wantedHeight = 0;
|
||||||
|
var newHeight = 0;
|
||||||
|
var newPercent = 0;
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function _drawThermometer(){
|
||||||
|
// Setting stuff
|
||||||
|
let _percent = tries / 7;
|
||||||
|
wantedHeight = lerp(0,280, _percent);
|
||||||
|
newHeight = lerp(newHeight, wantedHeight, 0.2);
|
||||||
|
newPercent = lerp(newPercent, _percent, 0.2);
|
||||||
|
|
||||||
|
let yVal = Math.floor(lerp(0,255,newPercent));
|
||||||
|
let fillColour = "rgb(" + 0 + ", " + yVal + ", " + yVal + ")";
|
||||||
|
|
||||||
|
// Drawing
|
||||||
|
ctx.globalAlpha = 1;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = fillColour;
|
||||||
|
ctx.fillRect(10,10,50,300);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
ctx.fillRect(20,300,30,-newHeight);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Events
|
||||||
|
|
||||||
|
/*
|
||||||
|
The Snowman
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function onstart(){
|
||||||
|
canvas.width = 600;
|
||||||
|
canvas.height = 600;
|
||||||
|
|
||||||
|
ctx.fillStyle="#a0a0a0";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
updateScreen();
|
||||||
|
}
|
||||||
|
function updateScreen(){
|
||||||
|
ctx.clearRect(0,0,canvas.width, canvas.height);
|
||||||
|
ctx.globalAlpha = 1;
|
||||||
|
|
||||||
|
/*
|
||||||
|
less than 7 wrong - bottom
|
||||||
|
less than 6 wrong - middle
|
||||||
|
less than 5 wrong - top
|
||||||
|
less than 4 wrong - features
|
||||||
|
less than 3 wrong - right arm
|
||||||
|
less than 2 wrong - leftArm
|
||||||
|
less than 1 wrong - hat
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Drawing parts
|
||||||
|
switch(tries){
|
||||||
|
case 0:
|
||||||
|
_drawSnow();
|
||||||
|
ground("gray");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
rightArm();
|
||||||
|
leftArm();
|
||||||
|
hat();
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
rightArm();
|
||||||
|
leftArm();
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
rightArm();
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
break;
|
||||||
|
case 6:
|
||||||
|
ground("green");
|
||||||
|
bottomSnowBall();
|
||||||
|
break;
|
||||||
|
case 7:
|
||||||
|
ground("green");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fade effect
|
||||||
|
fade();
|
||||||
|
|
||||||
|
// Thermometer
|
||||||
|
_drawThermometer();
|
||||||
|
|
||||||
|
// Request new frame
|
||||||
|
window.requestAnimationFrame(updateScreen);
|
||||||
|
}
|
||||||
|
function ground(colour){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = colour;
|
||||||
|
ctx.arc(300, 1540, 1000, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function bottomSnowBall(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "#f7f7f7";
|
||||||
|
ctx.arc(300, 470, 100, 0, Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function middleSnowBall(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "#f7f7f7";
|
||||||
|
ctx.arc(300,350,85, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function topSnowBall(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "#f7f7f7";
|
||||||
|
ctx.arc(300,235,60, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function hat(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(265,105, 75,80);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(230,185, 145,10);
|
||||||
|
}
|
||||||
|
function rightArm(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = "brown";
|
||||||
|
ctx.lineWidth = 5;
|
||||||
|
ctx.moveTo(365,300);
|
||||||
|
ctx.lineTo(450,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(450,400);
|
||||||
|
ctx.lineTo(470,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(450,400);
|
||||||
|
ctx.lineTo(470,420);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(450,400);
|
||||||
|
ctx.lineTo(450,420);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
function leftArm(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = "brown";
|
||||||
|
ctx.lineWidth = 5;
|
||||||
|
ctx.moveTo(230,300);
|
||||||
|
ctx.lineTo(150,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(150,400);
|
||||||
|
ctx.lineTo(130,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(150,400);
|
||||||
|
ctx.lineTo(130,420);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(150,400);
|
||||||
|
ctx.lineTo(150,420);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fade(){
|
||||||
|
ctx.globalAlpha = aAlpha;
|
||||||
|
aAlpha = aAlpha+0.125*(-aAlpha);
|
||||||
|
|
||||||
|
switch(tries){
|
||||||
|
case 0:
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
_drawSnow();
|
||||||
|
hat();
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
leftArm();
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
rightArm();
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
features();
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
topSnowBall();
|
||||||
|
break;
|
||||||
|
case 6:
|
||||||
|
middleSnowBall();
|
||||||
|
break;
|
||||||
|
case 7:
|
||||||
|
bottomSnowBall();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function _drawButtons(){
|
||||||
|
for(var i = 0; i < 3; i++){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(300,300+(i*35),8, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _drawEyes(){
|
||||||
|
for(var i = 0; i < 2; i++){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(275+(i*52),220,8, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _drawMouth(){
|
||||||
|
for(var i = 0; i < 2; i++){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(260+(i*80),250,5, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
for(var i = 0; i < 3; i++){
|
||||||
|
var down=0;
|
||||||
|
if(i == 1) {down=1;}
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(280+(i*20),260+(down*3),5, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _drawCarrot(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "orange";
|
||||||
|
ctx.arc(300,235,7, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "orange";
|
||||||
|
ctx.moveTo(300,228);
|
||||||
|
ctx.lineTo(335,239);
|
||||||
|
ctx.lineTo(300,240);
|
||||||
|
ctx.lineTo(300,230);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function features(){
|
||||||
|
//eyes
|
||||||
|
_drawEyes();
|
||||||
|
|
||||||
|
//mouth
|
||||||
|
_drawMouth();
|
||||||
|
|
||||||
|
//buttons
|
||||||
|
_drawButtons();
|
||||||
|
|
||||||
|
//carrot
|
||||||
|
_drawCarrot();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Events
|
||||||
|
window.addEventListener("DOMContentLoaded", onstart);
|
||||||
131
Snowman-Full/scripts/script.js
Executable file
131
Snowman-Full/scripts/script.js
Executable file
|
|
@ -0,0 +1,131 @@
|
||||||
|
// Variables
|
||||||
|
// --DOCUMENT
|
||||||
|
const guessInput = $("#guessInput");
|
||||||
|
const answerText = $("#answer");
|
||||||
|
const guessText = $("#alreadyGuessed");
|
||||||
|
const feedText = $("#feedback");
|
||||||
|
const debug = false;
|
||||||
|
// --GLOBAL ( GFX&SYS )
|
||||||
|
var tries = 0;
|
||||||
|
// --GAME
|
||||||
|
var oWord = "";
|
||||||
|
var cWord = "";
|
||||||
|
var gesult = [];
|
||||||
|
var misses = [];
|
||||||
|
var wins = 0;
|
||||||
|
// --THREAD
|
||||||
|
var delay = null;
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function lerp(a,b,t){
|
||||||
|
return a+t*(b-a);
|
||||||
|
}
|
||||||
|
function reset(){
|
||||||
|
if(debug) {console.log("Resetting.");}
|
||||||
|
if(delay != null) {window.clearInterval(delay); delay = null;}
|
||||||
|
|
||||||
|
// Finding a random word
|
||||||
|
cWord = all_words[Math.floor(Math.random() * all_words.length)];
|
||||||
|
oWord = cWord;
|
||||||
|
gesult = [];
|
||||||
|
misses = [];
|
||||||
|
var result = "";
|
||||||
|
|
||||||
|
// For next game purposes
|
||||||
|
wins = 0;
|
||||||
|
tries = 0;
|
||||||
|
|
||||||
|
// Making the answer text as long as we need it
|
||||||
|
for(var i = 0; i < cWord.length; i++){
|
||||||
|
result += "_ ";
|
||||||
|
gesult.push("_ ");
|
||||||
|
}
|
||||||
|
|
||||||
|
answerText.text(result);
|
||||||
|
guessText.text("");
|
||||||
|
guessInput.attr("disabled", false);
|
||||||
|
guessInput.focus();
|
||||||
|
|
||||||
|
// Debug
|
||||||
|
if(debug) {console.log(cWord);}
|
||||||
|
}
|
||||||
|
function shwMSG(msg){
|
||||||
|
if(delay != null) {window.clearInterval(delay); feedText.text(""); delay = null; return;}
|
||||||
|
feedText.text(msg);
|
||||||
|
delay = window.setInterval(function(){
|
||||||
|
shwMSG(gesult.join(""));
|
||||||
|
}, 2500);
|
||||||
|
}
|
||||||
|
function checkGuess(){
|
||||||
|
// Debug
|
||||||
|
if(debug) {console.log("Word:", guessInput.val());}
|
||||||
|
|
||||||
|
// checking letter against word
|
||||||
|
let wordArray = cWord.split("");
|
||||||
|
let wantWord = guessInput.val().toLowerCase();
|
||||||
|
var success = false;
|
||||||
|
|
||||||
|
// Misses
|
||||||
|
for(var i = 0; i < misses.length; i++){
|
||||||
|
if(misses[i] == wantWord){
|
||||||
|
shwMSG("You've already used that letter.");
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Going through to find a match
|
||||||
|
for(var i = 0; i < wordArray.length; i++){
|
||||||
|
// Hmm, I think it matches?
|
||||||
|
if(wordArray[i] == wantWord){
|
||||||
|
success = true;
|
||||||
|
wordArray[i] = '.';
|
||||||
|
gesult[i] = wantWord;
|
||||||
|
wins += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!success) {misses.push(wantWord);}
|
||||||
|
|
||||||
|
// Displaying the correct word now
|
||||||
|
// The answer text
|
||||||
|
answerText.text(gesult.join(""));
|
||||||
|
|
||||||
|
// The misses text
|
||||||
|
var result = "";
|
||||||
|
for(var i = 0; i < misses.length; i++) {result += misses[i] + ", ";}
|
||||||
|
guessText.text(result);
|
||||||
|
// Removing it from the correct word ( No doubles. )
|
||||||
|
cWord = wordArray.join("");
|
||||||
|
|
||||||
|
return success;
|
||||||
|
}
|
||||||
|
function endgame(text){
|
||||||
|
if(delay != null) {return;}
|
||||||
|
|
||||||
|
answerText.text(text);
|
||||||
|
delay = window.setInterval(reset, 2500);
|
||||||
|
|
||||||
|
guessInput.attr("disabled", true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Events
|
||||||
|
$("form").on("submit", function(event){
|
||||||
|
// Prevent reload
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// Did the user submit nothing?
|
||||||
|
if(guessInput.val().length <= 0) {return;}
|
||||||
|
|
||||||
|
// Checking stuff
|
||||||
|
if(!checkGuess()){
|
||||||
|
if(tries < 7) {tries++;}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Did we win?
|
||||||
|
if(wins >= cWord.length) {endgame("YOU WIN");}
|
||||||
|
if(tries >= 7) {endgame("YOU LOOSE! YOUR WORD WAS " + oWord);}
|
||||||
|
|
||||||
|
// Reset input field
|
||||||
|
guessInput.val("");
|
||||||
|
});
|
||||||
|
window.onload = reset;
|
||||||
37
Snowman-Full/styles/styles.css
Executable file
37
Snowman-Full/styles/styles.css
Executable file
|
|
@ -0,0 +1,37 @@
|
||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #333;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas {
|
||||||
|
-moz-transition:background .5s ease-in;
|
||||||
|
-o-transition:background .5s ease-in;
|
||||||
|
-webkit-transition:background .5s ease-in;
|
||||||
|
background: #a0a0a0;
|
||||||
|
border-radius: 5px;
|
||||||
|
max-width: 94vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#guessInput{
|
||||||
|
font-size: xx-large;
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
|
form{
|
||||||
|
height: 600px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#feedback{
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
7
Snowman-Full/tools/bootstrap.css
vendored
Executable file
7
Snowman-Full/tools/bootstrap.css
vendored
Executable file
File diff suppressed because one or more lines are too long
7
Snowman-Full/tools/bootstrap.js
vendored
Executable file
7
Snowman-Full/tools/bootstrap.js
vendored
Executable file
File diff suppressed because one or more lines are too long
2
Snowman-Full/tools/jquery.js
vendored
Executable file
2
Snowman-Full/tools/jquery.js
vendored
Executable file
File diff suppressed because one or more lines are too long
28
Snowman/index.html
Executable file
28
Snowman/index.html
Executable file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="Stylesheet" href="tools/bootstrap.css">
|
||||||
|
<link rel="Stylesheet" href="styles/styles.css">
|
||||||
|
<title>Bootstrap demo</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container text-center">
|
||||||
|
<div class="row"><h1 class="display-1 text-center">Snowman</h1></div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col text-center">
|
||||||
|
<canvas></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col d-flex justify-content-end"><button class="btn btn-secondary" id="btnBack">Back</button></div>
|
||||||
|
<div class="col d-flex justify-content-start"><button class="btn btn-secondary" id="btnNext">Next</button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="tools/bootstrap.js"></script>
|
||||||
|
<script src="tools/jquery.js"></script>
|
||||||
|
<script src="scripts/script.js"></script>
|
||||||
|
<script src="scripts/graphics.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
Snowman/ref/snowman.jpg
Normal file
BIN
Snowman/ref/snowman.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 MiB |
199
Snowman/scripts/graphics.js
Executable file
199
Snowman/scripts/graphics.js
Executable file
|
|
@ -0,0 +1,199 @@
|
||||||
|
// Variables
|
||||||
|
const canvas = document.querySelector("canvas");
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function onstart(){
|
||||||
|
canvas.width = 600;
|
||||||
|
canvas.height = 600;
|
||||||
|
|
||||||
|
ctx.fillStyle="#a0a0a0";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
updateScreen();
|
||||||
|
}
|
||||||
|
function updateScreen(){
|
||||||
|
console.log(tries);
|
||||||
|
ctx.clearRect(0,0,canvas.width, canvas.height);
|
||||||
|
|
||||||
|
/*
|
||||||
|
less than 7 wrong - bottom
|
||||||
|
less than 6 wrong - middle
|
||||||
|
less than 5 wrong - top
|
||||||
|
less than 4 wrong - features
|
||||||
|
less than 3 wrong - right arm
|
||||||
|
less than 2 wrong - leftArm
|
||||||
|
less than 1 wrong - hat
|
||||||
|
*/
|
||||||
|
|
||||||
|
switch(tries){
|
||||||
|
case 0:
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
rightArm();
|
||||||
|
leftArm();
|
||||||
|
hat();
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
rightArm();
|
||||||
|
leftArm();
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
rightArm();
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
features();
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
topSnowBall();
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
bottomSnowBall();
|
||||||
|
middleSnowBall();
|
||||||
|
break;
|
||||||
|
case 6:
|
||||||
|
bottomSnowBall();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function bottomSnowBall(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "#f7f7f7";
|
||||||
|
ctx.arc(300, 470, 100, 0, Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function middleSnowBall(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "#f7f7f7";
|
||||||
|
ctx.arc(300,350,85, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function topSnowBall(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "#f7f7f7";
|
||||||
|
ctx.arc(300,235,60, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function hat(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(265,105, 75,80);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(230,185, 145,10);
|
||||||
|
}
|
||||||
|
function rightArm(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = "brown";
|
||||||
|
ctx.lineWidth = 5;
|
||||||
|
ctx.moveTo(365,300);
|
||||||
|
ctx.lineTo(450,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(450,400);
|
||||||
|
ctx.lineTo(470,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(450,400);
|
||||||
|
ctx.lineTo(470,420);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(450,400);
|
||||||
|
ctx.lineTo(450,420);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
function leftArm(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = "brown";
|
||||||
|
ctx.lineWidth = 5;
|
||||||
|
ctx.moveTo(230,300);
|
||||||
|
ctx.lineTo(150,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(150,400);
|
||||||
|
ctx.lineTo(130,400);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(150,400);
|
||||||
|
ctx.lineTo(130,420);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.moveTo(150,400);
|
||||||
|
ctx.lineTo(150,420);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
function _drawButtons(){
|
||||||
|
for(var i = 0; i < 3; i++){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(300,300+(i*35),8, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _drawEyes(){
|
||||||
|
for(var i = 0; i < 2; i++){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(275+(i*52),220,8, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _drawMouth(){
|
||||||
|
for(var i = 0; i < 2; i++){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(260+(i*80),250,5, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
for(var i = 0; i < 3; i++){
|
||||||
|
var down=0;
|
||||||
|
if(i == 1) {down=1;}
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.arc(280+(i*20),260+(down*3),5, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function _drawCarrot(){
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "orange";
|
||||||
|
ctx.arc(300,235,7, 0,Math.PI*2);
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = "orange";
|
||||||
|
ctx.moveTo(300,228);
|
||||||
|
ctx.lineTo(335,239);
|
||||||
|
ctx.lineTo(300,240);
|
||||||
|
ctx.lineTo(300,230);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
function features(){
|
||||||
|
//eyes
|
||||||
|
_drawEyes();
|
||||||
|
|
||||||
|
//mouth
|
||||||
|
_drawMouth();
|
||||||
|
|
||||||
|
//buttons
|
||||||
|
_drawButtons();
|
||||||
|
|
||||||
|
//carrot
|
||||||
|
_drawCarrot();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Events
|
||||||
|
window.addEventListener("DOMContentLoaded", onstart);
|
||||||
28
Snowman/scripts/script.js
Executable file
28
Snowman/scripts/script.js
Executable file
|
|
@ -0,0 +1,28 @@
|
||||||
|
// Variables
|
||||||
|
var tries = 0;
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
function updateButtons(){
|
||||||
|
if(tries>=7) {$("#btnNext").attr("disabled", true);}
|
||||||
|
else {$("#btnNext").attr("disabled", false);}
|
||||||
|
|
||||||
|
if(tries<=0) {$("#btnBack").attr("disabled", true);}
|
||||||
|
else {$("#btnBack").attr("disabled", false);}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Starting stuff
|
||||||
|
updateButtons();
|
||||||
|
|
||||||
|
// Events
|
||||||
|
$("#btnBack").on("click", function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
if(tries>0) {tries--;}
|
||||||
|
updateScreen();
|
||||||
|
updateButtons();
|
||||||
|
});
|
||||||
|
$("#btnNext").on("click", function(e){
|
||||||
|
e.preventDefault();
|
||||||
|
if(tries<7) {tries++;}
|
||||||
|
updateScreen();
|
||||||
|
updateButtons();
|
||||||
|
});
|
||||||
24
Snowman/styles/styles.css
Normal file
24
Snowman/styles/styles.css
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
background: #333;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
min-height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas{
|
||||||
|
-moz-transition:background .5s ease-in;
|
||||||
|
-o-transition:background .5s ease-in;
|
||||||
|
-webkit-transition:background .5s ease-in;
|
||||||
|
background: #a0a0a0;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
7
Snowman/tools/bootstrap.css
vendored
Executable file
7
Snowman/tools/bootstrap.css
vendored
Executable file
File diff suppressed because one or more lines are too long
7
Snowman/tools/bootstrap.js
vendored
Executable file
7
Snowman/tools/bootstrap.js
vendored
Executable file
File diff suppressed because one or more lines are too long
2
Snowman/tools/jquery.js
vendored
Executable file
2
Snowman/tools/jquery.js
vendored
Executable file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue