Skip to content

Instantly share code, notes, and snippets.

@SewBak

SewBak/Game.html

Created May 22, 2020 09:27
Show Gist options
  • Save SewBak/d86076260e67290fc3c31f4160addd02 to your computer and use it in GitHub Desktop.
Save SewBak/d86076260e67290fc3c31f4160addd02 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Game.html
<html>
<head><title>GAME</title></head>
<body style = "background-color:black;margin:0px;padding:0px;" onkeydown = "keyRedirectDown(event)" onkeyup = "keyRedirectUp(event)">
<canvas id = "c" width = "1200" height = "600" style = "border:4px solid green;margin-top:4px;"></canvas>
<script id = "s">
var d = document.getElementById("c").getContext("2d");
const sp = 8;
const obsp = 6;
const obsi = 25;
var x = 100;
var y = 250;
const si = 50;
var startable = true;
var to = null;
var obs1;
var obs2;
var obs3;
var obs4;
var obs5;
var obs6;
var obs7;
var obs8;
window.onload = function(){main();};
function main(){
d.fillStyle = "#56FF00";
d.fillRect(x,y,si,si);
window.obstacleStart = setInterval(createObs,500);
window.checkCanvas = setInterval(canvasCollision,20);
window.checkObs = setInterval(obstacleCollision,20);
window.checkPlayer = setInterval(playerCollision,20);
window.update = setInterval(gameUpdate,20);
}
function gameUpdate(){
if(obs1 != null){
d.clearRect(obs1.x,obs1.y,obsi,obsi);
obs1.x = obs1.x - obsp;
d.fillRect(obs1.x,obs1.y,obsi,obsi);
}
if(obs2 != null){
d.clearRect(obs2.x,obs2.y,obsi,obsi);
obs2.x = obs2.x - obsp;
d.fillRect(obs2.x,obs2.y,obsi,obsi);
}
if(obs3 != null){
d.clearRect(obs3.x,obs3.y,obsi,obsi);
obs3.x = obs3.x - obsp;
d.fillRect(obs3.x,obs3.y,obsi,obsi);
}
if(obs4 != null){
d.clearRect(obs4.x,obs4.y,obsi,obsi);
obs4.x = obs4.x - obsp;
d.fillRect(obs4.x,obs4.y,obsi,obsi);
}
if(obs5 != null){
d.clearRect(obs5.x,obs5.y,obsi,obsi);
obs5.x = obs5.x - obsp;
d.fillRect(obs5.x,obs5.y,obsi,obsi);
}
if(obs6 != null){
d.clearRect(obs6.x,obs6.y,obsi,obsi);
obs6.x = obs6.x - obsp;
d.fillRect(obs6.x,obs6.y,obsi,obsi);
}
if(obs7 != null){
d.clearRect(obs7.x,obs7.y,obsi,obsi);
obs7.x = obs7.x - obsp;
d.fillRect(obs7.x,obs7.y,obsi,obsi);
}
if(obs8 != null){
d.clearRect(obs8.x,obs8.y,obsi,obsi);
obs8.x = obs8.x - obsp;
d.fillRect(obs8.x,obs8.y,obsi,obsi);
}
if(x + si >= 1200){win();clearInterval(update);}
}
function keyRedirectDown(key){
if (to != null){
if (to == 1 && (key.keyCode == 68 || key.keyCode == 87 || key.keyCode == 83)){
clearInterval(str);
startable = true;
moveStart(codeToDir(key.keyCode));
}else if(to == 2 && (key.keyCode == 65 || key.keyCode == 87 || key.keyCode == 83)){
clearInterval(str);
startable = true;
moveStart(codeToDir(key.keyCode));
}else if(to == 3 && (key.keyCode == 68 || key.keyCode == 65 || key.keyCode == 83)){
clearInterval(str);
startable = true;
moveStart(codeToDir(key.keyCode));
}else if(to == 4 && (key.keyCode == 68 || key.keyCode == 87 || key.keyCode == 65)){
clearInterval(str);
startable = true;
moveStart(codeToDir(key.keyCode));
}
}
switch(key.keyCode){
case 65:
moveStart(1);
break;
case 68:
moveStart(2);
break;
case 87:
moveStart(3);
break;
case 83:
moveStart(4);
break;
}
}
function keyRedirectUp(key){
if (to == 1 && key.keyCode == 65){
clearInterval(str);
startable = true;
to = null;
}else if(to == 2 && key.keyCode == 68){
clearInterval(str);
startable = true;
to = null;
}else if(to == 3 && key.keyCode == 87){
clearInterval(str);
startable = true;
to = null;
}else if(to == 4 && key.keyCode == 83){
clearInterval(str);
startable = true;
to = null;
}
}
function moveStart(dir){
to = dir;
if(startable == true){
window.str = window.setInterval(function(){moveLoop(dir)},20);
startable = false;
}
}
function moveLoop(dir){
d.clearRect(x,y,si,si);
switch(dir){
case 1:
x= x - sp;
break;
case 2:
x+= sp;
break;
case 3:
y= y - sp;
break;
case 4:
y+=sp;
break;
}
d.fillRect(x,y,si,si);
}
function codeToDir(code){
if(code == 65){
return 1;
}else if(code == 68){
return 2;
}else if(code == 87){
return 3;
}else if(code == 83){
return 4;
}
}
function obs(){
this.y = Math.floor(Math.random() * 600);
this.x = 1200;
}
function createObs(){
if(obs1 == null){obs1 = new obs();d.fillRect(obs1.x,obs1.y,obsi,obsi);return}
else if(obs2 == null){obs2 = new obs();d.fillRect(obs2.x,obs2.y,obsi,obsi);return;}
else if(obs3 == null){obs3 = new obs();d.fillRect(obs3.x,obs3.y,obsi,obsi);return;}
else if(obs4 == null){obs4 = new obs();d.fillRect(obs4.x,obs4.y,obsi,obsi);return;}
else if(obs5 == null){obs5 = new obs();d.fillRect(obs5.x,obs5.y,obsi,obsi);return;}
else if(obs6 == null){obs6 = new obs();d.fillRect(obs6.x,obs6.y,obsi,obsi);return;}
else if(obs7 == null){obs7 = new obs();d.fillRect(obs7.x,obs7.y,obsi,obsi);return;}
else if(obs8 == null){obs8 = new obs();d.fillRect(obs8.x,obs8.y,obsi,obsi);return;}
}
function obstacleCollision(){
if(obs1 != null){
if(obs1.x + obsi < 0){obs1 = null}
}
if(obs2 != null){
if(obs2.x + obsi < 0){obs2 = null}
}
if(obs3 != null){
if(obs3.x + obsi < 0){obs3 = null}
}
if(obs4 != null){
if(obs4.x + obsi < 0){obs4 = null}
}
if(obs5 != null){
if(obs5.x + obsi < 0){obs5 = null}
}
if(obs6 != null){
if(obs6.x + obsi < 0){obs6 = null}
}
if(obs7 != null){
if(obs7.x + obsi < 0){obs7 = null}
}
if(obs8 != null){
if(obs8.x + obsi < 0){obs8 = null}
}
}
function canvasCollision(){
if(x < 0){
x = 0;
d.fillRect(x,y,si,si);
clearInterval(str);
startable = true;
to = null;
}
if(x + si > 1200){
x = 1200 - si;
d.fillRect(x,y,si,si);
clearInterval(str);
startable = true;
to = null;
}
if(y < 0){
y = 0;
d.fillRect(x,y,si,si);
clearInterval(str);
startable = true;
to = null;
}
if( y > 600){
y = 600 - si;
d.fillRect(x,y,si,si);
clearInterval(str);
startable = true;
to = null;
}
}
function playerCollision(){
if (!(x + si < obs1.x || y > obs1.y + obsi || x > obs1.x + obsi || y + si < obs1.y)){lose();clearInterval(checkPlayer)}
if (!(x + si < obs2.x || y > obs2.y + obsi || x > obs2.x + obsi || y + si < obs2.y)){lose();clearInterval(checkPlayer)}
if (!(x + si < obs3.x || y > obs3.y + obsi || x > obs3.x + obsi || y + si < obs3.y)){lose();clearInterval(checkPlayer)}
if (!(x + si < obs4.x || y > obs4.y + obsi || x > obs4.x + obsi || y + si < obs4.y)){lose();clearInterval(checkPlayer)}
if (!(x + si < obs5.x || y > obs5.y + obsi || x > obs5.x + obsi || y + si < obs5.y)){lose();clearInterval(checkPlayer)}
if (!(x + si < obs6.x || y > obs6.y + obsi || x > obs6.x + obsi || y + si < obs6.y)){lose();clearInterval(checkPlayer)}
if (!(x + si < obs7.x || y > obs7.y + obsi || x > obs7.x + obsi || y + si < obs7.y)){lose();clearInterval(checkPlayer)}
if (!(x + si < obs8.x || y > obs8.y + obsi || x > obs8.x + obsi || y + si < obs8.y)){lose();clearInterval(checkPlayer)}
}
function lose(){
alert("You lost");
clearInterval(update);
document.getElementById("c").remove();
}
function win(){
alert("You won!");
document.getElementById("c").remove();
document.getElementById("s").innerHTML = "";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment