Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

JS Jump'n run Fragen/Probleme

Werbeanzeige

Oink89

Frischling

  • »Oink89« ist der Autor dieses Themas

Beiträge: 1

  • Private Nachricht senden

1

24.06.2012, 13:16

JS Jump'n run Fragen/Probleme

Moinsen,
ich habe mich etwas mit JavaScript beschäftigt (davor mit php), e igendlich nur um Jquery besser zu verstehen... Nun wollte ich Anfangen kleinere Spiele (JS und Canvas) zu schreiben (ich denke das sind gute praktische übungen um JavaScript zu verstehen, welche auch spass machen :) ). Ich hab mir schon paar Tut's angeschaut (vorallem: Build a vertical scrolling shooter game).
Nun wollte ich ein "Jump'n run"-Spiel schreiben (nichts großes, nur um paar grundeigenschaften zu testen und verstehen) da sind 2 Probleme bzw Fragen die ich hätte.
1.) Wie schreibe ich eine richtige Sprung Annimation?
(im script unten, wenn man space drückt springt der Block zwar, aber bei doppel drücken der taste verfängt er sich in eine Schleife)
2.) Wie sage ich ihm das falls ein "Hindernis s"(sprich ein oranger Block) das es dort nicht weiter geht (auch beim drauf springen)?
(unten im script, mit if abfragen geschrieben und die x und y Koordinaten vom "player"- und "Hindernis s"-Block gegengerechnet)

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

<html>
<head>

<style>
body    {background-color:#666;
         
        }
#canvas {background-color:#333;
        border:solid 1px #CCC;
        display:block;
        margin-left:auto;
        margin-top:20px;
        margin-right:auto;
        }
</style>

<script language="javascript" type="text/javascript">

var canvas,
    ctxt,
    width=700,
    height=500,
    player_x=15,
    player_y=height-70,
    player_w=40,
    player_h=70,
    barricade_x=55 + Math.floor(Math.random()*10+1) + Math.floor(Math.random()*30+1),
    barricade_y=height-60,
    barricade_w=40,
    barricade_h=40,
    barricade=[],
    barricade_counter=5,
    jump_counter=0,
    jump=false,
    playerStopL=false,
    playerStopR=false;

for(var a=0;a<barricade_counter;a++){
    barricade.push([barricade_x,barricade_y,barricade_w,barricade_h]);
    barricade_y =height-60;
    barricade_x +=barricade_w + Math.floor((Math.random()*60+1))+ 50;
    barricade_y -=barricade_h + Math.floor((Math.random()*10+1));
};  
    
function init(){
    canvas=document.getElementById('canvas');
    ctxt=canvas.getContext('2d');
    document.onkeydown=keyListener;
    setInterval(start,25);
    start();    
};

function clearCanvas(){
    ctxt.clearRect(0,0,width,height);   
}

function drawBarricade(){

    for(var i=0;i<barricade.length;i++){
        
        ctxt.fillStyle="#BCA64E";
        ctxt.fillRect(barricade [i][0],barricade [i][1],barricade_w,barricade_h);
    };
};

function drawPlayer(){
    ctxt.fillStyle="#6A96B0";
    ctxt.fillRect(player_x,player_y,player_w,player_h); 
};

function playerHitBarricade(){
    var player_xw = player_x + player_w,
         player_yh = player_y + player_h;
    
    for(var i=0;i<barricade.length;i++){
        if( player_x > barricade [i][0] && player_x < barricade[i][0] + barricade_w && player_y > barricade[i][1] && player_y < barricade[i][1] + barricade_h )
        { playerStopL=true;}; 
        if(player_xw < barricade [i][0] + barricade_w && player_xw > barricade[i][0] && player_y > barricade[i][1] && player_y < barricade[i][1] + barricade_h)
        { playerStopR=true;};
    };
};

function jumpAnimation(){
        
        
        if(!jump){
            player_y -=70;
            jump=true;
        }
        else
        {
            player_y +=70;
            jump=false;
        }
        jump_counter=jump_counter+1;
        if(jump_counter>=2){
        clearInterval(j);
    
        }
        
}


function keyListener(e){
    if(!e) e=window.event;
    
    if(!playerStopL || !playerStopR ){
        if(e.keyCode==37) player_x -=1; 
        if(e.keyCode==39) player_x +=1;
    }
  
    if(playerStopL){
        if(e.keyCode==37) player_x -=0; 
        }
    if(playerStopR){    
        if(e.keyCode==39) player_x +=0;
    }
    
    if(e.keyCode==32)   j = setInterval(jumpAnimation,300);
                                
    
};

function start(){
        clearCanvas();
        playerHitBarricade();
        drawPlayer();
        drawBarricade();
};


window.onload=init;
</script>
</head>

<body>

<canvas id="canvas" width="700" height="500"></canvas>
</body>
</html>


soo das solls auch schon gewesen sein XD

mfg
Oink89

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Oink89« (25.06.2012, 11:54)

Ähnliche Themen