ok

img

Tetris


<html>
<body>
<div id="message" style="z-index:2000; position:absolute; text-align:center; display:none; left:5px; top:100px; width:250px; padding:20px 0 20px; background-color:#ff0; color:#000; font-size:20px;"></div>
<div id="test" style="font: 14px Courier New, monospace;"></div>
<div id="score" style="position:absolute; top:0; box-sizing:border-box; width:200px; height:100px; padding-top:20px; border:1px solid #000000; font-size:40px; text-align:right;"></div>
<canvas id="canvas1" style="position:absolute; left:5px; top:0; border:1px solid #000000;" onkeydown="keyPress(event)"></canvas>
<canvas id="canvas2" width="100" height="100" style="position:absolute; top:120px; border:1px solid #000000;">prova</div>
<script>
var U, W, H;
var CANVAS1;
var CANVAS2;
var CTX;
var GRID;
var POS;
var ROT;
var NEXTROT;
var SHAPE;
var SHAPES;
var PAUSE;
var TIME;
var SPEED;
var NORMALSPEED;
var INTERVAL;
var MESSAGE;
var SCORE;
var SCOREPANEL;
var STATUS;
var M = ["PAUSE", "<div>GAME OVER</div><div style='cursor:pointer;' onclick='start()'>restart</div>"];
	
function init(u, w, h)
{
	U = u; W = w; H = h;
	SHAPES = [
	[[0,1,1-W,W], [0,-1,W,W+1], [0,-1,W-1,-W], [0,1,-W,-W-1]],
	[[0,1,-W,W+1], [0,1,W,W-1], [0,-1,-W-1,W], [0,-1,-W,1-W]],
	[[0,1,-1,-W-1], [0,W,-W,1-W], [0,1,-1,W+1], [0,-W,W,W-1]],
	[[0,1,-1,1-W], [0,W,-W,W+1], [0,1,-1,W-1], [0,W,-W,-W-1]],
	[[0,1,-1,W], [0,-1,W,-W], [0,1,-1,-W], [0,1,W,-W]],
	[[0,W,2*W,-W], [0,1,-1,-2], [0,W,-W,-2*W], [0,-1,1,2]],
	[[0,1,W,W+1], [0,1,W,W+1], [0,1,W,W+1], [0,1,W,W+1]]
	];
	EXTREMES = [
	[[0,1], [-1,1], [-1,0], [-1,1]],
	[[0,1], [-1,1], [-1,0], [-1,1]],
	[[-1,1], [0,1], [-1,1], [-1,0]],
	[[-1,1], [0,1], [-1,1], [-1,0]],
	[[-1,1], [-1,0], [-1,1], [0,1]],
	[[0,0], [-2,1], [0,0], [-1,2]],
	[[0,1], [0,1], [0,1], [0,1]]
	];
	STATUS = true;
	SCORE = 0;
	TIME = 0;
	NORMALSPEED = 100;
	SPEED = NORMALSPEED;
	PAUSE = false;
	SHAPE = Math.floor(Math.random() * 7);
	NEXTSHAPE = Math.floor(Math.random() * 7);
	ROT = Math.floor(Math.random() * 4);
	NEXTROT = Math.floor(Math.random() * 4);
	POS = parseInt(W / 2) - 1;
	CANVAS1 = document.getElementById("canvas1");
	CANVAS2 = document.getElementById("canvas2");
	CANVAS2.style.left = (W * U + 20) + "px";
	MESSAGE = document.getElementById("message");
	MESSAGE.style.display = "none";
	MESSAGE.innerHTML = "";
	TEST = document.getElementById("test");
	CANVAS1.width = W * U;
	CANVAS1.height = H * U;
	CTX = [CANVAS1.getContext("2d"), CANVAS2.getContext("2d")];
	CTX[1].clearRect(0, 0, CANVAS2.width, CANVAS2.height);
	SCOREPANEL = document.getElementById("score");
	SCOREPANEL.style.left = (W * U + 20) + "px";
	drawShape(1, W + 1, NEXTSHAPE, NEXTROT);
	GRID = "";
	for(var j = 0; j < H; j++)
	{
		for(var k = 0; k < W; k++)
		{
			GRID += "0";
		}
	}
	window.addEventListener('keydown', this.keyPress, false);
	window.addEventListener('keyup', this.keyUp, false);
}

function showGrid()
{
	str = "";
	for(var i = 0; i < W * H; i++)
	{
		str += GRID[i];
		if((i + 1) % W == 0){str += "<br>";}
	}
	document.getElementById("test").innerHTML = str;
}

function check(type, pos, shape, rot) // if there is no overlap, return true
{
	var r = true;
	if(type == 0) // check overlap
	{
		for(i = 0; i < 4; i++)
		{
			var s = pos + SHAPES[shape][rot][i];
			if(s >= 0)
			{
				if(GRID[s] != "0" || s > W * H)
				{
					r = false;
				}
			}
		}
	}
	else if(type == 1) // check rot
	{
		p = pos % W;
		if(shape < 5)
		{
			if(p == W - 1 || p == 0)
			{
				r = false;
			}
		}
		else if(shape == 5)
		{
			if(rot == 1)
			{
				if(p == W - 1 || p < 2)
				{
					r = false;
				}
			}
			else if(rot == 3)
			{
				if(p == 0 || p > W - 3)
				{
					r = false;
				}
			}
		}
	}
	else if(type == 2) // check left displacement
	{
		if(parseInt(POS / W) != parseInt((pos + EXTREMES[shape][rot][0]) / W))
		{
			r = false;
		}
	}
	else if(type == 3) // check right displacement
	{
		if(parseInt(POS / W) != parseInt((pos + EXTREMES[shape][rot][1]) / W))
		{
			r = false;
		}
	}
	return r;
}

function keyUp(event)
{
	var e = event.key;
	if(e == "ArrowDown")
	{
		SPEED = NORMALSPEED;
	}
}

function keyPress(event)
{
	var e = event.key;
	if(e == "Enter") // pause
	{
		if(STATUS)
		{
			PAUSE = !PAUSE;
			if(PAUSE)
			{
				MESSAGE.style.display = "block";
				MESSAGE.innerHTML = M[0];
			}
			else
			{
				MESSAGE.style.display = "none";
				MESSAGE.innerHTML = "";
			}
		}
	}
	if(e == "Control") // rotation
	{
		var rot = ROT;
		rot++; if(rot == 4){rot = 0;}
		if(check(0, POS, SHAPE, rot) && check(1, POS, SHAPE, rot))
		{
			ROT = rot;
		}
	}
	if(e == "ArrowDown") // bring down
	{
		SPEED = 1;
	}
	if(e == "ArrowRight") // right
	{
		if(check(3, POS + 1, SHAPE, ROT) && check(0, POS + 1, SHAPE, ROT))
		{
			POS++;
		}
	}
	if(e == "ArrowLeft") // left
	{
		if(POS - 1 >= 0 && check(2, POS - 1, SHAPE, ROT) && check(0, POS - 1, SHAPE, ROT))
		{
			POS--;
		}
	}
}

function drawSquare(canvas, pos, c)
{
	color = ["#0FF", "#0F0", "#FF0", "#F0F", "#CA8", "#F00", "#00F", ];
	CTX[canvas].beginPath();
	CTX[canvas].fillStyle = color[c];
	var x = pos % W;
	var y = parseInt(pos / W);
	CTX[canvas].fillRect(x * U, y * U, U, U);
	CTX[canvas].rect(x * U, y * U, U, U);
	CTX[canvas].stroke();
}

function drawShape(canvas, pos, shape, rot)
{
	for(i = 0; i < 4; i++)
	{
		drawSquare(canvas, pos + SHAPES[shape][rot][i], shape);
	}
}

function drawGrid()
{
	for(i = 0; i < W * H; i++)
	{
		var g = parseInt(GRID[i]);
		if(g != 0)
		{
			drawSquare(0, i, g - 1);
		}
	}
}

function removeRow(row)
{
	a = "";
	for(i = 0; i < W; i++)
	{
		a += "0";
	}
	b = GRID.substr(0, W * row);
	c = GRID.substr(W * (row + 1));
	GRID = a + b + c;
}

function store(pos, shape, rot)
{
	if(pos / W < 1)
	{
		STATUS = false;
		clearInterval(INTERVAL);
		return false;
	}
	else
	{
		for(i = 0; i < 4; i++)
		{
			p = pos + SHAPES[shape][rot][i];
			a = GRID.substr(0, p);
			b = GRID.substr(p + 1);
			GRID = a + (shape + 1) + b;
		}
		for(i = 0; i < H; i++)
		{
			s = GRID.substr(W * i, W);
			if(s.indexOf("0") == -1)
			{
				removeRow(i);
				SCORE += 100;
				if(SCORE % 1000 == 0)
				{
					NORMALSPEED -= 5;
					SPEED = NORMALSPEED;
				}
			}
		}
		return true;
	}
}

function start()
{
	init(25, 10, 25);
	INTERVAL = setInterval(
	function()
	{
		if(!PAUSE)
		{
			CTX[0].clearRect(0, 0, CANVAS1.width, CANVAS1.height);
			drawGrid();
			drawShape(0, POS, SHAPE, ROT);
			SCOREPANEL.innerHTML = SCORE;
			TIME++;
			if(TIME % SPEED == 0)
			{
				if(check(0, POS + W, SHAPE, ROT))
				{
					POS += W;
				}
				else
				{
					if(store(POS, SHAPE, ROT))
					{
						SHAPE = NEXTSHAPE;
						ROT = NEXTROT;
						NEXTSHAPE = Math.floor(Math.random() * 7);
						NEXTROT = Math.floor(Math.random() * 4);
						CTX[1].clearRect(0, 0, CANVAS2.width, CANVAS2.height);
						drawShape(1, W + 1, NEXTSHAPE, NEXTROT);
						POS = parseInt(W / 2) - 1;
					}
					else
					{
						MESSAGE.style.display = "block";
						MESSAGE.innerHTML = M[1];
					}
				}
			}
		}
	},
	10);
}

function main()
{
	start();
}

main();

</script>
</body>
</html>
tetris javascript

Biografia

Mi chiamo Cosimo Saccone e sono un programmatore napoletano di 44 anni con oltre 35 anni di esperienza nella programmazione (BASIC, Assembly). Realizzo progetti e programmi utilizzando i principali e più diffusi linguaggi (C, C++, PHP, Javascript, HTML) e software per la grafica (Photoshop, Illustrator, 3dsMax). Anche se la grafica rappresenta il mio principale settore di interesse, non disdegno il lavoro di back-end e di organizzazione dati e sono attento agli aspetti di efficienza e di risparmio delle risorse tipica della programmazione di basso livello (specie nel settore della grafica 3d). Realizzo siti internet, applicativi desktop e servizi di vario tipo. Ho una buona conoscenza della libreria OpenGL per lo sviluppo di applicazioni 3d interattive in C/C++. Cerco di adottare uno stile di programmazione fortemente ordinato e modulare. Possiedo, inoltre, una buona capacità di elaborazione della documentazione. Ho vari hobbies tra cui la pittura, la ginnastica e le lunghe passeggiate in solitudine.

facebook instagram youtube
tetris social login
HTML5 Template create by Cosimo Saccone 2022
html5 validator css3 validator
CosimoSacconeNapoliCampaniaItaliainformaticaprogrammazionepccomputerc++cjavascriptphphtml

Al fine di migliorare l’esperienza di navigazione sul nostro sito noi di cosimosaccone.com e i nostri partner selezionati elaboriamo i dati personali, compreso l’indirizzo IP e le pagine visitate, in relazione alla tua navigazione nei contenuti del sito, per i seguenti scopi:

Accesso alle informazioni
Dati precisi di geolocalizzazione
Misurazione del pubblico
Pubblicità e contenuti personalizzati
Ti ricordiamo che il termine cookie si riferisce a una porzione di dati inviati al tuo browser da un web server. Il cookie viene memorizzato sul tuo dispositivo e riconosciuto dal sito web che lo ha inviato in ogni navigazione successiva. Se vuoi saperne di più e compiere una scelta diversa, come il rifiuto del trattamento dei tuoi dati personali, clicca qui sulla nostra privacy policy. Potrai sempre modificare le tue scelte e impostare i singolo cookies selezionando il bottone qui sotto.
OK