Skip to content

Instantly share code, notes, and snippets.

@CyberDNIWE

CyberDNIWE/RunningMan.html

Last active April 25, 2018 17:43
Show Gist options
  • Save CyberDNIWE/4dc459f44b353fcdf61ad6c42c449764 to your computer and use it in GitHub Desktop.
Save CyberDNIWE/4dc459f44b353fcdf61ad6c42c449764 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
RunningMan.html
<!DOCTYPE html>
<html>
<head>
<title>Running Man</title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
ImageFile = "https://gist.githubusercontent.com/IsoPippel/4dc459f44b353fcdf61ad6c42c449764/raw/e9431064ee651524ab916a28e72336abd103cc71/running.png"
ImageFileP2 = "https://gist.githubusercontent.com/IsoPippel/4dc459f44b353fcdf61ad6c42c449764/raw/e9431064ee651524ab916a28e72336abd103cc71/running2.png"
var screenWidth;
var screenHeight;
var gameImage;
var character;
var character2;
var p1step = null;
var p2step = null;
var winner = null;
var p1win = 0;
var p2win = 0;
var startTime;
var endTime
var score;
$(document).ready(function() {
"use strict";
window.addEventListener("message", function(evt) {
if (evt.data.messageType === "LOAD") {
p1win = evt.data.gameState.p1win;
p2win = evt.data.gameState.p2win;
draw();
} else if (evt.data.messageType === "ERROR") {
alert(evt.data.info);
}
});
var message = {
messageType: "SETTING",
options: {
"width": 1200, //Integer
"height": 400 //Integer
}
};
window.parent.postMessage(message, "*");
$("#save").click(function() {
var msg = {
"messageType": "SAVE",
"gameState": {
"p1win": p1win,
"p2win": p2win
}
};
window.parent.postMessage(msg, "*");
});
$("#load").click(function() {
var msg = {
"messageType": "LOAD_REQUEST",
};
window.parent.postMessage(msg, "*");
});
init();
});
function init() {
canvas = document.getElementById('game');
ctx = canvas.getContext && canvas.getContext('2d');
screenWidth = canvas.width;
screenHeight = canvas.height;
gameImage = new Image();
gameImage.src = ImageFile;
gameImage.onload = imagesReady;
window.addEventListener('keydown', keyDownHandler, false);
setInterval(function() {
draw();
}, 1);
}
function imagesReady() {
character = new Sprite(gameImage, 0, 40, 160, 160);
gameImage2 = new Image();
gameImage2.src = ImageFileP2;
character2 = new Sprite(gameImage2, 0, 200, 160, 160);
draw();
}
function Sprite(gameImage, x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.imageList = new Array();
this.imageList[0] = new Rect(0, 0, 160, 160);
this.imageList[1] = new Rect(160, 0, 160, 160);
this.imageList[2] = new Rect(320, 0, 160, 160);
this.curImg = 0;
this.gameImage = gameImage;
this.draw = function(g) {
g.drawImage(this.gameImage,
this.imageList[this.curImg].x,
this.imageList[this.curImg].y,
this.imageList[this.curImg].w,
this.imageList[this.curImg].h,
this.x, this.y, this.w, this.h);
};
}
function Rect(x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
function keyDownHandler(e) {
switch (e.keyCode) {
case 37: //left;
if (p1step == false) {
character.x += 10;
character.curImg++;
character.curImg %= 3;
p1step = true;
}
break;
case 39: //right;
if (p1step == true) {
character.x += 10;
character.curImg++;
character.curImg %= 3;
p1step = false;
}
break;
case 90: //left for character2;
if (p2step == false) {
character2.x += 10;
character2.curImg++;
character2.curImg %= 3;
p2step = true;
}
break;
case 88: //right for character2;
if (p2step == true) {
character2.x += 10;
character2.curImg++;
character2.curImg %= 3;
p2step = false;
}
break;
case 32: //space
if (p1step == null || p2step == null) {
newGame();
}
break;
}
draw();
if (character.x + 130 > 1100 && winner == null) {
p1step = null;
p2step = null;
winner = "Player1";
p1win++;
endTime = new Date().getTime()
// send score to service
score = 100000 - endTime + startTime
var msg = {
"messageType": "SCORE",
"score": score
};
window.parent.postMessage(msg, "*");
}
if (character2.x + 130 > 1100 && winner == null) {
p1step = null;
p2step = null;
winner = "Player2";
p2win++;
endTime = new Date().getTime()
// send score to service
score = 100000 - endTime + startTime
var msg = {
"messageType": "SCORE",
"score": score
};
window.parent.postMessage(msg, "*");
}
}
function newGame() {
winner = null;
character.x = 0;
character2.x = 0;
p1step = false;
p2step = false;
startTime = new Date().getTime();
}
function draw() {
ctx.fillStyle = "#346638";
ctx.fillRect(0, 0, 1200, 400);
ctx.strokeStyle = "white";
ctx.lineWidth = 10;
ctx.moveTo(1100, 0);
ctx.lineTo(1100, 400);
ctx.stroke();
ctx.fillStyle = "white";
ctx.font = "30px Comic Sans MS";
ctx.fillText("Player1 " + p1win + " : " + p2win + " Player2", 150, 50);
character.draw(ctx);
character2.draw(ctx);
if (p1step == null && p2step == null) {
ctx.font = "50px Comic Sans MS";
ctx.fillText("Press Space To Start!", 320, 300);
}
if (winner != null) {
ctx.font = "30px Comic Sans MS";
score = 100000 - endTime + startTime
ctx.fillText("Score: " + score, 550, 50);
ctx.font = "50px Comic Sans MS";
ctx.fillText("The Winner is " + winner, 320, 200);
} else {
ctx.font = "30px Comic Sans MS";
ctx.fillText("Time: " + (new Date().getTime() - startTime), 550, 50);
}
}
</script>
</head>
<body>
<div>
<canvas id='game' width='1200' height='400' />
</div>
<button id="save">Save</button>
<button id="load">Load</button>
<hr />
<p>Game Instruction:<br/>Player1 use Left button and Right button to run.<br />Player2 use Z key and X key to run.
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment