JavaScriptのあるページの特定の部分を印刷する方法

Question

私のページの一部を印刷しようとしましたが、問題はHTMLを表示するだけでJavaScriptを表示しないことです。どうしてか分かりません。印刷では、JavaScriptで実装されたものは表示されません

EDIT：コードを削除し、リンクに完全な例を示しました。 これは私が意味するものの例です。ゲームを作成するために使用されたjavascriptは印刷物に表示されません。

var myGamePiece; 
 
var myObstacles = []; 
 
var myScore; 
 

 
function startGame() { 
 
    myGamePiece = new component(30, 30, "red", 10, 120); 
 
    myGamePiece.gravity = 0.05; 
 
    myScore = new component("30px", "Consolas", "black", 280, 40, "text"); 
 
    myGameArea.start(); 
 
} 
 

 
var myGameArea = { 
 
    canvas: document.createElement("canvas"), 
 
    start: function() { 
 
    this.canvas.width = 480; 
 
    this.canvas.height = 270; 
 
    this.context = this.canvas.getContext("2d"); 
 
    document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
 
    this.frameNo = 0; 
 
    this.interval = setInterval(updateGameArea, 20); 
 
    }, 
 
    clear: function() { 
 
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 
    } 
 
} 
 

 
function component(width, height, color, x, y, type) { 
 
    this.type = type; 
 
    this.score = 0; 
 
    this.width = width; 
 
    this.height = height; 
 
    this.speedX = 0; 
 
    this.speedY = 0; 
 
    this.x = x; 
 
    this.y = y; 
 
    this.gravity = 0; 
 
    this.gravitySpeed = 0; 
 
    this.update = function() { 
 
    ctx = myGameArea.context; 
 
    if (this.type == "text") { 
 
     ctx.font = this.width + " " + this.height; 
 
     ctx.fillStyle = color; 
 
     ctx.fillText(this.text, this.x, this.y); 
 
    } else { 
 
     ctx.fillStyle = color; 
 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
 
    } 
 
    } 
 
    this.newPos = function() { 
 
    this.gravitySpeed += this.gravity; 
 
    this.x += this.speedX; 
 
    this.y += this.speedY + this.gravitySpeed; 
 
    this.hitBottom(); 
 
    } 
 
    this.hitBottom = function() { 
 
    var rockbottom = myGameArea.canvas.height - this.height; 
 
    if (this.y > rockbottom) { 
 
     this.y = rockbottom; 
 
     this.gravitySpeed = 0; 
 
    } 
 
    } 
 
    this.crashWith = function(otherobj) { 
 
    var myleft = this.x; 
 
    var myright = this.x + (this.width); 
 
    var mytop = this.y; 
 
    var mybottom = this.y + (this.height); 
 
    var otherleft = otherobj.x; 
 
    var otherright = otherobj.x + (otherobj.width); 
 
    var othertop = otherobj.y; 
 
    var otherbottom = otherobj.y + (otherobj.height); 
 
    var crash = true; 
 
    if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) { 
 
     crash = false; 
 
    } 
 
    return crash; 
 
    } 
 
} 
 

 
function updateGameArea() { 
 
    var x, height, gap, minHeight, maxHeight, minGap, maxGap; 
 
    for (i = 0; i < myObstacles.length; i += 1) { 
 
    if (myGamePiece.crashWith(myObstacles[i])) { 
 
     return; 
 
    } 
 
    } 
 
    myGameArea.clear(); 
 
    myGameArea.frameNo += 1; 
 
    if (myGameArea.frameNo == 1 || everyinterval(150)) { 
 
    x = myGameArea.canvas.width; 
 
    minHeight = 20; 
 
    maxHeight = 200; 
 
    height = Math.floor(Math.random() * (maxHeight - minHeight + 1) + minHeight); 
 
    minGap = 50; 
 
    maxGap = 200; 
 
    gap = Math.floor(Math.random() * (maxGap - minGap + 1) + minGap); 
 
    myObstacles.push(new component(10, height, "green", x, 0)); 
 
    myObstacles.push(new component(10, x - height - gap, "green", x, height + gap)); 
 
    } 
 
    for (i = 0; i < myObstacles.length; i += 1) { 
 
    myObstacles[i].x += -1; 
 
    myObstacles[i].update(); 
 
    } 
 
    myScore.text = "SCORE: " + myGameArea.frameNo; 
 
    myScore.update(); 
 
    myGamePiece.newPos(); 
 
    myGamePiece.update(); 
 
} 
 

 
function everyinterval(n) { 
 
    if ((myGameArea.frameNo/n) % 1 == 0) { 
 
    return true; 
 
    } 
 
    return false; 
 
} 
 

 
function accelerate(n) { 
 
    myGamePiece.gravity = n; 
 
} 
 

 
function myFunction() { 
 
    var prtContent = document.getElementById("page"); 
 
    var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0'); 
 
    WinPrint.document.write(prtContent.innerHTML); 
 
    WinPrint.document.close(); 
 
    WinPrint.focus(); 
 
    WinPrint.print(); 
 
    WinPrint.close(); 
 
} 
 

 
window.onload=startGame;

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
<div id="page"> 
 
    <button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button> 
 
    <p>Use the ACCELERATE button to stay in the air</p> 
 
    <p>How long can you stay alive?</p> 
 
    <input type="button" onClick="myFunction()" class="button" value="Print this page"> 
 
</div>

Answer 1

私は[MCVE]作成してくださいこのようにコードを試してみましたが、

<div id="page">Test test test test test test</div> 
<script> 
function myFunction() 
{ 
var prtContent = document.getElementById("page"); 
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0'); 
WinPrint.document.write(prtContent.innerHTML); 
WinPrint.document.close(); 
WinPrint.focus(); 
WinPrint.print(); 
WinPrint.close(); 

} 
myFunction(); 
</script>