Sujet Précédent Sujet Suivant

Problème création d'obstacles

Fermé
Ludo57440 - 4 mai 2018 à 23:16
 Ludo57440 - 6 mai 2018 à 14:16
Bonsoir !

Actuellement, j'essaye de travailler sur un projet de jeu 2d en javascript. J'ai déjà réalisé le personnage et j'ai réussi a le faire bouger . A présent j'aimerais faire apparaître des obstacles aléatoirement a droite de l'écran sur l'axe y et en mouvement de droite a gauche (un peu dans le style des jeux 2d de vaisseaux spatiaux) le personnage, lui, peut déjà bouger de haut en bas afin d'esquiver ces obstacles. Mais je bloque sur ce point. C'est pourquoi je vous demande de l'aide.

voila le début du code que j'ai essayé de faire: 

 aleatoire = Math.floor(Math.random() * (height-550 - height-50 + 1)) + height-50;
 
     
 
function obstacles(x, y) {
 
    function dessiner() {
 
  var canvas = document.getElementById('pic');
 
  if (pic.getContext) {
 
    var ctx = pic.getContext('2d');
 
  
 
    ctx.beginPath();
 
    ctx.moveTo(75, 50);
 
    ctx.lineTo(100, 75);
 
    ctx.lineTo(100, 25);
 
    ctx.fill();
 
  }
 
setInterval(obstacles, 2000);
 
y = aleatoire;
 
x = width;
 
while (x>0) {
 
    x -= 10; }
 
    }
 
  
 
}
//width = a droite de l'ecran


A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
5 mai 2018 à 17:02
Bonjour, 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device=width, initial-scale=1.0">
    <title>TEST</title>
   
</head>
<body>
  <canvas id="canvas"></canvas>
  <script type="text/javascript">
    var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

    canvas.width = canvas.height = 256;

    var oObstacle = [];
    var colors = ['red','blue','green','yellow','black'];
    for(var i = 0; i < 5; i++){
        var x = 256,
            y = Math.random()*256,
            width = 40,
            height= 40;
            color = colors[i];

        oObstacle.push({x:x, y:y, width : width, height : height,color:color });  
    }

    function draw(){
        ctx.clearRect(0,0,256,256);
        
        ctx.strokeStyle = "black";
        for(var i = 0; i < 5; i++){
            var curShape = oObstacle[i];
            curShape.x--;
            ctx.fillStyle =curShape.color;

            ctx.fillRect(curShape.x, curShape.y, curShape.width, curShape.height);
            ctx.strokeRect(curShape.x, curShape.y, curShape.width, curShape.height);
        }
        setTimeout(draw,20);
    }

    draw();
  </script>
</body>
</html>

0
Ludo57440
6 mai 2018 à 14:16
Merci beaucoup pour votre aide ! mais j'aimerais créer des obstacles qui peuvent apparaitre n'importe où sur l'axe des y sur tout l'écran du coup j'ai modifié votre programme mais ça ne semble pas marcher quand je le modifie : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device=width, initial-scale=1.0">
    <title>TEST</title>
   
</head>
<body>
  <canvas id="canvas"></canvas>
  <script type="text/javascript">
width = window.innerWidth,
    
height = window.innerHeight;

    
canvas = document.getElementById("canvas"),
    
context = canvas.getContext("2d");

canvas.width = width;
    
canvas.height =height;
   
var oObstacle = [];
    var colors = ['red','blue','green','yellow','black'];
    for(var i = 0; i < 5; i++){
        var x = width/1.5,
            y = Math.random()*(height),
            width = 100,
            height= 100;
            color = colors[i];

        oObstacle.push({x:x, y:y, width : width, height : height,color:color });  
    }

    function draw(){
        context.clearRect(0,0,width,height);
        
        context.strokeStyle = "black";
        for(var i = 0; i < 5; i++){
            var curShape = oObstacle[i];
            curShape.x--;
            context.fillStyle =curShape.color;

            context.fillRect(curShape.x, curShape.y, curShape.width, curShape.height);
            context.strokeRect(curShape.x, curShape.y, curShape.width, curShape.height);
        }
        setTimeout(draw,500);
    }

    draw();

  </script>
</body>
</html>


Pouvez-vous m'aider ? Merci d'avance
0