Skip to content

Instantly share code, notes, and snippets.

@ArtikusHG

ArtikusHG/game.html

Created May 5, 2018 10:00
Show Gist options
  • Save ArtikusHG/858370406fd80736dc945cedf38810c5 to your computer and use it in GitHub Desktop.
Save ArtikusHG/858370406fd80736dc945cedf38810c5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
game.html
<html>
<head>
<title>A game</title>
<script>
var width;
var height;
function getScreenSize() {
width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
height -= 110;
width -= 110;
}
document.onkeyup = function(e) {
if(e.keyCode == 40) move(1, 1, "player");
if(e.keyCode == 38) move(1, 2, "player");
if(e.keyCode == 37) move(2, 2, "player");
if(e.keyCode == 39) move(2, 1, "player");
}
function move(direction, type, object) {
// Move to top/bottom/left/right
if(direction == 1) var move = document.getElementById(object).style.marginTop.replace("px", "");
if(direction == 2) var move = document.getElementById(object).style.marginLeft.replace("px", "");
move = Number(move);
if(type == 1) move = move + 50;
if(type == 2) move = move - 50;
console.log(move);
if(direction == 1 && type == 1 && move > height) return;
if(direction == 1 && type == 2 && move < 0) return;
if(direction == 2 && type == 1 && move > width) return;
if(direction == 2 && type == 2 && move < 0) return;
if(direction == 1) document.getElementById(object).style.marginTop = move.toString() + "px";
if(direction == 2) document.getElementById(object).style.marginLeft = move.toString() + "px";
}
function randomShit() {
var one = Math.floor(Math.random() * 2) + 1;
var two = Math.floor(Math.random() * 2) + 1;
move(one, two, "ai");
setTimeout("randomShit()", 100);
if(document.getElementById("ai").style.marginTop == document.getElementById("player").style.marginTop && document.getElementById("ai").style.marginLeft == document.getElementById("player").style.marginLeft) document.write("You won!");
}
</script>
</head>
<body onload="getScreenSize();randomShit()" onresize="getScreenSize()">
<div id="ai"></div>
<div id="player"></div>
</body>
<style>
#ai {
position: absolute;
margin-top: 10px;
margin-left: 10px;
background: #e17055;
width: 100px;
height: 100px;
border: 5px solid #4b6584;
}
#player {
position: absolute;
margin-top: 0px;
margin-left: 0px;
background: #fdcb6e;
width: 100px;
height: 100px;
border: 5px solid #4b6584;
}
body {background:#74b9ff}
</style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment