Auf Thema antworten

Beitrag

[QUOTE="JamesMetal, post: 12595, member: 4248"]
Hallo liebe HTML- Gemeinde,

im Zuge einer Challange würde ich gerne das Spiel 2048 als Ausgangspunkt für diese nehmen.
Im Internet habe ich den HTML- Code für das Spiel entdeckt.
Meine Frage wäre nun: wie kann man dieses Spiel so programmieren, dass wenn der Spieler das Ziel 2048 (sprich er fügt die beiden 1024 Punkte zusammen) erreicht, dass erst dann ein
Feld erscheint in welchem ich dann einen freien Text schreiben kann?

Vielen Dank für die Mithilfe und Unterstützung

Folgende der Code zum Spiel:

<!DOCTYPE html>
<html>
 <head>
  <title> Javascript : 2048 puzzle</title>
 </head>
 <body>
	<center>
	<a style="cursor: pointer; padding-left: 10%;" onclick="return load();">Neus Spiel starten</a>
	<div id="canvas"></div>	
	<h2>Punkte: <div style="display:inline;" id="score"></div></h2>
	<b>Viel Spaß beim Spielen wünschen:</b> 
	</center>
	<script type="text/javascript">
    <!--
	//Size of the grid
	var size = 4;
	var min = 0;
	var max = size - 1;
	
	var isMoved = false;
	var score = 0;
	
	var excludeIds = [];

function load() {
		//alert("load");
		//Load the table
		var html = '<table border="1">';
		for(var row=0;row<size;row++) {
			html += '<tr>';
			for(var col=0;col<size;col++) {
				var id = row+""+col;
				html += '<td align="center" valign="center" height="100" width="100" id="'+id+'"></td>';
			}
			html += '</tr>';
		}
		html += '</table>';
		//alert(html);
		document.getElementById("canvas").innerHTML = html;

var id1 = getId();
		var id2 = "";
		while(true) {
			id2 = getId();
			if(id1 != id2)
			break;
		}
		//Set initial 2 values
		document.getElementById(id1).innerHTML = "2";
		document.getElementById(id2).innerHTML = "2";

document.getElementById(id1).style.backgroundColor = getColor(2);
		document.getElementById(id2).style.backgroundColor = getColor(2);
		
		score = 0;
		document.getElementById("score").innerHTML = score;

return false;
	}
	function getRandom()
	{
		return Math.floor(Math.random()*(max-min+1)+min);
	}
	function getId()
	{
		var i = getRandom();
		var j = getRandom();
		return i+""+j;
	}
	function up() {
		isMoved = false;
		excludeIds = [];
		for(var j=min;j<=max;j++) {
			for(var i=min;i<=max;i++) {
				var id = i+""+j;
				if(document.getElementById(id).innerHTML != "") {
					moveUp(id);
				}
			}
		}
		if(isMoved == true) {
			update();
		}
		return false;
	}
	function moveUp(id) {		
		if(!id.startsWith(min)) {
			var arr = id.split("");
			var i = parseInt(arr[0]);
			var j = parseInt(arr[1]);
			for(var k=(i-1);k>=min;k--) {
				var nId = k+""+j;
				if(document.getElementById(nId).innerHTML != "") {
					var val = parseInt(document.getElementById((k+1)+""+j).innerHTML);
					var nVal = parseInt(document.getElementById(nId).innerHTML);
					if(val == nVal) {
						if(excludeIds.indexOf(nId) == -1){
							excludeIds.push(nId);
							document.getElementById(nId).innerHTML = (val+nVal);
							document.getElementById(nId).style.backgroundColor = getColor((val+nVal));
							document.getElementById((k+1)+""+j).innerHTML = "";
							document.getElementById((k+1)+""+j).style.backgroundColor = "#FFFFFF";
							isMoved = true;
							score += (val+nVal);
						}
					}
					break;
				}
				else {
					document.getElementById(nId).innerHTML = document.getElementById((k+1)+""+j).innerHTML;
					document.getElementById(nId).style.backgroundColor = document.getElementById((k+1)+""+j).style.backgroundColor;
					document.getElementById((k+1)+""+j).innerHTML = "";
					document.getElementById((k+1)+""+j).style.backgroundColor = "#ffffff";
					isMoved = true;
				}
			}
		}
		return false;
	}
	function left() {
		isMoved = false;
		excludeIds = [];
		for(var i=min;i<=max;i++) {
			for(var j=min;j<=max;j++) {
				var id = i+""+j;
				if(document.getElementById(id).innerHTML != "") {
					moveLeft(id);
				}
			}
		}
		if(isMoved == true) {
			update();
		}
		return false;
	}
	function moveLeft(id) {
		if(!id.endsWith(min)) {
			var arr = id.split("");
			var i = parseInt(arr[0]);
			var j = parseInt(arr[1]);
			for(var k=(j-1);k>=min;k--) {
				var nId = i+""+k;
				if(document.getElementById(nId).innerHTML != "") {
					var val = parseInt(document.getElementById(i+""+(k+1)).innerHTML);
					var nVal = parseInt(document.getElementById(nId).innerHTML);
					if(val == nVal) {
						if(excludeIds.indexOf(nId) == -1){
							excludeIds.push(nId);
							document.getElementById(nId).innerHTML = (val+nVal);
							document.getElementById(nId).style.backgroundColor = getColor((val+nVal));
							document.getElementById(i+""+(k+1)).innerHTML = "";
							document.getElementById(i+""+(k+1)).style.backgroundColor = "#ffffff";
							isMoved = true;
							score += (val+nVal);
						}
					}
					break;
				}
				else {
					document.getElementById(nId).innerHTML = document.getElementById(i+""+(k+1)).innerHTML;
					document.getElementById(nId).style.backgroundColor = document.getElementById(i+""+(k+1)).style.backgroundColor;
					document.getElementById(i+""+(k+1)).innerHTML = "";
					document.getElementById(i+""+(k+1)).style.backgroundColor = "#ffffff";
					isMoved = true;
				}
			}
		}
		return false;
	}
	function down() {
		isMoved = false;
		excludeIds = [];
		for(var i=min;i<=max;i++) {
			for(var j=max;j>=min;j--) {
				var id = j+""+i;
				if(document.getElementById(id).innerHTML != "") {
					moveDown(id);
				}
			}
		}
		if(isMoved == true) {
			update();
		}
		return false;
	}
	function moveDown(id) {
		if(!id.startsWith(max)) {
			var arr = id.split("");
			var i = parseInt(arr[0]);
			var j = parseInt(arr[1]);
			for(var k=(i+1);k<=max;k++) {
				var nId = k+""+j;
				if(document.getElementById(nId).innerHTML != "") {
					var val = parseInt(document.getElementById((k-1)+""+j).innerHTML);
					var nVal = parseInt(document.getElementById(nId).innerHTML);
					if(val == nVal) {
						if(excludeIds.indexOf(nId) == -1){
							excludeIds.push(nId);
							document.getElementById(nId).innerHTML = (val+nVal);
							document.getElementById(nId).style.backgroundColor = getColor((val+nVal));
							document.getElementById((k-1)+""+j).innerHTML = "";
							document.getElementById((k-1)+""+j).style.backgroundColor = "#ffffff";
							isMoved = true;
							score += (val+nVal);
						}
					}
					break;
				}
				else {
					document.getElementById(nId).innerHTML = document.getElementById((k-1)+""+j).innerHTML;
					document.getElementById(nId).style.backgroundColor = document.getElementById((k-1)+""+j).style.backgroundColor;
					document.getElementById((k-1)+""+j).innerHTML = "";
					document.getElementById((k-1)+""+j).style.backgroundColor = "#ffffff";
					isMoved = true;
				}
			}
		}
		return false;
	}
	function right() {
		isMoved = false;
		excludeIds = [];
		for(var i=min;i<=max;i++) {
			for(var j=max;j>=min;j--) {
				var id = i+""+j;
				if(document.getElementById(id).innerHTML != "") {
					moveRight(id);
				}
			}
		}
		if(isMoved == true) {
			update();
		}
		return false;
	}
	function moveRight(id) {
		if(!id.endsWith(max)) {
			var arr = id.split("");
			var i = parseInt(arr[0]);
			var j = parseInt(arr[1]);
			for(var k=(j+1);k<=max;k++) {
				var nId = i+""+k;
				if(document.getElementById(nId).innerHTML != "") {
					var val = parseInt(document.getElementById(i+""+(k-1)).innerHTML);
					var nVal = parseInt(document.getElementById(nId).innerHTML);
					if(val == nVal) {
						if(excludeIds.indexOf(nId) == -1){
							excludeIds.push(nId);
							document.getElementById(nId).innerHTML = (val+nVal);
							document.getElementById(nId).style.backgroundColor = getColor((val+nVal));
							document.getElementById(i+""+(k-1)).innerHTML = "";
							document.getElementById(i+""+(k-1)).style.backgroundColor = "#ffffff";
							isMoved = true;
							score += (val+nVal);
						}
					}
					break;
				}
				else {
					document.getElementById(nId).innerHTML = document.getElementById(i+""+(k-1)).innerHTML;
					document.getElementById(nId).style.backgroundColor = document.getElementById(i+""+(k-1)).style.backgroundColor;
					document.getElementById(i+""+(k-1)).innerHTML = "";
					document.getElementById(i+""+(k-1)).style.backgroundColor = "#ffffff";
					isMoved = true;
				}
			}
		}
		return false;
	}
	function update() {		
		//Add new value
		var ids = [];
		for(var i=min;i<=max;i++) {
			for(var j=min;j<=max;j++) {
				var id = i+""+j;
				if(document.getElementById(id).innerHTML == "") {
					ids.push(id);
				}
			}
		}
		var id = ids[Math.floor(Math.random()*ids.length)];
		document.getElementById(id).innerHTML = "2";
		document.getElementById(id).style.backgroundColor = getColor(2);

//Check if no move space available
		var allFilled = true;
		for(var i=min;i<=max;i++) {
			for(var j=min;j<=max;j++) {
				var id = i+""+j;
				if(document.getElementById(id).innerHTML == "") {
					allFilled = false;
					break;
				}
			}
		}		
		//Update score
		document.getElementById("score").innerHTML = score;
		if(allFilled) {
			checkGameOver();
		}
	}

Authentifizierung