previous

page 13

next

If your memory's as poor as mine you probably had to revisit the animation we did in Project 4. Hopefully you've noticed that the top left arrow always takes you to the overview of this project but, more importantly, there's access to an index of all the projects as well.

additions to index.html
<script src='rock_clicked.js'></script>
...
<img src='images/scenes/rock.png' id='rock' class='item' onClick='rock_clicked(this);'>
additions to styles.css
#rock {
grid-row: 5 / span 6;
grid-column: 3 / span 8;
}
.move {
transform:translateX(100vmin);
transition:transform 5s;
}
change one line in set_scene.js
if (n==5) {Show('yellow'); Show('rock');}
new file: rock_clicked.js
function rock_clicked(image) {
image.classList.add('move');
}

If you've given it a try, you'll have noticed that it's almost perfect except for the fact that the rock image when clicked extends past the scene edge.
To fix this you will need to add the following line to the #game section in your styles.css file.

overflow: hidden;
previous
next