Ein Spiel zu Übung

MisterX75 · 02. März 2015

Ein Spiel zur Übung

Hi erst mal.

Bin neu hier und komme momentan nicht weiter in meinem Script. Ich habe in der Suche gesehen, dass schon mal jemand das Thema Papier, Stein Schere hatte. Ich habe das Ganze mal umgebaut um es mit selbstgemachten Buttons usw. auszugeben in "Canvas". Soweit bin ich auch mit meinen Funktionen zufrieden. Mein Problem ist jetzt nur der Vergleich. Egal wie ich es versuche zu lösen( globale Variablen, return usw.), ich finde keien Lösung. Ich habe auch schon versucht, die Funktionen an die Funktion compare zu übergebn, aber dadurch werden die Funktionen nur aufgerufen und eine ist solange undefined bis ich den Button drücke den ich haben möchte.

Hier mal mein JS-Code

Code:

//Spieletest für Papier Stein Schere

var is_playing = false;

init();

function init()
{
    main_canvas = document.getElementById('main_canvas');
    main_ctx = main_canvas.getContext('2d');    
    
    bg_canvas = document.getElementById('background_canvas');
    bg_ctx = bg_canvas.getContext('2d');
    
    //document.addEventListener("keydown", key_down, false);
    //document.addEventListener("keyup", key_up, false);
    
    requestaframe = ( function()
    {
        return window.requestAnimationFrame         ||
               window.webkitRequestAnimationFrame   ||
               window.mozRequestAnimationFrame      ||
               window.oRequestAnimationFrame        ||
               window.msRequestAnimationFrame       ||
               function( callback )
               {
                   window.setTimeout(callback, 1000 / 60)
               };
    })();
        
    load_Media();
     
    bg_sprite.addEventListener('load', background, false); 
    
    buttons_drawX = new Array();
    buttons_drawY = new Array();
    buttons_width = new Array();
    buttons_height = new Array();
    buttons_status = new Array();
    buttons_srcX = new Array();
    buttons_srcY = new Array();
    player_auswahl = new Array();
    
    computer = ki();
    //console.log(computer);
}

//Images werden geladen
function load_Media()
{
    bg_sprite = new Image();
    bg_sprite.src = 'images/bg_sprite.png'; 
    
    main_sprite = new Image();
    main_sprite.src ='images/main_sprite.png';
    
    ausgabe_img = new Image();
    ausgabe_img.src = 'images/ausgabe.png';  
}

function background()
{
    bg_ctx.drawImage(bg_sprite, 0, 0);
}
 
//Spielbuttons werden erstellt
function button()
{
    game_buttons = new Array('Rock', 'Sciccors', 'Paper');
    
    for(var i = 0; i < game_buttons.length; i++)
    {        
        var drawX = 50 + i * 250;
        var drawY = 600 / 2;
        var width = 200;
        var height = 165;    
        var srcX = 0;
        var srcY = 0;
       
        if(buttons_status[i] == undefined)
        {
            buttons_status[i] = 'normal';
            buttons_drawX[i] = drawX;
            buttons_drawY[i] = drawY;
            buttons_width[i] = width;
            buttons_height[i] = height;
            buttons_srcY[i] = srcY;
            //buttons_name[i] = btn_name;
        }
        
        if( buttons_status[i] == 'hover' )
        {
            srcX += width;
            //console.log(srcX);
        }
        
        if( game_buttons[i] == 'Rock')
        {
            buttons_srcY[i] = srcY;
        }
        else if( game_buttons[i] == 'Sciccors')
        {
            buttons_srcY[i] = srcY + height;
        }
        else
        {
            buttons_srcY[i] = srcY + (2 * height);
        }
        
        main_ctx.drawImage(main_sprite, srcX, buttons_srcY[i], 200, 165, drawX, drawY, width, height);
    };  
    
    main_ctx.drawImage(ausgabe_img, 0, 0);
}

//mouse
function mouse(type, e)
{
    
    var width = 200;
    var height = 165;
    var x = e.pageX - document.getElementById('game_object').offsetLeft;
    var y = e.pageY - document.getElementById('game_object').offsetTop;
    
    for( var i = 0; i< buttons_status.length; i++ )
    {
        if( x <= buttons_drawX[i] + buttons_width[i] && x >= buttons_drawX[i] && y <= buttons_drawY[i] + buttons_height[i] && y >= buttons_drawY[i] )
        {
            if( type == 'move' && buttons_status[i] != 'click' )
            {
                buttons_status[i] = 'hover';
            }
            else
            {
                buttons_status[i] = 'click';
            }
        }
        else
        {
            buttons_status[i] = 'normal';
        }
    };
    
    document.getElementById('x').innerHTML = x;
    document.getElementById('y').innerHTML = y;
}

function ki()
{
    var computerChoice = Math.random();
    
    if (computerChoice < 0.34)
    {
        computerChoice = "Rock";
    }
    else if(computerChoice <= 0.67)
    {
        computerChoice = "Paper";
    }
    else
    {
        computerChoice = "Scissors";
    };
    
    return computerChoice;
}


function player_choice()
{    
    for( var i = 0; i < buttons_status.length; i++ )
    {
        if( buttons_status[i] == 'click' )
        {
            if( i == 0 )
            {
                player = 'Rock';
                //console.log('Rock');
            }
            else if( i == 1 )
            {
                player = 'Sciccors';
                //console.log('Sciccors');
            }
            else
            {
                player = 'Paper';
                //console.log('Paper')
            }
        };
    };
}

function compare( computer, player )
{
    computer = computer;
    player = player;
    
    if( computer == 'Rock' )
    {
        if( player == 'Sciccors')
        {
            return 'Computer wins';
        }
        else if( player == 'Paper' )
        {
            return "Player wins";
        }
        else
        {
            return 'tie';
        };
    }
    else if( computer == 'Sciccors')
    {
        if( player == 'Paper')
        {
            return 'Computer wins';
        }
        else if( player == 'Rock' )
        {
            return "Player wins";
        }
        else
        {
            return 'tie';
        };
    }
    else if( computer == 'Paper')
    {
        if( player == 'Rock')
        {
            return 'Computer wins';
        }
        else if( player == 'Sciccors' )
        {
            return "Player wins";
        }
        else
        {
            return 'tie';
        };
    }
    
    //console.log(ki);
}

//Animation
function loop()
{
    main_ctx.clearRect(0,0,800,600);
    
    button();
    
    player_choice();
    
    compare();
    
    if( is_playing == true )
    {
        requestaframe(loop);
    }
}



function start_loop()
{
    is_playing = true;
    loop();
}

und das dazugehörige Html

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>index</title>
  <meta name="description" content="">
  <meta name="author" content="Marco">

  <meta name="viewport" content="width=device-width; initial-scale=1.0">

  <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

    <body>
      
      <button onclick="start_loop()">Start</button>
      
      <span id="x"></span> X <span id="y"></span> Y
      
      <p id="text"></p>
        
      <div id="game_object" style="position: relative;">
          
          <canvas width="800" height="600" id="background_canvas" style="background-color: grey; position: absolute; top: 0; left: 0;"></canvas>
          <canvas width="800" height="600" id="main_canvas" onmousemove='mouse("move", event)' onclick="mouse('click', event)" style="position: relative; top: 0; left: 0;">Ihr Browser kann leider kein HTML 5</canvas>
          
          <footer>
              
              <p>© Copyright  by Marco</p>
          
          </footer>
        
      </div>
      
      <script type="text/javascript" src="game.js"></script>
        
    </body>

</html>

Wie schon erwähnt es ist nur zur Übung für mich. Danke für eure Hilfe.

MfG
Marco

Sempervivum · 02. März 2015

Kannst Du auch mal die Grafiken posten? Wollte es lokal ausprobieren und er findet sie nicht. Oder die URL des Spiels.

MisterX75 · 03. März 2015

Moin.

Oh sorry vergessen.

Vielen Dank im voraus.

MfG
Marco

Sempervivum · 03. März 2015

Bei mir passiert überhaupt nichts, wenn ich auf Start drücke. Nur das bg_sprite.png wird links oben statisch angezeigt. Beim Klicken erscheint bei Zeile 110 folgende Fehlermeldung in der Konsole:

IndexSizeError: Index or size is negative or greater than the allowed amount
...x.drawImage(main_sprite, srcX, buttons_srcY, 200, 165, drawX, drawY, width, h...
game.js (Zeile 110)

Scheint mir so, als ob dieses main_sprite zu klein ist, denn wenn ich es mit
main_ctx.drawImage(main_sprite, 0, 0, 10, 10, 0, 0, 10, 10)
zeichne, funktioniert es.

Ich hatte dein Eingangsposting so verstanden, dass das Spiel schon funktioniert und Du nur Probleme mit der Auswertung hast, wer gewonnen hat?

MisterX75 · 03. März 2015

Hi und Danke.

Ja so ist es auch eigentlich. Schau mal bitte hier index. Schon komisch.

Edit: Das main_sprite bei mir hat die Größe 600x1000. Die Images im main_sprite sind 200x165.

Sempervivum · 03. März 2015

Edit: Jetzt funktioniert es, habe die Grafiken jetzt richtig herunter geladen. Aber wie funktioniert das Spiel? Die Symbole werden nebeneinander angezeigt, aber wenn man draufklickt, passiert nichts.

MisterX75 · 03. März 2015

Das console.log() ist nicht aktiviert. wenn man einen Button betätigt wird der Name( Rock, Sciccors oder Paper) in der Variable Player gespeichert. Das was der Computer ausgesucht hat wird in computert gespeichert. In der Funktion compare soll nun beides verglichen und dann ausgegeben werden. Das geht im Moment nicht und ich habe echt lagsam keinen Plan mehr. Das Problem ist meines erachtens, dass die player_choice in der loop aufgerufen werden muss, damit es überhaupt zur anzeige kommt.

Vielen Dank für deine Mühen.

Viele Grüße
Marco

Sempervivum · 03. März 2015

Verstehe.
Das Kernproblem war, dass Du die Funktion compare() mit Eingangsparametern definiert hast, aber ohne diese aufgerufen. Dann sind computer und player innerhalb der Funktion undefiniert.
Die Funktion compare() solltest Du innerhalb der Funktion player_choice() aufrufen und zwar dann, wenn ein Buttonclick erkannt wurde.
Den Merker für den Buttonclick solltest Du wieder zurück setzen, wenn ein Klick erkannt wurde. Andernfalls gerätst Du in eine Endlosschleife.
Den String für die Schere hast Du einmal als 'Scissors' und ein andermal als 'Sciccors' geschrieben.

So funktioniert es:

Code:

//Spieletest für Papier Stein Schere

var is_playing = false;

init();

function init()
{
    main_canvas = document.getElementById('main_canvas');
    main_ctx = main_canvas.getContext('2d');    
    
    bg_canvas = document.getElementById('background_canvas');
    bg_ctx = bg_canvas.getContext('2d');
    
    //document.addEventListener("keydown", key_down, false);
    //document.addEventListener("keyup", key_up, false);
    
    requestaframe = ( function()
    {
        return window.requestAnimationFrame         ||
               window.webkitRequestAnimationFrame   ||
               window.mozRequestAnimationFrame      ||
               window.oRequestAnimationFrame        ||
               window.msRequestAnimationFrame       ||
               function( callback )
               {
                   window.setTimeout(callback, 1000 / 60)
               };
    })();
        
    load_Media();
     
    bg_sprite.addEventListener('load', background, false); 
    
    buttons_drawX = new Array();
    buttons_drawY = new Array();
    buttons_width = new Array();
    buttons_height = new Array();
    buttons_status = new Array();
    buttons_srcX = new Array();
    buttons_srcY = new Array();
    player_auswahl = new Array();
    
    computer = ki();
    //console.log(computer);
}

//Images werden geladen
function load_Media()
{
    bg_sprite = new Image();
    bg_sprite.src = 'images/bg_sprite.png'; 
    
    main_sprite = new Image();
    main_sprite.src ='images/main_sprite.png';
    
    ausgabe_img = new Image();
    ausgabe_img.src = 'images/ausgabe.png';  
}

function background()
{
    bg_ctx.drawImage(bg_sprite, 0, 0);
}
 
//Spielbuttons werden erstellt
function button()
{
    game_buttons = new Array('Rock', 'Scissors', 'Paper');
    
    for(var i = 0; i < game_buttons.length; i++)
    {        
        var drawX = 50 + i * 250;
        var drawY = 600 / 2;
        var width = 200;
        var height = 165;    
        var srcX = 0;
        var srcY = 0;
       
        if(buttons_status[i] == undefined)
        {
            buttons_status[i] = 'normal';
            buttons_drawX[i] = drawX;
            buttons_drawY[i] = drawY;
            buttons_width[i] = width;
            buttons_height[i] = height;
            buttons_srcY[i] = srcY;
            //buttons_name[i] = btn_name;
        }
        
        if( buttons_status[i] == 'hover' )
        {
            srcX += width;
            //console.log(srcX);
        }
        
        if( game_buttons[i] == 'Rock')
        {
            buttons_srcY[i] = srcY;
        }
        else if( game_buttons[i] == 'Scissors')
        {
            buttons_srcY[i] = srcY + height;
        }
        else
        {
            buttons_srcY[i] = srcY + (2 * height);
        }
        
        main_ctx.drawImage(main_sprite, srcX, buttons_srcY[i], 200, 165, drawX, drawY, width, height);
    };  
    
    main_ctx.drawImage(ausgabe_img, 0, 0);
}

//mouse
function mouse(type, e)
{
    
    var width = 200;
    var height = 165;
    var x = e.pageX - document.getElementById('game_object').offsetLeft;
    var y = e.pageY - document.getElementById('game_object').offsetTop;
    
    for( var i = 0; i< buttons_status.length; i++ )
    {
        if( x <= buttons_drawX[i] + buttons_width[i] && x >= buttons_drawX[i] && y <= buttons_drawY[i] + buttons_height[i] && y >= buttons_drawY[i] )
        {
            if( type == 'move' && buttons_status[i] != 'click' )
            {
                buttons_status[i] = 'hover';
            }
            else
            {
                buttons_status[i] = 'click';
            }
        }
        else
        {
            buttons_status[i] = 'normal';
        }
    };
    
    document.getElementById('x').innerHTML = x;
    document.getElementById('y').innerHTML = y;
}

function ki()
{
    var computerChoice = Math.random();
    
    if (computerChoice < 0.34)
    {
        var result = "Rock";
    }
    else if(computerChoice <= 0.67)
    {
        var result = "Paper";
    }
    else
    {
        var result = "Scissors";
    };
    
    return result;
}


function player_choice()
{    
    for( var i = 0; i < buttons_status.length; i++ )
    {
        if( buttons_status[i] == 'click' )
        {
            buttons_status[i] = 'normal';
            if( i == 0 )
            {
                var player = 'Rock';
           }
            else if( i == 1 )
            {
                var player = 'Scissors';
            }
            else
            {
                var player = 'Paper';
            }
            console.log('Player: ' + player)
            var computer = ki();
            console.log('Computer: ' + computer)
            var result = compare(computer, player);
            console.log(result);
        };
    };
}

function compare(computer, player)
{
    if( computer == 'Rock' )
    {
        if( player == 'Scissors')
        {
            return 'Computer wins';
        }
        else if( player == 'Paper' )
        {
            return "Player wins";
        }
        else
        {
            return 'tie';
        };
    }
    else if( computer == 'Scissors')
    {
        if( player == 'Paper')
        {
            return 'Computer wins';
        }
        else if( player == 'Rock' )
        {
            return "Player wins";
        }
        else
        {
            return 'tie';
        };
    }
    else if( computer == 'Paper')
    {
        if( player == 'Rock')
        {
            return 'Computer wins';
        }
        else if( player == 'Scissors' )
        {
            return "Player wins";
        }
        else
        {
            return 'tie';
        };
    }
}

//Animation
function loop()
{
    main_ctx.clearRect(0,0,800,600);
    
    button();
    
    player_choice();
    
    //compare();
    
    if( is_playing == true )
    {
        requestaframe(loop);
    }
}



function start_loop()
{
    is_playing = true;
    loop();
}

Du hast, möglicher Weise unabsichtlich, fast nur mit globalen Variablen gearbeitet. In dem, was ich geändert habe, habe ich versucht, möglichst lokale Variablen zu verwenden.

Noch ein Verbesserungsvorschlag: Eleganter wäre es, die Strings in einem Array abzulegen. Dann ist die Zuweisung ein Einzeiler:
var ele = ['Rock', 'Scissors', 'Paper'];
Und in der Funktion player_choice():
var player = ele[i];
Wie Du die Funktion ki() dann ändern musst, kannst Du ja selber mal überlegen.

MisterX75 · 03. März 2015

Vielen Dank. Ich werde mich nachher gleich dransetzen und es umsetzen.

Edit: Habe es soweit hinbekommen danke nochmals. Habe auch deinen Rat wegen des Einzeilers befolgt. Die Ausgabe wird jetzt auch angezeigt und dabei die Loop-funktion beendet. Jetzt noch ein wenig aufräumen und dann überlegen, wie ich es mit der ki umsetze. Wegen den globalen Variablen ist es halt so, dass ich es eigentlich gewohnt bin, die Variable einmal definieren und dann im Programm nutzen kann, ohne jedesmal var davor schreiben zu müssen. Habe aber auch gelesen, dass es im JS so nicht geht. Falls du es nochmal sehen möchtes( die ungaufgeräumte Version

) dann hier nochmal der Link.
index

Grüße
Marco

Ein Spiel zu Übung

MisterX75

New member

Sempervivum

Banned

MisterX75

New member

Sempervivum

Banned

MisterX75

New member

Sempervivum

Banned

MisterX75

New member

Sempervivum

Banned

MisterX75

New member