Poblem z kodem

0

Witam czy mógłby mi ktoś wytłumaczyć krok po kroku co dzieje się w kodzie js i css ? Jest to gra snake na zaliczenie

0

script js:
document.addEventListener('DOMContentLoaded', function() {

const div_with_canvas = document.getElementById("div_with_canvas");
const div_score = document.getElementById("score");
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

const snake_width = 10;
const snake_height = 10;
const snake = [ [40, 20, snake_width, snake_height], [30, 20, snake_width, snake_height], [20, 20, snake_width, snake_height]  ]

const direct = { 
	direction: "right",
	
	check_key: function() { 
		document.addEventListener("keydown", function(e) {
			which_key_pressed = e.key;
			direct.set_direction(which_key_pressed)
			//console.log(this.which_key_pressed);
		})
	},
	
	set_direction: function(which_key_pressed) {
		if (which_key_pressed == "ArrowRight" && this.direction != "left") {
			this.direction = "right";
		}
		if (which_key_pressed == "ArrowLeft" && this.direction != "right") {
			this.direction = "left";
		}
		if (which_key_pressed == "ArrowUp" && this.direction != "down") {
			this.direction = "up";
		}
		if (which_key_pressed == "ArrowDown" && this.direction != "up") {
			this.direction = "down";
		}
		return this.direction;
	}
}	

function draw_snake() {
	let stepX = 0;
	let stepY = 0;
	context.clearRect(0, 0, canvas.width, canvas.height);	
	draw.draw_food(draw.random_x, draw.random_x);

	//snake goes to right
	if (direct.set_direction() == "right") { 
		stepX = 10;
	}
	//snake goes to left
	if (direct.set_direction() == "left") { 
		stepX = -10;
	}
	//snake goes up
	if (direct.set_direction() == "up") { 
		stepY = -10;
	}
	//snake goes down
	if (direct.set_direction() == "down") { 
		stepY = 10;
	}
	snake.unshift([snake[0][0]+stepX, snake[0][1]+stepY, snake_width, snake_height])
	if (draw.random_x !== snake[0][0] || draw.random_y !== snake[0][1] ) {
		snake.pop(snake[snake.length-1]);
	}
	draw.eat_food();
	for (i=0; i < snake.length; i++) { 
		context.fillStyle = "green";
		context.fillRect(snake[i][0], snake[i][1], snake[i][2], snake[i][3]);
	}
}
	
const draw = { 
	random_x: "",
	random_y: "",
	
	random_coordinates_for_food: function() {
		const canvas_width_minus_snake = []
		const canvas_height_minus_snake = []
		for (i=0; i < canvas.width; i++) {
			// every number of canvas width are division in 10. If some of them has no modulo rest, put it in the array
			if ( i % 10 === 0) {
				canvas_width_minus_snake.push(i);
			}
		}
		for (i=0; i < canvas.height; i++) {
			if ( i % 10 === 0) {
				canvas_height_minus_snake.push(i);
			}
		}
			// remove snake coordinates from canvas_width_minus_snake and canvas_height_minus_snake
		for (i=0; i < snake.length; i++) {
			const index_of_snake_x_position = canvas_width_minus_snake.indexOf(snake[i][0]);
			const index_of_snake_y_position = canvas_height_minus_snake.indexOf(snake[i][1]);
			if (index_of_snake_x_position != -1) { 
				canvas_width_minus_snake.splice(index_of_snake_x_position,1);
			}
			if (index_of_snake_y_position != -1) { 
				canvas_height_minus_snake.splice(index_of_snake_y_position,1);
			}
		}
		this.random_x = canvas_width_minus_snake[Math.floor(Math.random() * canvas_width_minus_snake.length)];
		this.random_y = canvas_height_minus_snake[Math.floor(Math.random() * canvas_height_minus_snake.length)];
	},
	
	draw_food: function() {
		context.fillRect(this.random_x, this.random_y, snake_width, snake_height);
	},
	
	eat_food: function() {
		if (this.random_x == snake[0][0] && this.random_y == snake[0][1] ) {
			console.log("eat food");
			draw.random_coordinates_for_food();
			set_score.score += 10;
		}
	}
}

const set_score = { 
	score: 0,

	count_score: function() {
		div_score.innerText = "Your score is: " + this.score;
	},
	
	return_score: function() {
		return this.score;
	}
}

function check_collision(req) {
	for (i=1; i < snake.length; i++) {
		// snake eat itself
		if (snake[0][0] == snake[i][0] && snake[0][1] == snake[i][1] ) { 
			game_over();
			cancelAnimationFrame(req);
		}
	}
	// snake hits the wall
	if (snake[0][0] < 0 || snake[0][0] >= canvas.width || snake[0][1] < 0 || snake[0][1] >= canvas.height ) {
		game_over();
		cancelAnimationFrame(req);
	} 
}

function game_over() {
	const play_again_button = document.createElement("button");
	const end_game_div = document.createElement("div");
	const end_game_div_header = document.createElement("h2");
	end_game_div.id = "end_game_div";
	end_game_div.zIndex = 30;
	end_game_div_header.innerText = "Game Over";
	play_again_button.innerText = "Play Again";
	play_again_button.id = "play_again_button";
	div_with_canvas.appendChild(end_game_div);
	end_game_div.appendChild(end_game_div_header);
	div_score.appendChild(play_again_button);
	reset_game(play_again_button);
}

function reset_game(play_again_button) {
	play_again_button.addEventListener("mousedown", function() {
		location.reload();
	} )
}

function snake_speed() {
	let speed = 100 - set_score.score/5;
	if (speed < 20) {
		speed = 20;
	}
	return speed;
}

function loop() {
	draw_snake();
	set_score.count_score();
	setTimeout(function() {
		const req = requestAnimationFrame(loop); 
		check_collision(req);
	}, snake_speed());
} 

direct.check_key();
loop();
draw.random_coordinates_for_food();

});

css:

#div_with_canvas {
position: relative;
width: 500px;
height: 400px;
margin: 0 auto;
}

canvas {
position: absolute;
border: 1px solid black;
z-index: 2;
}

#end_game_div {
width: 300px;
height: 200px;
background-color: yellow;
border: 2px solid black;
margin: 0 auto;
text-align: center;
font-size: 20px;
z-index: 1;
position: absolute;
left: 100px;
top: 10px;

}

#play_again_button {
margin: 20px 0;
display: block;
}

#score {
display: block;
width: 500px;
height: 100px;
margin: 0 auto;
text-align: center;
padding: 50px;
font-size: 25px;
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1