A game that the player must move a red pixel to a blue pixel to win but not touch yellow pixels or he loses's game

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

No:1207

214

←

Prev Next

→

A game that the player must move a red pixel to a ..ALL
Developer User3280｜Date and time 23/6/18 8:24:16
Build time 23.648 sec｜Game capacity 2.099KB｜

Script

Este juego se llama Pixel Juego. El objetivo del jugador es mover el pixel rojo al cuadrado azul para ganar sin tocar ninguno de los píxeles amarillos o perderá. El juego se puede jugar en un dispositivo móvil y utiliza muchos emojis.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Pixel Juego</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background: #f9f9f9;
		}

canvas {
			display: block;
			margin: auto;
			background: #fff;
			border: 1px solid #ddd;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

var px = 50; // pixel x position
		var py = 50; // pixel y position
		var bx = 300; // blue square x position
		var by = 300; // blue square y position
		var vw = canvas.width; // viewport width
		var vh = canvas.height; // viewport height

var yellowPixels = [{x: 200, y: 200}, {x: 400, y: 400}, {x: 100, y: 500}];
		var pixelSize = 10;

function draw() {
			ctx.clearRect(0, 0, vw, vh);

// draw yellow pixels
			ctx.fillStyle = "#f0c808";
			yellowPixels.forEach(function(p) {
				ctx.fillRect(p.x, p.y, pixelSize, pixelSize);
			});

// draw red pixel
			ctx.fillStyle = "#f00";
			ctx.fillRect(px, py, pixelSize, pixelSize);

// draw blue square
			ctx.fillStyle = "#00f";
			ctx.fillRect(bx, by, pixelSize * 2, pixelSize * 2);

if (px === bx && py === by) {
				alert("You win!");
			}

// detect collision with yellow pixels
			yellowPixels.forEach(function(p) {
				if (px === p.x && py === p.y) {
					alert("You lose!");
					document.location.reload();
				}
			});

requestAnimationFrame(draw);
		}

draw();

// controls for mobile devices
		canvas.addEventListener("touchstart", function(e) {
			e.preventDefault();
			var touch = e.changedTouches[0];
			if (touch.clientX > px) {
				px += pixelSize;
			} else {
				px -= pixelSize;
			}
			if (touch.clientY > py) {
				py += pixelSize;
			} else {
				py -= pixelSize;
			}
		});
	</script>
</body>
</html>