Søg
Avatar billede webstuff Nybegynder
10. februar 2006 - 08:52 Der er 15 kommentarer og
1 løsning

flyt <div> med piletaser

Jeg sidder så småt og prøver at lege med at lave et lille ping pong spil i javascript.. Men kan ikke rigtigt få det til at fungere, dette er min funktion som jeg håbede ville få min målmand til at flytte sig, men der sker ikke rigtigt noget.
---
<script type="text/javascript">
pixels = 3
function retning(){
    if (event.keyCode == "39") {
    maalmand.style.left =  parseInt(maalmand.style.left) + pixels
    }
    if (event.keyCode == "37") {
    maalmand.style.left =  parseInt(maalmand.style.left) - pixels
    }
}
document.onkeydown = retning
</script>
------
Nogen der kan se hvad jeg gør galt?
Avatar billede webstuff Nybegynder
10. februar 2006 - 08:53 #1
har prøvet med:
document.all.maalmand.style.left
men det virker heller ikke :-(
Avatar billede webstuff Nybegynder
10. februar 2006 - 09:12 #2
Jeg har nu denne kode, regner med at den er mere korrekt, men den virker stadig ikke:
----------------------------------------------------------
<body>
<script type="text/javascript">
pixels = 3
flyttil = "venstre"

function flyt(){
    if(flyttil == "venstre"){
    maalmand.style.left =  parseInt(maalmand.style.left) - pixels
    }
    if(flyttil == "hoejre"){
    maalmand.style.left =  parseInt(maalmand.style.left) + pixels
    }
}
function retning(){
    if (event.keyCode == "37") {
    flyttil = "venstre"
    }
    if (event.keyCode == "39") {
    flyttil = "hoejre"
    }
}
document.onkeydown = retning
</script>
<body onLoad="flyt();">
<div id="maalmand"><br /></div>
</body>
Avatar billede ldanielsen Nybegynder
10. februar 2006 - 09:24 #3
Jeg har givet div'en lidt styling; jeg har sat left til 0 til at starte med, og sat position til absolute.

Og så har jeg angivet at objectet maalmand er document.getElementById("maalmand");

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>

<script type="text/javascript">
var pixels = 3
var maalmand
function retning(){
    if (event.keyCode == "39") {
    maalmand.style.left =  parseInt(maalmand.style.left) + pixels
    }
    if (event.keyCode == "37") {
    maalmand.style.left =  parseInt(maalmand.style.left) - pixels
    }
}
function init(){
    document.onkeydown = retning;
    maalmand = document.getElementById("maalmand");
    }

</script>
</HEAD>
<BODY onload="init();">
<div id="maalmand" style="position: absolute; left: 0px;">xxx</div>


</BODY>
</HTML>
Avatar billede webstuff Nybegynder
10. februar 2006 - 09:33 #4
Nu ser det sådan her ud, men virker stadig ikke:
-------------------------------------------------
<html>
<head>
<style>
body{
  background-image:url('bg.bmp');
}
</style>
<script type="text/javascript">
var pixels = 3
var maalmand
function retning(){
    if (event.keyCode == "39") {
    maalmand.style.left =  parseInt(maalmand.style.left) + pixels
    }
    if (event.keyCode == "37") {
    maalmand.style.left =  parseInt(maalmand.style.left) - pixels
    }
}
function init(){
    document.onkeydown = retning;
    maalmand = document.getElementById("maalmand");
    }
</script>
</head>
<body onLoad="init();">
<div id="maalmand" style="position:absolute;top:490px;left:165;width:70px;height:0px;background-color:#fff;line-height:5px;"><br /></div>
</body>
</html>
Avatar billede ldanielsen Nybegynder
10. februar 2006 - 09:46 #5
Det eneste der er galt med den er at det er hvidt på hvidt

Sæt background-color:#000000, så kan man se noget
Avatar billede webstuff Nybegynder
10. februar 2006 - 09:50 #6
Baggrundsbilledet er sort, og det virker ikke hos mig?:-(
Avatar billede webstuff Nybegynder
10. februar 2006 - 10:47 #7
Det er mig der lyver.. Det virker fint nok, men ikke når jeg kører inde i et iframe..
???
Avatar billede webstuff Nybegynder
10. februar 2006 - 10:53 #8
Tak for hjælpen.. Men kan du alligevel sige mig hvorfor det ikke virker i et iframe hvis du ved det?
Avatar billede ldanielsen Nybegynder
10. februar 2006 - 11:37 #9
Hvis du nu klikker i den iframe, så den får focus, virker det så? Hvis ja, kan du jo til føje

self.focus();

til funktionen init()

Tak for point
Avatar billede webstuff Nybegynder
10. februar 2006 - 11:46 #10
jeg prøver.. selv tak :-)
Nu bikser jeg med bolden som skal flyve rundt, det går fremad men jeg ved jeg går i stå, så kan det være jeg opretter et nyt spørgsmål ;-)
Avatar billede ldanielsen Nybegynder
10. februar 2006 - 12:24 #11
Du er velkommen til at se på og stjæle fra dette Bricks spil, som jeg kun blev halvt færdig med for nogle år siden:


<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script language=javascript>
var bricksArr = new Array()
rows = 5
cols = 10
xGap = 19
yGap = 49
fadeLevels = 2
for (n=0;n<rows;n++){
    v = n*xGap
    for (i=0;i<cols;i++){
        num = (n*cols)+i
        bricksArr[num] = new Array()
       
        h = i*yGap
   
        bricksArr[num][0] = h+10
        bricksArr[num][1] = h+50
        bricksArr[num][2] = v+30
        bricksArr[num][3] = v+40
        bricksArr[num][4] = fadeLevels
        }
    }
//var iBrickWidth = 300
//var iBrickHeight = 100
//var iBrickTop = 50
//var iBrickLeft = 70

var iLaneWidth = 500
var iLaneHeight = 400

var iBallWidth = 10
var iBallHeight = 10

var iBatWidth = 50
var iBatHeight = 10

var iBatTop = iLaneHeight - 50
var iBatLeft = iLaneWidth/2

var bBatMove = false
var zBat = 0

var iTop = iBatTop
var iLeft = 10

var zTopOriginal = -2
var zLeftOriginal = 1
var zTop = zTopOriginal
var zLeft = zLeftOriginal

var hitBrick = 0
var lastBrick = -1
var hitBat = false
var hitWall = false
function moveBall(){
    hitWall = (iTop >= iLaneHeight-iBallHeight || iTop <= 0) ? true : false
    if (!hitWall){
        hitBat = (iLeft+iBallWidth > iBatLeft && iLeft < iBatLeft+iBatWidth && iTop >= iBatTop-iBallHeight && iTop <= iBatTop+iBallHeight) ? true : false
        if (hitBat){
            var lastBrick = -2
            zLeft = (iLeft > iBatLeft+(iBatWidth/2)-(iBallWidth/2)) ? zLeftOriginal : zLeftOriginal*-1
            if (iLeft > iBatLeft+(iBatWidth*0.75)-(iBallWidth/2)) zLeft = zLeftOriginal*2
            if (iLeft < iBatLeft+(iBatWidth*0.25)-(iBallWidth/2)) zLeft = zLeftOriginal*-2
        }else{
            if (hitBrick == 0){
                for (i=0;i<bricksArr.length;i++){
                    if (hitBrick == 0 && i != lastBrick && bricksArr[i][4]>0){
                        //hitBrick = intersects(iLeft, iLeft+iBallWidth, iTop, iTop+iBallHeight, bricksArr[i][0], bricksArr[i][0]+bricksArr[i][0]+iBrickWidth, bricksArr[i][2], bricksArr[i][2]+iBrickHeight)
                        hitBrick = intersects(iLeft, iLeft+iBallWidth, iTop, iTop+iBallHeight, bricksArr[i][0], bricksArr[i][1], bricksArr[i][2], bricksArr[i][3])
                        if (hitBrick > 0){
                            lastBrick = i
                            i = bricksArr.length
                            }
                        }
                    }
                if (lastBrick >= 0){
                    bricksArr[lastBrick][4] -= 1
                    //if (bricksArr[lastBrick][4]==0)document.all["brick"+lastBrick].style.backgroundColor = 'green'
                    //if (bricksArr[lastBrick][4]>0)
                    document.all["brick"+lastBrick].style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + 100/fadeLevels*bricksArr[lastBrick][4] + ", Style=0)"
                    }
            }else{
                hitBrick++
                }
            }
    }else{
        var lastBrick = -1
        }
   
   
    if (hitBat || hitWall || hitBrick==1) zTop = zTop*-1
    if (iLeft >= iLaneWidth-iBallWidth || iLeft <= 0 || hitBrick==2) zLeft = zLeft*-1
    if (hitBrick > 0) hitBrick = -1
   
    if (bBatMove && iBatLeft <= 0 && zBat < 0) bBatMove = false
    if (bBatMove && iBatLeft >= iLaneWidth - iBatWidth && zBat > 0) bBatMove = false
    if (bBatMove){
        iBatLeft += zBat
        document.all.bat.style.left = iBatLeft
        }
       
    iTop += zTop
    iLeft += zLeft
    document.all.ball.style.top = iTop
    document.all.ball.style.left = iLeft
    t = window.setTimeout("moveBall()", 10)
   
    //moveBall()
    }
   
function intersects(aL, aR, aT, aB, bL, bR, bT, bB){
    var returnVar = 0
    var zL = aR-bL
    var zR = aL-bR
    var zT = aB-bT
    var zB = aT-bB
   
    if (zL*zR <=0 && zB*zT <=0){
        minX = Math.min(Math.abs(zL),Math.abs(zR))
        minY = Math.min(Math.abs(zT),Math.abs(zB))
        returnVar = (minX >= minY) ? 1 : 2
        }
    return returnVar
    }   
   
function init(){
    document.all.lane.style.width = iLaneWidth
    document.all.lane.style.height = iLaneHeight
    document.all.ball.style.width = iBallWidth
    document.all.ball.style.height = iBallHeight
    document.all.ball.style.top = 10
    document.all.ball.style.left = 10
    document.all.bat.style.width = iBatWidth
    document.all.bat.style.height = iBatHeight
    document.all.bat.style.top  = iBatTop
    document.all.bat.style.left  = iBatLeft
    for (i=0;i<bricksArr.length;i++){
        document.all.bricks.innerHTML += "<div id=brick" + i + " style=\"position: absolute; width: 0px; height: 0px; background-color: white; font-size: 1px;\"></div>"
   
        document.all["brick"+i].style.width = bricksArr[i][1] - bricksArr[i][0]
        document.all["brick"+i].style.height = bricksArr[i][3] - bricksArr[i][2]
        document.all["brick"+i].style.left = bricksArr[i][0]
        document.all["brick"+i].style.top = bricksArr[i][2]
        document.all["brick"+i].style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=100, Style=0)"
                   
        }
    //document.all.brick2.style.width = bricksArr[1][1] - bricksArr[1][0]
    //document.all.brick2.style.height = bricksArr[1][3] - bricksArr[1][2]
    //document.all.brick2.style.left = bricksArr[1][0]
    //document.all.brick2.style.top = bricksArr[1][2]
    }

function moveKeys(i, bState){
    bBatMove = bState
    if (bBatMove){
        if (i == 39) zBat = 3
        if (i == 37) zBat = -3
        }
    }
</script>
</HEAD>
<BODY onload="init(); moveBall()" topmargin=0 leftmargin=0  onKeydown="moveKeys(window.event.keyCode, true)" onKeyUp="moveKeys(window.event.keyCode, false)">
<div id=lane style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; background-color: green; font-size: 1px;"></div>
<div id=bricks></div>
<div id=ball style="position: absolute; width: 0px; height: 0px; background-color: white; font-size: 1px;"></div>
<div id=bat style="position: absolute; width: 0px; height: 0px; background-color: white; font-size: 1px;"></div>
</BODY>
</HTML>
Avatar billede webstuff Nybegynder
10. februar 2006 - 13:09 #12
Det vil jeg meget gerne, tak for det:-D
Avatar billede olebole Juniormester
10. februar 2006 - 13:44 #13
<ole>

- og den samme kode med de værste fejl rettet, så det virker i de fleste browsere  :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script type="text/JavaScript">
gE = function(ID){return document.getElementById(ID)}
var bricksArr = new Array()
rows = 5
cols = 10
xGap = 19
yGap = 49
fadeLevels = 2
for (n=0;n<rows;n++){
    v = n*xGap
    for (i=0;i<cols;i++){
        num = (n*cols)+i
        bricksArr[num] = new Array()
       
        h = i*yGap
   
        bricksArr[num][0] = h+10
        bricksArr[num][1] = h+50
        bricksArr[num][2] = v+30
        bricksArr[num][3] = v+40
        bricksArr[num][4] = fadeLevels
    }
}
var iLaneWidth = 500
var iLaneHeight = 400

var iBallWidth = 10
var iBallHeight = 10

var iBatWidth = 50
var iBatHeight = 10

var iBatTop = iLaneHeight - 50
var iBatLeft = iLaneWidth/2

var bBatMove = false
var zBat = 0

var iTop = iBatTop
var iLeft = 10

var zTopOriginal = -2
var zLeftOriginal = 1
var zTop = zTopOriginal
var zLeft = zLeftOriginal

var hitBrick = 0
var lastBrick = -1
var hitBat = false
var hitWall = false
function moveBall(){
    hitWall = (iTop >= iLaneHeight-iBallHeight || iTop <= 0) ? true : false
    if (!hitWall){
        hitBat = (iLeft+iBallWidth > iBatLeft && iLeft < iBatLeft+iBatWidth && iTop >= iBatTop-iBallHeight && iTop <= iBatTop+iBallHeight) ? true : false
        if (hitBat){
            var lastBrick = -2
            zLeft = (iLeft > iBatLeft+(iBatWidth/2)-(iBallWidth/2)) ? zLeftOriginal : zLeftOriginal*-1
            if (iLeft > iBatLeft+(iBatWidth*0.75)-(iBallWidth/2)) zLeft = zLeftOriginal*2
            if (iLeft < iBatLeft+(iBatWidth*0.25)-(iBallWidth/2)) zLeft = zLeftOriginal*-2
        }else{
            if (hitBrick == 0){
                for (i=0;i<bricksArr.length;i++){
                    if (hitBrick == 0 && i != lastBrick && bricksArr[i][4]>0){
                        hitBrick = intersects(iLeft, iLeft+iBallWidth, iTop, iTop+iBallHeight, bricksArr[i][0], bricksArr[i][1], bricksArr[i][2], bricksArr[i][3])
                        if (hitBrick > 0){
                            lastBrick = i
                            i = bricksArr.length
                            }
                        }
                    }
                if (lastBrick >= 0){
                    bricksArr[lastBrick][4] -= 1
                    gE("brick"+lastBrick).style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + 100/fadeLevels*bricksArr[lastBrick][4] + ", Style=0)"
                    gE("brick"+lastBrick).style.MozOpacity = (100/fadeLevels*bricksArr[lastBrick][4])/100
                    gE("brick"+lastBrick).style.opacity = (100/fadeLevels*bricksArr[lastBrick][4])/100
                    }
            }else{
                hitBrick++
                }
            }
    }else{
        var lastBrick = -1
        }
   
   
    if (hitBat || hitWall || hitBrick==1) zTop = zTop*-1
    if (iLeft >= iLaneWidth-iBallWidth || iLeft <= 0 || hitBrick==2) zLeft = zLeft*-1
    if (hitBrick > 0) hitBrick = -1
   
    if (bBatMove && iBatLeft <= 0 && zBat < 0) bBatMove = false
    if (bBatMove && iBatLeft >= iLaneWidth - iBatWidth && zBat > 0) bBatMove = false
    if (bBatMove){
        iBatLeft += zBat
        gE("bat").style.left = iBatLeft + "px";
        }
       
    iTop += zTop
    iLeft += zLeft
    gE("ball").style.top = iTop + "px";
    gE("ball").style.left = iLeft + "px";
    t = window.setTimeout("moveBall()", 10)
}
   
function intersects(aL, aR, aT, aB, bL, bR, bT, bB){
    var returnVar = 0
    var zL = aR-bL
    var zR = aL-bR
    var zT = aB-bT
    var zB = aT-bB
   
    if (zL*zR <=0 && zB*zT <=0){
        minX = Math.min(Math.abs(zL),Math.abs(zR))
        minY = Math.min(Math.abs(zT),Math.abs(zB))
        returnVar = (minX >= minY) ? 1 : 2
        }
    return returnVar
}   
   
function init(){
    gE("lane").style.width = iLaneWidth + "px";
    gE("lane").style.height = iLaneHeight + "px";
    gE("ball").style.width = iBallWidth + "px";
    gE("ball").style.height = iBallHeight + "px";
    gE("ball").style.top = "10px"
    gE("ball").style.left = "10px"
    gE("bat").style.width = iBatWidth + "px";
    gE("bat").style.height = iBatHeight + "px";
    gE("bat").style.top  = iBatTop + "px";
    gE("bat").style.left  = iBatLeft + "px";
    for (i=0;i<bricksArr.length;i++){
        gE("bricks").innerHTML += "<div id=brick" + i + " style=\"position: absolute; width: 0px; height: 0px; background-color: white; font-size: 1px;\">&nbsp;</div>"
   
        gE("brick"+i).style.width = (bricksArr[i][1] - bricksArr[i][0]) + "px";
        gE("brick"+i).style.height = (bricksArr[i][3] - bricksArr[i][2]) + "px";
        gE("brick"+i).style.left = bricksArr[i][0] + "px";
        gE("brick"+i).style.top = bricksArr[i][2] + "px";
        gE("brick"+i).style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=100, Style=0)"
        gE("brick"+i).style.MozOpacity = 1;
        gE("brick"+i).style.opacity = 1;
                   
    }
}

function moveKeys(e,bState){
    var i = e.keyCode;
    bBatMove = bState
    if (bBatMove){
        if (i == 39) zBat = 3
        if (i == 37) zBat = -3
    }
}
</script>
</HEAD>
<BODY onload="init(); moveBall()" topmargin=0 leftmargin=0  onKeydown="moveKeys(event,true)" onKeyUp="moveKeys(event,false)">
<div id=lane style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; background-color: green; font-size: 1px;"></div>
<div id=bricks></div>
<div id=ball style="position: absolute; width: 0px; height: 0px; background-color: white; font-size: 1px;">&nbsp;</div>
<div id=bat style="position: absolute; width: 0px; height: 0px; background-color: white; font-size: 1px;">&nbsp;</div>
</BODY>
</HTML>

/mvh
</bole>
Avatar billede ldanielsen Nybegynder
10. februar 2006 - 13:58 #14
Tak olebole (Mr. Crossbrowser), men det blev nu aldrig færdigt, bolden kan stadig ende indeni battet, og flere andre bugs :o)
Avatar billede olebole Juniormester
10. februar 2006 - 14:03 #15
I know ... men det synes jeg blev for omfattende. Ideelt blev det skrevet objekt-orienteret, så man også slap for alle variablerne, der ligger og svømmer rundt i det globale scope ... og så kan det gøres en hel del mere 'sexy', men det er da en begyndelse  :)
Avatar billede webstuff Nybegynder
10. februar 2006 - 14:08 #16
Jeg må indrømme at det nok er lidt for stort til mig det der, har kune leget med javascript i en uge, så er lykkelig over at min lille ping pong spil virker :-D
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 18:29 Beregning af flextid - formler Af Slettet bruger i Excel
I dag 10:05 Sætte flere billeder sammen til et billede - IPad seneste version Af nu_igen i Billedbehandling
I går 14:56 Udseende af datoer Af ErikHg i Excel
23/0509:37 hvilken AI synes I er bedst? Af jcr18 i Andre onlineløsninger
22/0518:51 Pausepil på youtube i chrome Af valby i Browsere
White papers
Flere white papers »