Click here for free DL of the app version that can save data.

No:1250

107

A game where a red circle with eyes was sleeping a..ALL
Developer User3280｜Date and time 23/6/18 9:18:05
Build time 66.612 sec｜Game capacity 5.562KB｜

.

¡Despierta, Formamon!

¡Formamon escondido en la montaña blanca es el enemigo más fuerte en el juego! ¡Derrota a todos los demás para poder enfrentarte a él!

→ 　

0　

0　

　

　
　
　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

.

<!DOCTYPE html>
<html>
<head>
	<title>¡Despierta, Formamon!</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #ffe5b4;
			text-align: center;
		}
		#canvas {
			border: 2px solid black;
		}
		h1 {
			color: red;
			font-size: 40px;
		}
		p {
			color: #5f9ea0;
			font-size: 20px;
		}
		.button {
			display: inline-block;
			background-color: #4CAF50;
			color: white;
			padding: 10px 20px;
			text-align: center;
			font-size: 16px;
			margin: 10px;
		}
		.button:hover {
			background-color: #3e8e41;
		}
	</style>
</head>
<body>
	<h1>¡Despierta, Formamon!</h1>
	<canvas id="canvas" width="500" height="500"></canvas>
	<p>¡Formamon escondido en la montaña blanca es el enemigo más fuerte en el juego! ¡Derrota a todos los demás para poder enfrentarte a él!</p>
	<button class="button" onclick="startGame()">¡Comenzar!</button>

<script>
		var myGamePiece;
		var myObstacles = [];
		var myFormamon = [];
		var myScore;

function startGame() {
			myGamePiece = new component(40, 40, "red", 230, 230);
			myScore = new component("20px", "Consolas", "#000000", 10, 30, "text");
			myObstacles.push(new component(30, 200, "#8B008B", -30, 0));
			myObstacles.push(new component(30, 200, "#8B008B", 500, 0));
			myObstacles.push(new component(200, 30, "#8B008B", 250, -30));
			myObstacles.push(new component(200, 30, "#8B008B", 250, 500));
			myFormamon.push(new component(40, 40, "blue", 50, 50));
			myFormamon.push(new component(40, 40, "green", 400, 50));
			myFormamon.push(new component(40, 40, "yellow", 50, 400));
			myFormamon.push(new component(40, 40, "white", 400, 400));
			myGameArea.start();
		}

var myGameArea = {
			canvas : document.getElementById("canvas"),
			start : function() {
				this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width, this.canvas.height);
				this.context = this.canvas.getContext("2d");
				this.interval = setInterval(updateGameArea, 20);
				window.addEventListener("keydown", function(e) {
					myGameArea.keys = (myGameArea.keys || []);
					myGameArea.keys[e.keyCode] = (e.type == "keydown");
				})
				window.addEventListener("keyup", function(e) {
					myGameArea.keys[e.keyCode] = (e.type == "keydown");
				})
			},
			stop : function() {
				clearInterval(this.interval);
			},
			clear : function() {
				this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			}
		}

function component(width, height, color, x, y, type) {
			this.type = type;
			if (type == "text") {
				this.text = color;
			}
			this.width = width;
			this.height = height;
			this.speedX = 0;
			this.speedY = 0;
			this.gravity = 0.05;
			this.gravitySpeed = 0;
			this.x = x;
			this.y = y;
			this.color = color;
			this.update = function() {
				ctx = myGameArea.context;
				if (this.type == "text") {
					ctx.font = this.width + " " + this.height;
					ctx.fillStyle = this.color;
					ctx.fillText(this.text, this.x, this.y);
				} else {
					ctx.fillStyle = this.color;
					ctx.fillRect(this.x, this.y, this.width, this.height);
				}
			}
			this.newPos = function() {
				this.gravitySpeed += this.gravity;
				this.x += this.speedX;
				this.y += this.speedY + this.gravitySpeed;
				this.hitBottom();
				this.hitTop();
				this.hitRight();
				this.hitLeft();
			}
			this.hitBottom = function() {
				var bottom = myGameArea.canvas.height - this.height;
				if (this.y > bottom) {
					this.y = bottom;
					this.gravitySpeed = 0;
				}
			}
			this.hitTop = function() {
				var top = 0;
				if (this.y < top) {
					this.y = top;
					this.gravitySpeed = 0;
				}
			}
			this.hitRight = function() {
				var right = myGameArea.canvas.width - this.width;
				if (this.x > right) {
					this.x = right;
				}
			}
			this.hitLeft = function() {
				var left = 0;
				if (this.x < left) {
					this.x = left;
				}
			}
			this.crashWith = function(otherobj) {
				var myleft = this.x;
				var myright = this.x + (this.width);
				var mytop = this.y;
				var mybottom = this.y + (this.height);
				var otherleft = otherobj.x;
				var otherright = otherobj.x + (otherobj.width);
				var othertop = otherobj.y;
				var otherbottom = otherobj.y + (otherobj.height);
				var crash = true;
				if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
					crash = false;
				}
				return crash;
			}
		}

function updateGameArea() {
			myGameArea.clear();
			myGamePiece.speedX = 0;
			myGamePiece.speedY = 0;
			if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -4; }
			if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 4; }
			if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -4; }
			if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 4; }
			myGamePiece.newPos();
			myGamePiece.update();
			myScore.text="SCORE: " + (myFormamon.length-4);
			myScore.update();
			for (i = 0; i < myObstacles.length; i++) {
    			myObstacles[i].update();
    			if (myGamePiece.crashWith(myObstacles[i])) {
    				myGameArea.stop();
    				alert("¡Te has chocado contra un obstáculo! Inténtalo de nuevo.");
    				return;
    			}
			}
			for (i = 0; i < myFormamon.length; i++) {
    			myFormamon[i].update();
    			if (myGamePiece.crashWith(myFormamon[i])) {
    				myFormamon.splice(i, 1);
    				break;
    			}
			}
			if (myFormamon.length == 0) {
				myGameArea.stop();
				alert("¡Felicidades! Has ganado el juego.");
				return;
			}
		}
	</script>

</body>
</html>