2048

Diskutiere 2048 im HTML Forum im Bereich Programmierung; 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...
Neues Thema erstellen Antworten
  • 2048 Beitrag #1
J
JamesMetal
New member
Beiträge
2
Punkte Reaktionen
0
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();
}
}

function checkGameOver() {
var isOver = true;
for(var j=min;j<=max;j++) {
for(var i=min;i<=(max-1);i++) {
//alert(i+" "+j);
var val = parseInt(document.getElementById(i+""+j).innerHTML);
var nVal = parseInt(document.getElementById((i+1)+""+j).innerHTML);
if(val == nVal) {
isOver = false;
break;
}
}
}
if(isOver == true) {
for(var i=min;i<=max;i++) {
for(var j=min;j<=(max-1);j++) {
//alert(i+" "+j);
var val = parseInt(document.getElementById(i+""+j).innerHTML);
var nVal = parseInt(document.getElementById(i+""+(j+1)).innerHTML);
if(val == nVal) {
isOver = false;
break;
}
}
}
}
if(isOver) {
alert("Game over!");
}
return false;
}
function getColor(val)
{
var color = "#FFFFFF";
switch(val) {
case 2: color = "#0040FF"; break;
case 4: color = "#FF0000"; break;
case 8: color = "#F3F781"; break;
case 16: color = "#BEF781"; break;
case 32: color = "#81F7D8"; break;
case 64: color = "#58D3F7"; break;
case 128: color = "#FA58F4"; break;
case 256: color = "#A901DB"; break;
case 512: color = "#01DF3A"; break;
case 1024: color = "#D7DF01"; break;
case 2048: color = "#D7DF01"; break;
default: color = "#ffffff";
}
return color;
}
if ( typeof String.prototype.startsWith != 'function' ) {
String.prototype.startsWith = function( str ) {
return this.substring( 0, str.length ) === str;
}
};
if ( typeof String.prototype.endsWith != 'function' ) {
String.prototype.endsWith = function( str ) {
return this.substring( this.length - str.length, this.length ) === str;
}
};
document.onkeydown = function(e) {
e.preventDefault();//to prevent scroll of screen
switch (e.keyCode) {
case 37:
left();
break;
case 38:
up();
break;
case 39:
right();
break;
case 40:
down();
break;
}
};
//calling load method
load();
//-->
</script>
</body>
</html>
 
  • 2048 Beitrag #2
S
scatello
Well-known member
Beiträge
528
Punkte Reaktionen
44
Was hast du bisher versucht, um eine Lösung zu finden?
 
  • 2048 Beitrag #3
J
JamesMetal
New member
Beiträge
2
Punkte Reaktionen
0
Ich habe es versucht über die GameOver Funktion ab erreichen der Stufe 2048, zu implementieren, jedoch führte es zu keinem passenden Ergebnis. Liebe Grüße
 
  • 2048 Beitrag #4
basti1012
basti1012
Well-known member
Beiträge
242
Punkte Reaktionen
18
Ich würde die vorhandene switch Funktion benutzen. Da ein div Container auf display:block setzen (was von Anfang an auf none steht) , wo du deinen Text reinschreiben kannst.
Ich werde das aber nicht testen, ob das klappt, weil ich erst einmal die 2048 erreicht habe in den letzten Jahren
 
Zuletzt bearbeitet:
Thema:

2048

Oben Unten