php - Snake - Gem score i SQL. - Udvikleren.dk - Programmering, webdesign og grafik

Tags: php javascript

Bruger #17118 @ 11.04.12 15:14

Hej med jer.

Så er jeg tilbage online - og leger nu med et html spil i javascript.
Som er: Snake

PHP kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 <title></title> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script>
 var movLeft = 0;
 var movRight = 0;
 var movUp = 0;
 var movDown = 0;
 
 var score = 1;
 var ticksPertail = 3;
 var tickCounter = 5;
 var tailLength = 8;
 var tailIncreasePerBerry = 5;
 
 var tickInterval;
 $(function() {
     // Keydown listener
     $("body").keydown(function(e) {
         ek = e.keyCode;
         if (ek==37) { resetDirection(); movLeft=1;} 
         if (ek==39) { resetDirection(); movRight=1;}
         if (ek==38) { resetDirection(); movUp=1;}
         if (ek==40) { resetDirection(); movDown=1;}
     });
     // Keyup listener NOT USED
     /*
     $("body").keyup(function(e) {
         ek = e.keyCode;
         if (ek==37) movLeft=0;
         if (ek==39) movRight=0;
         if (ek==38) movUp=0;
         if (ek==40) movDown=0;
     });*/
     setup(); // Do setup
 });
 
 // Setups the game. Adds a new div "tempMov" which is used to calculate whenever the player is allowed to move
 function setup() {
     var x = $(".player").css("left");
     var y = $(".player").css("top");
     var width = $(".player").width();
     var height = $(".player").height();
     $(".game").prepend("<div class='tempMov' style='position: absolute; left:"+x+"; top:"+y+"; width:"+width+"px; height:"+height+"px;'></div>");
     
     var x = (Math.floor(Math.random() * ($(".game").width() - 21)));
     var y = (Math.floor(Math.random() * ($(".game").height() - 21)));
     $(".game").prepend("<div class='berry' style='left:"+x+"px; top:"+y+"px;'></div>");
     tickInterval = setInterval("movTick()", 10); // Setup interval. Delay controlls tickrate.
 }
 
 function resetDirection() {
     movLeft = 0;
     movRight = 0;
     movUp = 0;
     movDown = 0;
 }
 
 // Checks if a is inside b
 function insideGameArea(a, b) {
     var aPos = a.position();
     
     var aLeft = aPos.left;
     var aRight = aPos.left + a.width();
     var aTop = aPos.top;
     var aBottom = aPos.top + a.height();
     
     var bLeft = 0
     var bRight = b.width();
     var bTop = 0
     var bBottom = b.height();
     return !(aLeft < 0 || aTop < 0 || aRight > bRight || aBottom > bBottom);
 }
 
 // Checks if div a overlaps div b
 function divOverlap(a, b) {
     var aPos = a.position();
     var bPos = b.position();
     
     var aLeft = aPos.left;
     var aRight = aPos.left + a.width();
     var aTop = aPos.top;
     var aBottom = aPos.top + a.height();
     
     var bLeft = bPos.left;
     var bRight = bPos.left + b.width();
     var bTop = bPos.top;
     var bBottom = bPos.top + b.height();
     
     return !( bLeft > aRight || bRight < aLeft || bTop > aBottom || bBottom < aTop);
 }
 
 function paintScore() {
     $(".score").text("Score: " + score);
 }
 
 // Move one pixel for each direction and check if move is valid.
 function movTick() {
     var moved = 0;
     if (movUp) { $(".tempMov").css({"top": "-=1"}); moved=1;}
     if (movDown) { $(".tempMov").css({"top": "+=1"}); moved=1;}
     if (movLeft) { $(".tempMov").css({"left": "-=1"}); moved=1;}
     if (movRight) { $(".tempMov").css({"left": "+=1"}); moved=1;}
     if (!moved) return false;
     var moveAllowed = 1;
     
     if (!insideGameArea($(".tempMov"), $(".game"))) {
         gameOver();
         moveAllowed = 0;
     } // Checks if move is inside the gamearea.
     
     $(".soft").each(function(index) {
         // Checks if there is any overlap on a soft tail with the player.
         if (!divOverlap($(".player"), $(".soft:eq("+index+")"))) {
             $(".soft:eq("+index+")").addClass("solid").removeClass("soft");
         }
     });
     
     if (tickCounter % 3) {
         $(".solid").each(function(index) {
             // Checks if there is any overlap on a solid object or tail.
             if (divOverlap($(".player"), $(".solid:eq("+index+")"))) {
                 gameOver();
                 moveAllowed = 0;
             }
         });
     }
     
     $(".berry").each(function(index) {
         if (divOverlap($(".player"), $(".berry:eq("+index+")"))) {
             $(".berry:eq("+index+")").remove();
             score += 25;
             paintScore();
             tailLength += tailIncreasePerBerry;
             var x = (Math.floor(Math.random() * ($(".game").width() - 21)));
             var y = (Math.floor(Math.random() * ($(".game").height() - 21)));
             $(".game").prepend("<div class='berry' style='left:"+x+"px; top:"+y+"px;'></div>");
         }        
     });
         
     if (moveAllowed) {
         $(".player").css({"left": $(".tempMov").css("left"), "top": $(".tempMov").css("top")}); // Apply the move to the player
         tickCounter++;
         if (tickCounter >= ticksPertail) {
             tickCounter=0;
             $(".game").prepend("<div class='tail soft' style='left:"+$(".tempMov").css("left")+"; top:"+$(".tempMov").css("top")+";'></div>");
             $(".tail:gt("+tailLength+")").remove();
         }
     } else {
         $(".tempMov").css({"left": $(".player").css("left"), "top": $(".player").css("top")}); // Reset the tempMov to last location
     }
 }
 
 function gameOver() {
     if (tickInterval) {
         clearInterval(tickInterval);
         tickInterval = false;
         alert("Spillet er slut.");
     }
 }
 </script>
 
 <style>
 .game {
     width:400px;
     height:400px;
     position:relative; 
     border:2px solid #000;
     border-radius: 7px;
 }
 .player {
     width:13px; 
     height:13px; 
     background-color:#000000; 
     position:absolute;     
     -moz-border-radius: 10px;
     -moz-box-shadow: 0 0 10px #aaa;
     -webkit-border-radius: 10px;
     -webkit-box-shadow: 0 0 10px #aaa;
 }
 .solid {
     position:absolute; 
 }
 .tail {
     width:13px;
     height:13px;
     background: url("fangmig.png");
     position:absolute;
        -moz-border-radius: 5px;
     -moz-box-shadow: 0 0 5px;
     -webkit-border-radius: 5px;
     -webkit-box-shadow: 0 0 5px;
 }
 .berry {
     width:20px;
     height:20px;
     position:absolute; 
     background:rgba(255,204,0,1);
     background: url("fangmig.png");
 }
 .score {
     color: green;
     font-size:18px;
     z-index:50;
     margin:5px;
 }
 </style>
 <body>    <div class="score">Score: 0</div>
 <div class='game'>
     <div class='player' style='left:50px; top:50px;'></div>
 </div>
 </body>

Men mit spørgsmål er, hvordan får jeg med gameOver() sat score i en SQL tabel, så man kan trække det ud i en highscore. Så man kan se hvor høj en score folk har fået.

Hvis jeg får score med i, kan jeg derefter selv udvikle dette, så det gemmer med brugernavn/session/cookies.

Men jeg aner ikke hvordan jeg får:

SQL kode

 mysql_query("INSERT INTO `snake_spilleid` (opnaaet_scror) VALUES ('$score')") or die(mysql_error());

Håber i kan hjælpe mig videre med dette problem.

Indlæg senest redigeret d. 12.04.2012 09:23 af Bruger #17118

7 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #15663 @ 11.04.12 15:32

415

Det kan du jo gøre via noget AJAX

Dette burde kunne hjælpe dig lidt LINK

Bruger #17118 @ 11.04.12 15:39

Mit problem er at jeg skal have kaldet "score" frem, hvor jeg så kan klikke på et "link" med ajax, hvor den så gemmer highscoren.

Men jeg kan ikke få det kaldet frem. Kan godt få den til at udskrive: Score: 0 - men den skal også kunne hentes, så den kan blive gemt i SQL.

Den udskriver: Score 0 med <div class="score">Score: 0</div>

Bruger #15663 @ 11.04.12 15:44

415

Har du din score i variabel?

Bruger #17118 @ 11.04.12 15:54

Går ud fra det er:

function paintScore() {
$(".score").text("Score: " + score);
}

Bruger #15663 @ 11.04.12 15:59

415

Der udskriver du blot scoren.

Den hedder score. (se var score).

Så må du via AJAX kunne sende denne variabel over til dine serverside fil og derfra tilføje den din db

Bruger #17118 @ 11.04.12 16:14

Ja, men jeg er i tvivl om hvorledes det gøres. Læser og læser, men finder ikke ud af en løsning der virker.

Bruger #16936 @ 12.04.12 01:48

Hvorfor spørger du ikke robserob.dk som åbenlyst har lavet spillet?

Snake - Gem score i SQL.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler