2014-12-10 5 views
-3

Я пытаюсь сделать своего рода физическую программу в javascript, но когда ее над ней хочу перезагрузить. Я хочу сделать это без перезагрузки страницы (если это возможно ..). Это план, чтобы получить код javascript в кнопке, чтобы перезагрузить его.Как я могу сбросить программу Javascript?

вот моя попытка на сайте: tap.96.lt

Я надеюсь, что я достаточно ясно, спасибо за помощь!

код:

<html> 
<head> 

    <style> 
#my_canvas { 
max-width: 98%; 
max-height: 98%; 
height: auto; 
width: auto; 
margin:auto; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
background-color:white; 
border: black 3px solid; 
} 
#center { 
max-width: 66.5%; 
max-height: 95%; 
height: auto; 
width: auto; 
margin:auto; 
background:; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
} 
Body { 
background-color: slategrey; 
}  
    </style> 

</head> 

<body> 

    <script type="text/javascript"> 

function Canvas(){ 
var ctx = document.getElementById('my_canvas').getContext('2d'); 
var snelheid = 20; 
var balpic = new Image(); 
var grondpic = new Image(); 
balpic.src = "bal.png"; 
grondpic.src = "grond.png"; 

function reset() { 

} 

function blok(){ 
    this.h = 100, this.w = 100, this.x = (ctx.canvas.width*0.5)-(this.w*0.5), this.y =  (ctx.canvas.height*0.2)-(this.h*0.5), this.color = "Blue", this.dir = "down", this.valsnel  = 0, this.tijd = 0, this.afstand = 0, this.src = balpic; 
    this.draw = function() { 

     //plaats berekenen 
      // kijken of blok de grond raakt 
      if(grond.y-9<=this.y+this.h){this.dir = "up";}; 
      // kijken of blok niet uit scherm is 
      if(this.y<=0){this.dir = "down";}; 
      // valsnelheid mag niet negatief zijn 
      if(this.valsnel<=0){this.dir="down"} 
      // blok mag niet ver onder de grond komen 
      if(grond.y+15<=this.y+this.h){this.dir = "stil";}; 

     //valsnelheid berekenen 
      // tijd berekenen 
      if(this.dir=="down"){this.tijd = this.tijd+0.2;}; 
      if(this.dir=="up"){this.tijd = this.tijd-0.5}; 
      if(this.dir=="stil"){this.tijd = 0}; 

     this.valsnel = (9.81*this.tijd)+0.0000000001 

     if(this.dir=="up"){this.y=this.y-this.valsnel}; 
     if(this.dir=="down"){this.y=this.y+this.valsnel}; 
     if(this.dir=="stil"){this.y=this.y} 

     //tekenen 
     //ctx.fillStyle = this.color; 
     //ctx.fillRect(this.x,this.y,this.w,this.h); 

     ctx.drawImage(this.src,this.x,this.y,this.w,this.h); 

     //alert("y is "+ this.y +" en tijd is "+ this.tijd +" en valsnelheid is "+  this.valsnel +" en de afstand is "+ this.afstand) 
    } 
} 

function grond(){ 
    this.w = ctx.canvas.width, this.x = 0, this.y = ctx.canvas.height*0.8, this.h =  ctx.canvas.height*0.2, this.color = "black", this.src = grondpic; 
    this.draw = function() { 
     //tekenen 
     //ctx.fillStyle = this.color; 
     //ctx.fillRect(this.x,this.y,this.w,this.h); 

     ctx.drawImage(this.src,this.x,this.y,this.w,this.h); 
    } 
} 

// alle functies 
var blok = new blok(); 
var grond = new grond(); 

function draw() { 
    ctx.save(); 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 


    //draw 
    grond.draw(); 
    blok.draw(); 
    //draw 


    ctx.restore(); 
} 

var animateInterval = setInterval(draw,snelheid); 


document.addEventListener('mousemove', function(event){ 
    var w = window, 
    d = document, 
    e = d.documentElement, 
    g = d.getElementsByTagName('body')[0], 
    x = w.innerWidth || e.clientWidth 
    y = w.innerHeight|| e.clientHeight 
    var mouseX = event.clientX - ((x-ctx.canvas.width)*0.5) 
    var mouseY = event.clientY - ((y-ctx.canvas.height)*0.5) 
    var status = document.getElementById('status'); 


    status.innerHTML = mouseX+" | "+mouseY+" screen width "+x+" "+y; 
}); 
} 

window.addEventListener('load', function(event) { 
Canvas(); 
}); 
    </script> 
    <h2 id="status"></h2> 
    <input id="clickme" type="button" value="clickme" onclick="canvas()" /> 
    <div id="center"> 
    <canvas id="my_canvas" width="700" height="1000"> 
     Please get a new browser to watch canvas! 
    </canvas> 
    </div> 
</body> 
</html> 
+2

Нет, не достаточно ясно. Там действительно нет причин для «перезагрузки» JavaScript. Это не имеет большого смысла. – Pointy

+0

Было бы полезно опубликовать больше вашего кода, чтобы отличные пользователи здесь могли помочь дать предложения. – Chrismas007

+0

Я хочу сбросить javascript для воспроизведения моего холста – Thomas

ответ

1
  1. Очистить интервал, который рисует на холсте.
  2. Повторно инициировать чертежи.

    Для этих 2 шагов введите свою функцию сброса с этими строками.

    function reset() { 
        clearInterval(animateInterval); 
        Canvas(); 
    } 
    
  3. Вместо определения события OnClick внутри кнопки HTML, определить событие OnClick внутри функции Canvas(). В противном случае вы не можете вызвать метод reset() внутри функции canvas.

    Для этого шага после функции сброса добавьте эту строку.

    document.getElementById('clickme').onclick = reset; 
    

    Затем удалить OnClick определение события от кнопки HTML

    <input id="clickme" type="button" value="clickme"> 
    
Смежные вопросы