Небольшая анимация
let canvas = document.querySelector('canvas')let context = canvas.getContext('2d');let page = 1let x = 700function gameCycle(){    x -= 1    if(page == 1){        context.fillStyle = 'white'        context.fillRect(0,0,800,600)        context.fillStyle = 'green'        context.fillRect(0,0,50,50)        border('pink')        tree(x)        context.fillStyle = 'lightgreen'        context.fillRect(0,400,800,200)        context.fillStyle = 'black'        context.font = '20px Arial'        context.fillText('Жил был зелёный квадрат', 10, 430)    }if(page == 2){        context.fillStyle = 'lightblue'        context.fillRect(0,0,800,600)        context.fillStyle = 'lightblue'        context.fillRect(0,0,50,50)        border('seablue')        context.fillStyle = 'green'        context.fillRect(0,400,800,200)        tree(x)        context.fillStyle = 'red'        context.font = '20px Arial'        context.fillText('Он пошёл на улицу', 10, 430)    }if(page == 3){        context.fillStyle = 'lightblue'        context.fillRect(0,0,800,600)        context.fillStyle = 'lightblue'        context.fillRect(0,0,50,50)        border('seablue')        context.fillStyle = 'green'        context.fillRect(0,400,800,200)        tree(x)        context.fillStyle = 'red'        context.font = '20px Arial'        context.fillText('Он немного позагорал и пошёд домой', 10, 430)    }if(page == 4){        context.fillStyle = 'white'        context.fillRect(0,0,800,600)        context.fillStyle = 'green'        context.fillRect(0,0,50,50)        border('pink')        tree(x)        context.fillStyle = 'lightgreen'        context.fillRect(0,400,800,200)        context.fillStyle = 'black'        context.font = '20px Arial'        context.fillText('Дома он захотел поспать', 10, 430)    }if(page == 5){        context.fillStyle = 'white'        context.fillRect(0,0,800,600)        context.fillStyle = 'green'        context.fillRect(0,0,50,50)        border('pink')        context.fillStyle = 'darkgreen'        context.fillRect(0,300,300,200)        context.fillStyle = 'lightgreen'        context.fillRect(0,400,800,200)        context.fillStyle = 'black'        context.font = '20px Arial'        context.fillText('zzz', 10, 430)    }if(page == 6){        context.fillStyle = 'white'        context.fillRect(0,0,800,600)        context.fillStyle = 'green'        context.fillRect(0,0,50,50)        border('pink')        tree(x)        context.fillStyle = 'lightgreen'        context.fillRect(0,400,800,200)        context.fillStyle = 'black'        context.font = '20px Arial'        context.fillText('Он позвал своего друга поиграть вместе', 10, 430)    }if(page == 7){        context.fillStyle = 'white'        context.fillRect(0,0,800,600)        context.fillStyle = 'green'        context.fillRect(0,0,50,50)        border('pink')        tree(x)        context.fillStyle = 'lightgreen'        context.fillRect(0,400,800,200)        context.fillStyle = 'black'        context.font = '20px Arial'        context.fillText('*играют в мортал комбат*', 10, 430)   }}function border(color){    context.fillStyle = color    context.fillRect(0,0,40,600)    context.fillRect(0,0,800,40)    context.fillRect(760,0,40,600)}function switchScene (key) {    if (key.code == 'ArrowRight'){        page = 1    }    if (key.code == 'ArrowLeft'){        page -= 1    }    if (page > 7){        page = 1    }    if (page < 1){        page = 7    }}function tree(xStart){    context.fillStyle = 'forestgreen'    if (page >= 3){      context.fillStyle = 'darkgreen'    }    context.fillRect(xStart, 310, 50, 100)    if (x < 0){        x = 700    }}window.addEventListener('keydown', switchScene)setInterval(gameCycle, 10)