Problème création d'obstacles

Ludo57440 -  
 Ludo57440 -
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
 
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