.gif)
.png)
.gif)
Games!
ButterflyRecordingGif2.gif)
Butterfly Game
Fly like a butterfly!
BearRecordingGif2.gif)
Build-A-Bear
A simple drag-and-drop dress up game :)
QuizRecording2.gif)
Buggy Quiz
Find out what bug you are in this quiz!
Notes
Butterfly Game
My first attempt at making this I used the W3 Schools tutorial, but when I tried to add a sprite to it, I ran into a lot of issues. I ended up starting from stratch with this youtube tutorial, which was a lot easier to customise since it has clearer orginization. I highly recommend using that one if you want to try something similar, especially if you're a complete beginner like me.
Bear Dress Up Game
This one was the easiest by far. Each image is its own draggable div. I don't remember which resources/tutorials I used, but you can see the js below:
read more
dragElement(document.getElementById("tophat")); dragElement(document.getElementById("scarf"));
// make dragElement for each accessory
function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null; document.onmousemove = null; } }
Other:
