Skip to content

Instantly share code, notes, and snippets.

@joshron

joshron/index.html

Created September 20, 2020 05:41
Show Gist options
  • Save joshron/9c6fa43ee8878b601ca6a31083a58dae to your computer and use it in GitHub Desktop.
Save joshron/9c6fa43ee8878b601ca6a31083a58dae to your computer and use it in GitHub Desktop.
Download ZIP
Typing game canvas
Raw
index.html
<header>
<h1>Word Drop</h1>
</header>
<div class="container">
<div class="button-container">
<button id="easy" class="difficulty-button">Easy</button>
<button id="medium" class="difficulty-button">Medium</button>
<button id="hard" class="difficulty-button">Hard</button>
</div>
<canvas id="test-canvas" width="400px" height="400px"></canvas>
</div>
<div id="display">
<input type="text" id="word-input"></input>
</div>
Raw
script.js
const wordArray = [
"concentrate",
"private",
"view",
"news",
"rhetoric",
"pony",
"employee",
"worth",
"fill",
"hotdog",
"threshold",
"fork",
"cake",
"impact",
"systematic",
"handy",
"means",
"help",
"manage",
"routine",
"tradtion",
"affair",
"cater",
"roof",
"deprivation",
"blast",
"shower",
"landscape",
"sofa",
"program",
"empirical",
"casualty",
"install",
"disappointment",
"tribe",
"publisher",
"financial",
"green",
"absorb",
"curtain",
"picture",
"apple",
"single",
"prejudice",
"architect",
"lane",
"lend",
"contempt",
"ranch",
"fitness"
];
window.onload = (event) => {
const canvas = document.getElementById("test-canvas");
const ctx = canvas.getContext("2d");
const position = canvas.width / 2;
const container = document.querySelector(".container");
let difficultySpeed = 1;
let yval = -50;
let missilePosition = canvas.height + 10;
let fallingOpacity = 1;
let fontSize = 40;
let rgbValue = 150;
let points = 0;
let lives = 3;
let backgroundScrolly = 0;
let missileHit = false;
let explosionOpacity = 0.1;
function randomNumberGenerator() {
const number = Math.floor(Math.random() * wordArray.length);
return number;
}
let randomIndexNumber = randomNumberGenerator();
const wordInput = document.getElementById("word-input");
document.querySelector(".button-container").addEventListener(
"click",
(event) => {
if (event.target.className === "difficulty-button") {
switch (event.target.id) {
case "easy":
difficultySpeed = 1;
break;
case "medium":
difficultySpeed = 2;
break;
case "hard":
difficultySpeed = 3;
break;
default:
}
container.removeChild(container.firstElementChild);
draw();
wordInput.focus();
}
},
false
);
function draw() {
if (lives <= 0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "40px Roboto";
ctx.fillStyle = "red";
ctx.fillText("Game over :(", position, canvas.height / 2);
return;
}
let typedWord = wordInput.value.toLowerCase();
ctx.clearRect(0, 0, 400, 400);
movingBackground();
fallingWords();
score();
hearts();
if (typedWord === wordArray[randomIndexNumber]) {
missile();
}
window.requestAnimationFrame(draw);
}
function score() {
ctx.font = "30px Roboto";
ctx.fillStyle = "#FFC49B";
ctx.fillText(points, 30, 30);
}
function hearts() {
let rightMargin = 30;
for (let i = lives; i > 0; i--) {
ctx.font = "30px Roboto";
ctx.fillStyle = "red";
ctx.fillText("❤", canvas.width - rightMargin, canvas.height - 30);
rightMargin = rightMargin + 30;
}
}
function fallingWords() {
ctx.font = `${fontSize}px Roboto`;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowColor = "rgb(50, 50, 50, 1)";
//ctx.fillStyle = `rgba(200, ${rgbValue}, ${rgbValue}, ${explosionOpacity})`;
ctx.fillStyle = `rgba(255, 239, 211, ${fallingOpacity}`;
ctx.fillText(wordArray[randomIndexNumber], position, yval);
ctx.textAlign = "center";
yval = yval + difficultySpeed;
fontSize = fontSize + difficultySpeed / 7;
if (fallingOpacity <= 0) {
missileHit = false;
fallingOpacity = 1;
yval = -50;
fontSize = 40;
rgbValue = 150;
randomIndexNumber = randomNumberGenerator();
}
if (missileHit === true) {
fontSize = fontSize + 0.9;
fallingOpacity = fallingOpacity - 0.05;
return;
}
if (yval > canvas.height + fontSize) {
randomIndexNumber = randomNumberGenerator();
yval = -50;
fontSize = 40;
rgbValue = 150;
lives--;
wordInput.value = "";
}
}
function missile() {
ctx.fillStyle = "black";
ctx.beginPath();
//ctx.arc(position, missilePosition, 10, 0, 2 * Math.PI);
//ctx.fill();
ctx.moveTo(position, missilePosition);
ctx.lineTo(position + 15, missilePosition + 35);
ctx.lineTo(position - 15, missilePosition + 35);
ctx.closePath();
ctx.fill();
missilePosition = missilePosition - 10;
if (missilePosition < yval) {
missileHit = true;
missilePosition = 410;
wordInput.value = "";
points++;
return;
}
}
function movingBackground() {
ctx.fillStyle = "#adb6c4";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
};
Raw
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #001b2e;
text-align: center;
font-family: "Roboto", sans-serif;
}
header {
width: fit-content;
margin: 1rem auto;
padding: 0.5rem;
color: #ffc49b;
font-size: 2rem;
font-family: "Anton", sans-serif;
}
.container {
position: relative;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
button {
border: none;
width: 7rem;
height: 2rem;
margin: 0.2rem;
border-radius: 10px;
color: #ffc49b;
font-size: 1.5rem;
background-color: #001b2e;
}
button:hover {
cursor: pointer;
}
.button-container {
position: absolute;
display: flex;
justify-content: center;
margin: 0 auto;
}
#test-canvas {
background-color: white;
margin-bottom: 1rem;
border-radius: 10px;
}
#word-input {
padding: 0.2rem;
font-size: 2rem;
text-align: center;
border: none;
background-color: #adb6c4;
border-radius: 10px;
color: #ffefd3;
text-shadow: 1px 1px 1px black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment