WordGame-JS/Snowman-Full/scripts/graphics.js

// 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);