php - Piletaster på en tab/mobil? - Udvikleren.dk - Programmering, webdesign og grafik

Tags: mobil tab php script piletaster

Bruger #17407 @ 28.05.13 15:19

Hej udviklere!

Jeg har et problem.. Jeg leder efter et system hvor man kan klikke på et felt, og så flytter den ting jeg skal have flyttet sig.

Noget lignende http://i.imgur.com/gJo18hE.png

Håber I kan hjælpe.

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

Sorter efter stemmer Sorter efter dato

Bruger #4487 @ 28.05.13 23:00

1.384

Du koder det således at det objekt du gerne vil have flytter sig, gør dette i den retning som knappen viser. Hvis du arbejder med grafik eller billeder kan du formentlig flytte dit objekt i forhold til et x og y kordinat i et canvas eller den container der nu er uden om.

Det er svært at hjælpe, når vi ikke har noget at gå ud fra. Hvad koder du det i? hvordan ser din kode ud indtil nu?

Bruger #17407 @ 29.05.13 21:50

PHP kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head> 
 <title>App Test</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 = 0;
 $(function() {
     
     $("body").keydown(function(e) {
         ek = e.keyCode;
         if (ek==37) movLeft=1;
         if (ek==39) movRight=1;
         if (ek==38) movUp=1;
         if (ek==40) movDown=1;
     });
     
     $("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(); 
 });
 
 
 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>");
     setInterval("movTick()", 10); 
 }
 
 
 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);
 }
 
 
 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 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"))) moveAllowed = 0;
     
     $(".solid").each(function(index) {
         if (divOverlap($(".tempMov"), $(".solid:eq("+index+")"))) moveAllowed=0; 
     });
     
     $(".coin").each(function(index) {
         if (divOverlap($(".tempMov"), $(".coin:eq("+index+")"))) { score+=50; $(".coin:eq("+index+")").remove(); } 
     });
         
     if (moveAllowed) {
         $(".player").css({"left": $(".tempMov").css("left"), "top": $(".tempMov").css("top")}); 
     } else {
         $(".tempMov").css({"left": $(".player").css("left"), "top": $(".player").css("top")}); 
     }
 }
 </script>
 <style>
 .game {
     width:500px;
     height:500px;
     position:relative; 
     border:2px solid #000;
 }
 .player {
     width:25px; 
     height:25px; 
     background-color:#000000; 
     position:absolute;     
 }
 .solid {
     position:absolute; 
 }
 .coin {
     width:10px;
     height:10px;
     position:absolute; 
     background:rgba(255,204,0,1);
 }
 .coin2 {
     width:50px;
     height:50px;
     position:absolute; 
     background:rgba(0,125,0,0.3);
 }
 </style>
 <body>
 <div class='game'>
     <div class='player' style='left:10px; top:10px;'></div>
     <div class='solid' style='width:250px; height:50px; background-color:rgba(0,125,0,0.3); left:0px; top:50px;'></div>
     <div class='solid' style='width:50px; height:200px; background-color:rgba(0,125,0,0.3); left:300px; top:0px;'></div>
     <div class='solid' style='width:100px; height:50px; background-color:rgba(0,125,0,0.3); left:200px; top:150px;'></div>
     <div class="solid" style="width:50px; height:200px; background-color:rgba(0,125,0,0.3); left:100px; top:100px;"></div>    
     <div class="solid" style="width:50px; height:200px; background-color:rgba(0,125,0,0.3); left:200px; top:200px;"></div>
     <div class="solid" style="width:150px; height:50px; background-color:rgba(0,125,0,0.3); left:50px; top:350px;"></div>
        <div class="solid" style="width:150px; height:50px; background-color:rgba(0,125,0,0.3); left:300px; top:350px;"></div>
     
     <div class="coin" style="left:50px; top: 17px;"></div>
     <div class="coin" style="left: 100px; top: 17px;"></div>
     <div class="coin" style="left: 150px; top: 17px;"></div>
     <div class="coin" style="left: 200px; top: 17px;"></div>
     <div class="coin" style="left: 250px; top: 17px;"></div>
     
 
     
     
 </div>
 </body>

Bruger #4487 @ 29.05.13 22:08

1.384

Kan se du bruger javascript og ikke PHP, så ved ikke hvorfor du har sat det ind i en PHP boks

Jeg tænker du kunne kigge på HTML 5's Canvas. Her kan du tegne og få objekter til at bevæge sig. Tag for eksempel et kig på denne turorial

http://simonsarris.com/blog/140-canvas-moving-selectable-shapes

Her kan man flytte objekter rundt ved at vælge dem og herefter flytte dem hen til et nyt sted. De benytter vist en mouseEvent, du skal så bare lave det med en clickEvent på en knap, tænker jeg.

Piletaster på en tab/mobil?

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler