|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title></title>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<pre id="boat">
|
|
|
|
|
|
_ _ _ _ _ _
|
|
|
|
|
|
___ ___ _ _ _ __ | |__ ___ __ _| |_ __|_|__|_|__|_|__|_|___
|
|
|
|
|
|
/ __|/ _ \| | | | '_ \| '_ \ / _ \ / _` | __| _|_(=^x^=)__ʕʘ‿ʘʔ___(・Д・)_|______
|
|
|
|
|
|
\__ \ (_) | |_| | |_) | |_) | (_) | (_| | |_ |o o o o o o o o o o o o o o o /
|
|
|
|
|
|
|___/\___/ \__,_| .__/|_.__/ \___/ \__,_|\__| ~'`~'`~'`~'`~'`~'`~'`~ `~'`~`~'`~`~`~'`~
|
|
|
|
|
|
|_|
|
|
|
|
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
// 4. Cycle through a string / array to create a wave pattern using a generator function
|
|
|
|
|
|
// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
|
|
|
|
|
|
const wave = function*(pattern) {
|
|
|
|
|
|
let index = 0
|
|
|
|
|
|
while (true){
|
|
|
|
|
|
yield pattern[index]
|
|
|
|
|
|
index==pattern.length - 1 ? index = 0 : index ++
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 5. Initialize the generator with the sea waves pattern from the original ASCII art of Soupboat
|
|
|
|
|
|
let w = wave("'`~")
|
|
|
|
|
|
|
|
|
|
|
|
// 3. Function to insert a character in a string at a certain position
|
|
|
|
|
|
// default position 49 is just between the word soupboat and the drawing of the boat
|
|
|
|
|
|
const putChar = (line, char, position=49) => {
|
|
|
|
|
|
return line.slice(0, position) + char + line.slice(position)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 2.
|
|
|
|
|
|
const moveBoat = () => {
|
|
|
|
|
|
// Load the ASCII art from the document
|
|
|
|
|
|
// and split it in lines
|
|
|
|
|
|
const boat = document.querySelector('#boat')
|
|
|
|
|
|
const lines = boat.innerHTML.split('\n')
|
|
|
|
|
|
|
|
|
|
|
|
// Create a new ASCII art iterating through the different lines
|
|
|
|
|
|
const movedBoat = lines.reduce((result, line, index)=> {
|
|
|
|
|
|
|
|
|
|
|
|
// Dont change the contents if below see level
|
|
|
|
|
|
if (index > 5) {
|
|
|
|
|
|
return result + line + '\n'
|
|
|
|
|
|
}
|
|
|
|
|
|
// On the fourth line insert the wave pattern
|
|
|
|
|
|
if (index == 4) {
|
|
|
|
|
|
let land = line.slice(0,49)
|
|
|
|
|
|
let sea = line.slice(49) + w.next().value
|
|
|
|
|
|
return result + land + sea + '\n'
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// On the other lines insert just a blank space
|
|
|
|
|
|
return result + putChar(line, ' ') + '\n'
|
|
|
|
|
|
|
|
|
|
|
|
}, "")
|
|
|
|
|
|
|
|
|
|
|
|
// Replace old ASCII with new ASCII
|
|
|
|
|
|
boat.innerHTML = movedBoat
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 1. Repeat the moveBoat() function every second
|
|
|
|
|
|
setInterval(()=>moveBoat(), 500)
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
