CyberDNIWE/RunningMan.html

## running.png

      
    Raw
  

              running.png
            
          
## running2.png

      
    Raw
  

              running2.png
            
          
## 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>
	<!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>