如何重置我的 Javascript 程序

How can I reset my Javascript program?

本文关键字：程序 Javascript 我的 何重置      更新时间：2023-09-26

我正在尝试用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>

  1. 清除在画布上绘制的间隔。

  2. 重新启动图形。

    对于这两个步骤，用这些行填充您的重置功能。

    function reset() {
    clearInterval(animateInterval);
    Canvas();
}

  3. 而是在按钮 html 中定义 onclick 事件，而是在 Canvas（） 函数中定义 onclick 事件。否则，您无法在画布函数中调用 reset（） 方法。

    对于此步骤，在重置功能之后添加此行。

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

    然后从按钮 html 中删除 onclick 事件定义

    <input id="clickme" type="button" value="clickme">
相关文章：