WIP - Game

Tutorials of (Wip - game) by Flipfloop

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>WIP - Game</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id = "game">
	<div id = "player">
		<div class = "eyes eye_R"></div>
		<div class = "eyes eye_L"></div>
		<div class = "mouth"></div>
	</div>
</div>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#game {
  position: absolute;
  left: calc((100% - 800px)/2);
  height: 500px;
  width: 800px;
  border: 2px solid black;
}

.block {
  height: 50px;
  width: 50px;
  position: absolute;
}

.stone {
  background-color: black;
}

.lava {
  background-color: red;
}

#player {
  height: 50px;
  width: 50px;
  background-color: #3747C0;
  bottom: 0;
  position: absolute;
}
#player .eyes {
  border-radius: 50%;
  background-color: white;
  position: absolute;
  height: 10px;
  width: 10px;
}
#player .eye_R {
  left: 7px;
  top: 10px;
}
#player .eye_L {
  left: 32px;
  top: 10px;
}
#player .mouth {
  height: 8.5px;
  width: 32px;
  background-color: white;
  border-radius: 5px;
  left: calc((50px - 32px)/2);
  bottom: 10px;
  position: absolute;
}

.ypos-0 {
  bottom: 0px;
  position: absolute;
}

.ypos-1 {
  bottom: 50px;
  position: absolute;
}

.ypos-2 {
  bottom: 100px;
  position: absolute;
}

.ypos-3 {
  bottom: 150px;
  position: absolute;
}

.ypos-4 {
  bottom: 200px;
  position: absolute;
}

.ypos-5 {
  bottom: 250px;
  position: absolute;
}

.ypos-6 {
  bottom: 300px;
  position: absolute;
}

.ypos-7 {
  bottom: 350px;
  position: absolute;
}

.ypos-8 {
  bottom: 400px;
  position: absolute;
}

.xpos-0 {
  left: 0px;
  /*position: absolute;*/
}

.xpos-1 {
  left: 50px;
  /*position: absolute;*/
}

.xpos-2 {
  left: 100px;
  /*position: absolute;*/
}

.xpos-3 {
  left: 150px;
  /*position: absolute;*/
}

.xpos-4 {
  left: 200px;
  /*position: absolute;*/
}

.xpos-5 {
  left: 250px;
  /*position: absolute;*/
}

.xpos-6 {
  left: 300px;
  /*position: absolute;*/
}

.xpos-7 {
  left: 350px;
  /*position: absolute;*/
}

.xpos-8 {
  left: 400px;
  /*position: absolute;*/
}

.xpos-9 {
  left: 450px;
  /*position: absolute;*/
}

.xpos-10 {
  left: 500px;
  /*position: absolute;*/
}

.xpos-11 {
  left: 550px;
  /*position: absolute;*/
}

.xpos-12 {
  left: 600px;
  /*position: absolute;*/
}

.xpos-13 {
  left: 650px;
  /*position: absolute;*/
}

.xpos-14 {
  left: 700px;
  /*position: absolute;*/
}

.xpos-15 {
  left: 750px;
  /*position: absolute;*/
}

.xpos-16 {
  left: 800px;
  /*position: absolute;*/
}
/* Downloaded from https://www.codeseek.co/ */
var jQueryVersion = function() {
		var game_anim = function() {

			var level = [
				[0, 1, "l", 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, "l", "l", 1],
				[0, 0, 0, 0, 2, 2, 2, 2, 2, 2],
				[0, 0, 0, 0, 0, 3, 3, 0, 3],
			];

			var $player = $("#player");
			var $game = $("#game");

			for (var i = 0; i < level.length; i++) {
				for (var j = 0; j < level[i].length; j++) {

					var n = level[i][j];

					if (n === 1) {
						$("<div>", {
							"class": "block stone ypos-0 xpos-" + [j]
						}).appendTo("#game");

					}

					if (n === 2) {
						$("<div>", {
							"class": "block stone ypos-1 xpos-" + [j]
						}).appendTo("#game");
					}
					if (n === 3) {
						$("<div>", {
							"class": "block stone ypos-2 xpos-" + [j]
						}).appendTo("#game");

					}

					if (n === 4) {
						$("<div>", {
							"class": "block stone ypos-3 xpos-" + [j]
						}).appendTo("#game");
					}

					if (n === "l") {
						$("<div>", {
							"class": "block lava ypos-" + [i] + " xpos-" + [j]
						}).appendTo("#game");
					}

				}
			}

			$(document).keydown(function(event) { // keycodes: left = 37, right = 39
				if (event.which == 39 || event.which == 68) { // right arrow or D
					if ($player.position().left < $game.width() - $player.width()) {
						$player.css("left", "+=10");
					}
				}
				if (event.which == 37 || event.which == 81 || event.which == 65) { // left arrow or Q on AZERTY or A on QWERTY
					if ($player.position().left > 0) {
						$player.css("left", "-=10");
					}
				}

				if (event.which == 38) {
					if ($player.position().top > 0) {
						$player.css("top", "-=10");
					}
				}
				if (event.which == 40) {
					if ($player.position().top < 500 - $player.height()) {
						$player.css("top", "+=10");
					}
				}

			});

			/*var level = [
				[
					[0, 1, "l", 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, "l", "l", 1],
				[0, 0, 0, 0, 2, 2, 2, 2, 2, 2],
				[0, 0, 0, 0, 0, 3, 3, 0, 3]
				],
				
				[
					[0, 1, "l", 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, "l", "l", 1],
				[0, 0, 0, 0, 2, 2, 2, 2, 2, 2],
				[0, 0, 0, 0, 0, 3, 3, 0, 3]
				]
				
			];

			for (var i = 0; i < level.length; i++) {
				for (var j = 0; j < level[i].length; j++) {
					for (var k = 0; k < level[i][j].length; k++) {

					var n = level[i][j][k];
					var m = level[i];
					console.log(m)

					if (n === 1) {
						$("<div>", {
							"class": "block stone ypos-0 xpos-" + [k]
						}).appendTo(".game");

					}

					if (n === 2) {
						$("<div>", {
							"class": "block stone ypos-1 xpos-" + [k]
						}).appendTo(".game");
					}
					if (n === 3) {
						$("<div>", {
							"class": "block stone ypos-2 xpos-" + [k]
						}).appendTo(".game");

					}

					if (n === 4) {
						$("<div>", {
							"class": "block stone ypos-3 xpos-" + [k]
						}).appendTo(".game");
					}
					
					
					if (n === "l") {
						$("<div>", {
							"class": "block lava ypos-" + [j] + " xpos-" + [k]
						}).appendTo(".game");
					}
					
				}
				}
			}*/

		}

		$(document).ready(function() {

			game_anim();

		});
	}
	//jQueryVersion();

var javascriptVersion = function() {

	var game_anim = function() {

		var level = [
			[0, 1, "l", 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, "l", "l", 1],
			[0, 0, 0, 0, 2, 2, 2, 2, 2, 2],
			[0, 0, 0, 0, 0, 3, 3, 0, 3],
		];

		var player = document.getElementById('player');
		var game = document.getElementById("game");

		var left = 0;
		var top = 0;

		for (var i = 0; i < level.length; i++) {
			for (var j = 0; j < level[i].length; j++) {

				var n = level[i][j];

				if (n === 1) {

					var blocks = document.createElement("div");
					blocks.classList.add("block", "stone", "ypos-0", "xpos-" + j);
					game.appendChild(blocks);

				}

				if (n === 2) {
					var blocks = document.createElement("div");
					blocks.classList.add("block", "stone", "ypos-1", "xpos-" + j);
					game.appendChild(blocks);
				}
				if (n === 3) {
					var blocks = document.createElement("div");
					blocks.classList.add("block", "stone", "ypos-2", "xpos-" + j);
					game.appendChild(blocks);
				}

				if (n === 4) {
					var blocks = document.createElement("div");
					blocks.classList.add("block", "stone", "ypos-3", "xpos-" + j);
					game.appendChild(blocks);
				}

				if (n === "l") {
					var blocks = document.createElement("div");
					blocks.classList.add("block", "lava", "ypos-0", "xpos-" + j);
					game.appendChild(blocks);
				}

			}
		}

		document.addEventListener('keydown', function(event) {
			event.preventDefault();
			if (event.keyCode == 39 || event.keyCode == 68) { // right arrow or D
				if (player.offsetLeft < game.getBoundingClientRect().width - player.getBoundingClientRect().width) {
					left = player.offsetLeft + 10;
					player.style.left = left.toString() + "px";
				}
			}
			if (event.keyCode == 37 || event.keyCode == 81 || event.keyCode == 65) { // left arrow or Q on AZERTY or A on QWERTY
				if (player.offsetLeft > 0) {
					left = player.offsetLeft - 10;
					player.style.left = left.toString() + "px";
				}
			}
			if (event.keyCode == 38) {
				if (player.offsetTop > 0) {
					top = player.offsetTop - 10;
					player.style.top = top.toString() + "px";
				}
			}
			if (event.keyCode == 40) {
				if (player.offsetTop < (500 - player.getBoundingClientRect().height)) {
					top = player.offsetTop + 10;
					player.style.top = top.toString() + "px";
				}
			}
		});

	}
	game_anim();
}

javascriptVersion();

This awesome code ( WIP - Game ) is write by FlipFloop, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © FlipFloop