Создание простой игры, но ничего не показывая на холсте

<html> 
<head> 
<title>Sean Coyne</title> 

<link rel="stylesheet" type="text/css" href="home.css"> 
<link rel="icon" type="image/x-icon" href="favicon.ico" /> 

</head> 

<body> 


<section> 
<article> 
<div id="logo"><img src="LogoComic.png" id="Logo"></div><br></br> 

<div id="canvas"> 
    <canvas id="c" style="border:5px solid orange" height="500" width="500"></canvas> 

    <p id="p1"></p> 

    <script> 

     var basket_x=100; 
     var basket_y=100; 
     var ball_x=100; 
     var ball_y=100; 
     var points=0;

// цвет фона холстаСоздание простой игры, но ничего не показывая на холсте

 var c = document.getElementById("c"); 
     var ctx = c.getContext("2d"); 
     ctx.fillStyle = "#0000"; 
     ctx.fillRect(0,0,500,500);

// Вот прослушиватель событий

 mycanv.addEventListener("mousemove",seenmotion,false); 

     function seenmotion(e) {

// Это код мышь // перемещение по холсту.

 var bounding_box=mycanv.getBoundingClientRect(); 
       basket_x=(e.clientX-bounding_box.left) * 
            (mycanv.width/bounding_box.width); 
       basket_y=(e.clientY-bounding_box.top) * 
         (mycanv.height/bounding_box.height);  
     } 

     function start_game() { 
      setInterval(game_loop, 50); 
     } 

     function game_loop() {

// Код выше называется каждый 50мс и является // каркасно-перерисовывать-игру-анимацию цикл.

  mycanv.width=mycanv.width;

// Ниже приведен код, который рисовать объекты

  draw_basket(basket_x,basket_y); 
      draw_ball(ball_x,ball_y);

// Ниже приведен код, который обновляет шары месте,

  ball_x++; 
       if (ball_x>mycanv.width) { 
        ball_x=0; 
      }

// Здесь код обнаружения столкновений

  if (collision(basket_x, basket_y, ball_x, ball_y)) { 
        points -= 1; 
       }

// Вот код для точечной системы

  points+=1

// и давайте придерживаться его в верхнем правом углу.

   var integerpoints=Math.floor(points); // make it into an integer 
      ctx.font="bold 24px sans-serif #fff"; 
       ctx.fillText(integerpoints, mycanv.width-50, 50); 
     } 

     function collision(basket_x, basket_y, ball_x, ball_y) { 
      if(basket_y + 85 < ball_y) { 
       return false; 
      } 
      if (basket_y > ball_y + 91) { 
       return false; 
      } 
      if (basket_x + 80 < ball_x) { 
       return false; 
      } 
      if (basket_x > ball_x + 80) { 
       return false; 
      } 

      return true; 
     }

// Код, чтобы остановить игру, когда мы закончили играть

 function stop_game() { 

     }

// Код для шара

 function draw_ball(x,y) { 
      var c = document.getElementById("c"); 
      var ctx = c.getContext("2d"); 
      ctx.fillStyle = "#fff"; 
      ctx.fillRect(0,0,20,20); 
     }

// Код для корзины

 function draw_basket(x,y) { 
      var basket_img=new Image(); 
      basket_img.src="basket.png"; 
      ctx.drawImage(basket_img,x,y); 

     } 

    start_game() 

    </script> 



</div> 

</article> 
</section>

Here is what the canvas looks like when started

источник

2015-04-24 Anonymous

Вы никогда не вызывая start_game(), чтобы запустить программу, таким образом, программа просто ждет. Вместо этого, в конце вашего <script>, добавьте start_game().

Только один совет: ваша линия mycanv.width = mycanv.width совершенно не нужна, это эквивалент слова var x = 1; x = x;.

источник

2015-04-24 17:35:20

Я думал, что это началось с игры, но это просто называется? - function start_game() { setInterval (game_loop, 50); } –

Да, вы никогда не называете это, вы просто определяете его. –

Я добавил start_game() в самом конце, но он все еще не работает, никаких предложений? –

Создание простой игры, но ничего не показывая на холсте

ответ

Смежные вопросы