Skip to content

Instantly share code, notes, and snippets.

@StefKors
Created Apr 5, 2019
Embed
What would you like to do?
A gyroscopic golf game built during the Hackers and Designers Walking Signals Workshop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>oh my golf</title>
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
background: pink;
margin: 0;
position: relative;
overflow: hidden;
}
.garden {
position: relative;
width: 100vw;
height: 100vh;
border: 10px solid white;
}
.ball {
position: absolute;
top: 50vh;
left: 50vw;
width: 20px;
height: 20px;
background: white;
border-radius: 100%;
}
.hole {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid;
border-radius: 100%;
transition: 0.1s ease-out;
}
</style>
</head>
<body>
<div class="garden">
<div class="ball"></div>
<div class="hole"></div>
</div>
</body>
<script>
// this game is based on this MDN article
// https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation
// add all element to easy variables
var ball = document.querySelector(".ball");
var garden = document.querySelector(".garden");
// used for calculating width positions later on
var maxY = garden.clientHeight - ball.clientHeight;
function handleOrientation(event) {
// x and y position of the gyroscope
var x = event.beta;
var y = event.gamma;
// To make computation easier we shift the range of x and y
x += 100;
y += 90;
// moving the x and y to viewHeight and viewWidth positions
var top = x / 2 + "vh";
var left = (maxY * y) / 1000 + "vw";
// setting the x and y styles
ball.style.top = top;
ball.style.left = left;
// get the positions of the hole
var hole_top = document.querySelector(".hole").getBoundingClientRect()
.top;
var hole_left = document.querySelector(".hole").getBoundingClientRect()
.left;
// get the positions of the ball
var ball_top = document.querySelector(".ball").getBoundingClientRect()
.top;
var ball_left = document.querySelector(".ball").getBoundingClientRect()
.left;
// check if the hole and the ball are between -5 and +5 from each other
if (
hole_top - ball_top <= 5 &&
hole_top - ball_top >= -5 &&
hole_left - ball_left <= 5 &&
hole_left - ball_left >= -5
) {
// reset the hole position
// this would be a good place to add
// - success sounds
// - move the player to a second level
setHolePosition();
}
}
window.addEventListener("deviceorientation", handleOrientation);
function random(min, max) {
// this returns a random number between
// a minimun and maximum number
return Math.floor(Math.random() * max) + min;
}
function setHolePosition() {
// make it easy to select the hole element
var hole = document.querySelector(".hole");
// set the x and y position of the hole
hole.style.top = random(10, 80) + "vh";
hole.style.left = random(10, 80) + "vw";
}
// start the game by setting a hole position
setHolePosition();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment