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!

Hilfe zur Kollisionsabfrage

Werbeanzeige

skiwan

Frischling

  • »skiwan« ist der Autor dieses Themas

Beiträge: 1

  • Private Nachricht senden

1

24.03.2014, 17:40

Hilfe zur Kollisionsabfrage

Hallo liebe Community. Ich bin noch relativ neu im Bereich HTML5 bzw Javascript.
Ich habe derzeit ein kleines Projekt bei dem ich im Moment nicht weiter komme und Fragen wollte ob mir Jemand helfen könnte.

Ich bekomme das irgendwie nicht hin das ich eine ordentliche Kollisionsabfrage schreibe... seit Tagen :dash:
Könntet ihr mir vielleicht Ansätze geben bzw eure Ideen wie ich das umsetzten kann. Es geht hier nur um die Kollision von zwei Rechtecken in einem Mehr oder Weniger Tilebased Level.

Hier mal der Code:

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

( function(){

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var levelCols =22;
var levelRows =18;
var tileSize = 32;
var playerCol=10;
var playerRow= 8;

var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;
var movementSpeed = 6;
var playerXSpeed = 0;
var playerYSpeed = 0;


var level =[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],// this is the level 
[0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0],// 0 for water_blue
[0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,1,1,1,0,0],// 1 for grass_green
[0,1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],// 2 for stone_grey
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0],
[0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];


var playerXPos = playerCol * tileSize;
var playerYPos = playerRow * tileSize;

    document.addEventListener("keydown", function(e){
        console.log(e.keyCode);
        switch(e.keyCode) {
            case 65:
                leftPressed=true;
                break;
            case 87:
                upPressed=true;
                break;
            case 68:
                rightPressed=true;
                break;
            case 83:
                downPressed=true;
                break;
            }
        }, false);
        
        
    document.addEventListener("keyup", function(e){
        switch(e.keyCode) {
            case 65:
                leftPressed=false;
                break;
            case 87:
                upPressed=false;
                break;
            case 68:
                rightPressed=false;
                break;
            case 83:
                downPressed=false;
                break;
            }
        }, false);


        
canvas.width = levelCols*tileSize;
canvas.height= levelRows*tileSize;


renderLevel();

function renderLevel() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = "#0000ff";//water
    for(i=0;i<levelRows;i++){
        for(j=0;j<levelCols;j++){
            if(level[i][j] == 0){
                context.fillRect(j*tileSize,i*tileSize,tileSize,tileSize);
                }
            }
        }
    context.fillStyle = "#00ff00";//grass
    for(i=0;i<levelRows;i++){
        for(j=0;j<levelCols;j++){
            if(level[i][j] == 1){
                context.fillRect(j*tileSize,i*tileSize,tileSize,tileSize);
                }
            }
        }   
        
    context.fillStyle = "#030303";//stone
    for(i=0;i<levelRows;i++){
        for(j=0;j<levelCols;j++){
            if(level[i][j] == 2){
                context.fillRect(j*tileSize,i*tileSize,tileSize,tileSize);
                }
            }
        }   

    //player red box
    context.fillStyle = "#ff0000";
    context.fillRect(playerXPos,playerYPos,tileSize,tileSize);
    }
    
    // this function will do its best to make stuff work at 60FPS - please notice I said "will do its best"
    
    window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000/60);
        };
    })();
    
    
    function updateGame(){
    
        playerXSpeed =0;
        playerYSpeed =0;
        
        if(rightPressed) {
                playerXSpeed=movementSpeed;
            }   
            else {
                if(leftPressed){
                    playerXSpeed=-movementSpeed;
                }
                else{
                    if(upPressed){
                        playerYSpeed=-movementSpeed;
                    }
                    else{
                        if(downPressed){
                            playerYSpeed=movementSpeed;
                            }
                        }
                    }
                }
    
    
            playerXPos+=playerXSpeed;
            playerYPos+=playerYSpeed;
    
    
        renderLevel();
        
        requestAnimFrame(function(){
                updateGame();
                });
            }
    
            updateGame();



    


}) ();


Bisher Habe ich versucht mit

Quellcode

 
1

var colTile = Math.floor(playerXPos/tileSize);
mir zb die Tileposition des Spielers zu erechnen und dann zu sagen wenn er sich nach links bewegt soll er überprüfen ob neben ihm ein Tile mit 2 bzw 0 ist (das sind die Tiles die man nicht betreten können soll) aber irgendwie hat das nicht funktioniert sondern nur zu buggs geführt wie zb das es sich garnicht mehr bewegen lies etc

wie würdet ihr das umsetzen ? Über Quellcode würde ich mich freuen aber auch theoretische Ansätze wären sehr schön.

Ähnliche Themen