Foro de elhacker.net

juego Stix Game html+js+css

https://www.youtube.com/watch?v=uUfmd2SskUY

Buenas!
Yo hice algo parecido, html y kiwi.js.
Si te interesa hablame por mp y te lo paso   ;D

Se ve bueno pero el video tiene muy mala calidad, no se entiende nada lo que dicen los textos. Si gustas podrias compartirnos mas de tu proyecto en este mismo post, como lo hiciste, que necesitaste, como va el código, etc, para no tener que pensar que este post es spam.

Saludos.

https://www.youtube.com/watch?v=IFIvJCDRONo

lo subo aqui en el foro cuando tenga tiempo, paciencia porfavor

saludos...

var canva, enemigo, int,nuevo=0, enemigoA;
 
function main() {
	canva = document.getElementById("mycanvas");
	ctx.fillStyle="indianred";
 
	ctx.fillRect(0,0,700,500);	
	ctx.fillStyle="#522626";
	ctx.fillRect(0,0,700,50);
	Juego();
}
 
window.onkeyup = function (event) {
	controlTeclas(event, false);
}
 
function Punto(x,y) {
	this.x = x;
	this.y = y;
}
function enemigoBorder(k,l){
	this.k=k;
	this.l=l;
}
 
function Enemigo(x,y,movx,movy) {
	this.x = x;
	this.y = y;
	this.movx = movx;
	this.movy = movy;
}
 
function Juego() {
	x = 0;
	y = 50;
	k=14;
	l=50;
	dir = -1;
	movimiento = 0;
 
	camino = new Array();
	enlinea = 1;
	area 	= new Array();
	area[0] = new Punto(0,50);
	area[1] = new Punto(700,50);
	area[2] = new Punto(700,498);
	area[3] = new Punto(0,498);
 
	direccion = new Array(false, false, false, false);
 
	window.clearInterval(int);
	int=setInterval("dibujar()", 30);
 
	window.onkeydown = function (e) {
		controlTeclas(e, true);
	};
		if(Math.random()<0.5){
			sx = -2;
			sy = -2;
		}else{
			sx = 2;
			sy = 2;
		}
		enemigo = new Enemigo(300, 200, sx, sy);		
		pat = ctx.createPattern(canva, "repeat");
 
}
 
function dibujar() {
	var i,j;
 
 
	if(nuevo==0){
		ctx.clearRect(200,0,250,30);
		ctx.font="25px Arial";
		ctx.fillText("   ATrott * * * 100 %" ,200,20);
	}
 
	movimiento = 0;
	od = dir;
	for(i in direccion) {
		if(direccion[i]) {
			dir = Number(i);
			movimiento = 1;
		}			
	}
	if(movimiento) {
		if(! revisarLinea(area,x,y)) {
			if((od+1)%4==dir||od==(dir+1)%4) {
				camino.push(new Punto(x,y))
			}			
		}
	}
 
	if(movimiento==1) {
		ox = x; oy = y;
		if(dir==0)
			y+=-4;
		if(dir==1)
			x+=4;
		if(dir==2)
			y+=4;
		if(dir==3)
			x+=-4;
 
		if(revisarLinea(area,x,y))
		{
			if(enlinea==0) {
				if(camino[0].x==x&&camino[0].y==y) {
					camino = new Array();
				} else {
 
					camino.push(new Punto(x,y));
					a = cortar(area, camino);
					areax = cuadrado(a[0]);
					areay = cuadrado(a[1]);
					nuevo=1;
					if(areax>areay) {
						 ctx.clearRect(200,0,250,30);
					ctx.font="25px Arial";
					ctx.fillText("   ATrott * * *" + Math.floor((areax*100)/630000)+ " %",200,20);
						area = a[0];
						this.harea = a[1];
						if(areax<50000) {
							mensaje("ganaste");
						}
					} else {
					ctx.clearRect(200,0,250,30);
					ctx.font="25px Arial";
					ctx.fillText("    ATrott * * *" + Math.floor((areay*100)/630000)+ " %",200,20);
						area = a[1];
						this.harea = a[0];
						if(areay<50000) {
							mensaje("ganaste");
						}
					}
 
					var ne=0;
						ex = enemigo.x;
						ey = enemigo.y;
						if(  inArea(ex,ey) || revisarLinea(area, ex,ey)) {
							ne=enemigo;
						}
 
						if(ne==0)
							mensaje("ganaste");
						camino = new Array();
				}
 
 
 
 
			}
			enlinea = 1;
			camino[0] = new Punto(x,y);
		} else {
			if(enlinea == 1) {			
				if(inArea(x,y)) {
					enlinea = 0;
				} else {
					x = ox; y = oy; movimiento = 0;
				}
			} else {
				ax = camino[0].x;				
				ay = camino[0].y;
				for(i=1;i<camino.length-2;i++) {
					bx = camino[i].x;		
					by = camino[i].y;
					if(unalinea(ax, ay,bx,by,x,y)) {
						camino = camino.slice(0, i);
						camino.push(new Punto(x,y));
					}
 
				ax = bx; ay = by;
				}
 
			}
		}
	} 
 
	if(enlinea==0) {
		ax = camino[0].x; 
		ay = camino[0].y;
		for(i=1;i<camino.length;i++) {
			bx = camino[i].x; by = camino[i].y;
			if(unalinea(ax, ay,bx,by,enemigo.x,enemigo.y)) {
				mensaje("perdiste");	
			}
			ax = bx; ay = by;
		}
			if(unalinea(ax, ay,x,y,enemigo.x,enemigo.y)) {
				mensaje("perdiste");
 
			}
 
	}
 
	ctx.fillStyle=pat;
	ctx.strokeStyle="yellow";
	dibujarArea(area);
 
	ctx.beginPath()			//linea trazada
	for ( cam in camino) {
		ctx.lineTo(camino[cam].x,camino[cam].y)
	}
	ctx.lineTo(x,y)
	ctx.stroke()
 
	ctx.fillStyle="rgb(0,0,0)";
	ctx.beginPath();
	ctx.fillRect(x,y,10,10);
	ctx.closePath();
	ctx.fill();
 
		ex = enemigo.x+enemigo.movx;
		ey = enemigo.y+enemigo.movy;
		enemigo.x = ex;
		enemigo.y = ey;
		ax = area[area.length-1].x;
		ay = area[area.length-1].y;
		for(j in area) {
			bx = area[j].x;		by = area[j].y;
			if(unalinea(ax, ay,bx,by,ex,ey)) {
				if(ax==bx) {
					enemigo.movx = - enemigo.movx;
				}
				if(ay==by) {
					enemigo.movy = - enemigo.movy;
				}
			}
			ax = bx; ay = by;	
		}
		ctx.beginPath();
		ctx.fillRect(ex,ey,30,30);
		ctx.closePath();
		ctx.fill();
 
	ctx.beginPath();
	ctx.fillRect(k,l,100,5);
	ctx.closePath();
	ctx.fill();
	k++;
	if(x>=k){
		l++;
 
	}
}
 
 
function cuadrado(area) {
	var s = 0;
	ax = area[0].x; 
	ay = area[0].y;
	bx = area[1].x; 
	by = area[1].y;
	for(i=2;i<area.length;i++) {
		cx = area[i].x; cy = area[i].y;
		if(bx == cx) {
			s += (bx-ax)*(cy-by);
		} else {
			s += (by-ay)*(bx-cx);
		}
		op=cx; ol=cy;
		bx = cx; by = cy;
		ctx.fillRect(op,ol,ax,ay);
 
	}
	return Math.abs(s);
}
 
function inArea(x,y) {
	ax = area[area.length-1].x;
	ay = area[area.length-1].y;
	peri = 0;
	for(ar in area) {
		bx = area[ar].x;		
		by = area[ar].y;
		if(ay==by && ay<=y) {
			if (ax>=x && bx<x	||	ax<x && bx>=x) {
				peri += 1;
			}
		}
		ax = bx; ay = by;
	}
	return peri%2==1;		
}
 
function controlTeclas(event, valorB) {
	var clave = event.keyCode;
	if(clave==38)
		direccion[0] = valorB;
	if(clave==39) 
		direccion[1] = valorB;
	if(clave==40)
		direccion[2] = valorB;
	if(clave==37)
		direccion[3] = valorB;
}
 
function mensaje(arg) {
	window.clearInterval(int);
	ctx.clearRect(200,0,250,30);
	ctx.fillText("      ***"+arg+"***" ,200,20);
 
}
 
function dibujarArea(area) {
	ctx.beginPath();
	for ( i in area) {
		ctx.lineTo(area[i].x,area[i].y);
	}
	ctx.closePath();
	ctx.fill();
	ctx.stroke();
}
 
function cortar(area, camino) {
	var area1 = new Array();
	var area2 = new Array();
	var puntoFinal = new Array();
	puntoFinal[0] = camino[0];
	puntoFinal[1] = camino[camino.length-1];
	for(j in puntoFinal) {
		ax = area[area.length-1].x; ay = area[area.length-1].y;
		for(i in area) {
			bx = area[i].x; by = area[i].y;
			if(ax==puntoFinal[j].x&&ay==puntoFinal[j].y){
				break;
			}
			if(unalinea(ax,ay,bx,by,puntoFinal[j].x,puntoFinal[j].y)) {
				area.splice(Number(i), 0, puntoFinal[j]);
				break;
			}
			ui=ax; uo=ay;
			ax = bx; ay = by;
			ctx.fillRect(ui,uo,ax,ay);
		}
	}
	i = 0;
	for(e=0;e<=2;) {
		bx = area[i].x; by = area[i].y;
		switch(e) {
			case 0:
				if(bx==puntoFinal[0].x&&by==puntoFinal[0].y) {
					e = 1;
					area1 = camino.slice(0);
							area1.shift();
					area2 = camino.slice(0);
							area2.reverse();
							area2.shift();
				}
				break;
			case 1:
				if(bx==puntoFinal[1].x&&by==puntoFinal[1].y) {
					e = 2;
				}
				area2.push(area[i]);
				break;
			case 2:
				if(bx==puntoFinal[0].x&&by==puntoFinal[0].y) {
					e=3;
				}
				area1.push(area[i]);
		}
		i = (i+1)%area.length;
	}
 
	var areas = new Array(area1, area2);
	return areas;
}
 
function caminoEnBordesEnemy(areaCamino){
 
k++;
 
 
}
 
function revisarLinea(area,x,y) {
	var i;
	ax = area[area.length-1].x;
	ay = area[area.length-1].y;
	for(i in area) {
		bx = area[i].x;		by = area[i].y;
		if(unalinea(ax, ay,bx,by,x,y))
			return true;
		ax = bx; ay = by;
	}
	return false;
}
 
function unalinea(ax,ay,bx,by,x,y) {
	if(x==ax&&x==bx) {
		if((y>=ay&&y<=by)||(y>=by&&y<=ay)) {
			return true;
		}
	} else if(y==ay&&y==by) {
		if((x>=ax&&x<=bx)||(x>=bx&&x<=ax)) {
			return true;
		}
	}
	return false;
}
 
 
 

<!DOCTYPE HTML>
<html>
<head>
<script src="st.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>JUEGO STIX</title>
 
</head>
 
<body onload="main()" >
<h1>--- JUEGO STIX --- </h1>
<canvas id="mycanvas" width="700" height="500"></canvas>
 
<script>
var canvas 	= 	document.getElementById('mycanvas');
var ctx		=	canvas.getContext("2d");
</script>
<footer> --autor:[rn3w]-- todos los derechos reservados</footer>
</body>
 
</html>

body{
	width: 1000px;
	margin: 50px 300px;
	background-color: #C4C0DC;
}
#mycanvas{
	 border-style: solid;
 
	 box-shadow: 19px 11px 26px 3px rgba(0,0,0,0.66);
}
 

autor [rn3w]

quería compartirles este trabajo que hice... es muy interesante... saludos...

ya estoy comentando el codigo para que lo entiendan mejor

slds...