oysteikt/IT2
Archived
0
0
Fork 0
Code Issues Pull Requests Releases Activity

Added task

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit
2020-02-18 00:35:08 +01:00
parent 14232e3225
commit a24afab091
3 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
html/tasks/chapter_10/snake/oppgave.html Executable file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Snake</title>
<link rel="stylesheet" href="../../../../resources/css/main.css" />
<script async src="./script.js"></script>
</head>
<body>
<h1>Snake</h1>
<div class="center">
<canvas id="game"></canvas>
<button class="big" id="start">Start game</button>
</div>
</body>
</html>

123
html/tasks/chapter_10/snake/script.js Executable file
View File

@@ -0,0 +1,123 @@
// @ts-check
/* Initialize variables */
const pixelSize = 20;
const pixelAmount = 40;
/* Register HTML DOM elements by variables */
const canvas = document.getElementById('game');
const game = canvas.getContext('2d');
const startButton = document.getElementById('start');
/* Add event listeners */
document.addEventListener('keydown', updateDirection, false);
startButton.addEventListener('click', gameLoop, false);
/* Initialize HTML with functions */
canvas.style.display = 'block';
canvas.style.width = canvas.style.height = `${pixelSize * pixelAmount}px`;
canvas.style.backgroundColor = '#ffffff';
/* Snake class */
class snake {
constructor() {
this.x = 0;
this.y = 0;
this.speed = 5;
this.direction = 'left';
this.tail = [
[3, 0],
[2, 0],
[1, 0],
[0, 0],
];
this.color = '#00ff00';
}
draw() {
game.fillStyle = this.color;
for (let tailPoint = 0; tailPoint < this.tail.length; tailPoint++) {
/* Correct tailpoint x and y to actual size */
const pixelPosition = this.tail[tailPoint].map(
point => point * pixelSize
);
game.fillRect(
pixelPosition[0],
pixelPosition[1],
pixelPosition[0] + pixelSize,
pixelPosition[1] + pixelSize
);
}
}
updateTail() {
this.tail.pop();
switch (this.direction) {
case 'left':
this.tail.unshift([this.tail[0][0] + 1, this.tail[0][1]]);
break;
case 'right':
this.tail.unshift([this.tail[0][0] - 1, this.tail[0][1]]);
break;
case 'up':
this.tail.unshift([this.tail[0][0], this.tail[0][1] - 1]);
break;
case 'down':
this.tail.unshift([this.tail[0][0], this.tail[0][1] + 1]);
break;
}
}
}
/* Apple class */
class apple {
constructor() {
this.x = 0;
this.y = 0;
}
}
const Snake = new snake();
/* Wrapper function for gameloop */
function gameLoop() {
/* Slow down loop */
setTimeout(() => {
window.requestAnimationFrame(gameLoop);
gameUpdate();
}, 1000 / Snake.speed);
}
/* Function that is being run each tick */
function gameUpdate() {
/* Draw snake */
Snake.draw();
Snake.updateTail();
}
/* Update direction for snake */
function updateDirection(evt) {
const key = evt.code;
console.log(key);
switch (key) {
case 'ArrowLeft':
evt.preventDefault();
Snake.direction = 'left';
break;
case 'ArrowRight':
evt.preventDefault();
Snake.direction = 'right';
break;
case 'ArrowUp':
evt.preventDefault();
Snake.direction = 'up';
break;
case 'ArrowDown':
evt.preventDefault();
Snake.direction = 'down';
break;
}
}

6
index.html
View File

@@ -39,6 +39,12 @@
<p><a href="./html/tasks/chapter_6/canvashouse/oppgave.html">Canvas House</a></p>
<p><a href="./html/tasks/chapter_6/task3_kvitter/oppgave.html">Oppgave 3 - Kvitter</a></p>
<p><a href="./html/tasks/chapter_6/task10_localstorage/oppgave.html">Oppgave 10 - Localstorage & JSON test</a></p>
<h2>Kapittel 8</h2>
<p><a href="./html/tasks/chapter_8/task3_randomArrayData/oppgave.html">Oppgave 3 - Random Array Data</a></p>
<h2>Kapittel 10</h2>
<p><a href="./html/tasks/chapter_10/snake/oppgave.html">Snake</a></p>
<br><br>