使用 HTML canvas 时出错 - 未捕获的类型错误：无法读取未定义的属性“开始”

Question

我已经为基于 html canvas 的游戏编写了代码。 当我运行它时，我没有将 canvas 游戏加载到 canvas 上。 相反，我在控制台中收到以下错误：-

未捕获的类型错误：无法读取未定义的属性“开始”

我在下面给出了我的代码。 有人可以解释一下可能是什么原因吗？

 <script> var context; var canvas; var ctx; var speed = urlParam('speed'); if (speed == null) speed = 40 $('#speed').val(speed); calculateBubble(parseInt(speed)); var redSBLatter; var redSBFormer; var redSBWindowFormer; var redSBWindowLatter; var blueSB; var blueSWindow; function startGame(bubbleLength, windowLength) { redSBWindowFormer = new slidingWindow(60, windowLength * 2, "black", 5, 120); redSBWindowLatter = new slidingWindow(60, 40, "black", 5, 80); redSBFormer = new component(30, bubbleLength, "red", 20, 120); redSBLatter = new component(30, 30, "red", 20, 90); blueSWindow = new slidingWindow(60, 70, "black", 120, 10); blueSB = new component(20, 40, "blue", 140, 20); myGameArea.start(); } var myGameArea = { start: function () { canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); //myCanvas.width = "480"; //myCanvas.height = "480"; document.body.insertBefore(canvas, document.body.childNodes[0]); interval = setInterval(updateGameArea, 20); }, clear: function () { context.clearRect(0, 0, canvas.width, canvas.height); } } function urlParam(name) { var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); if (results == null) { return null; } else { return decodeURI(results[1]) || 0; } } function component(width, height, color, x, y) { this.width = width; this.height = height; this.speedX = 0; this.speedY = 0; this.x = x; this.y = y; this.update = function () { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } this.newPos = function () { this.x += this.speedX; this.y += this.speedY; } } function slidingWindow(width, height, color, x, y) { this.width = width; this.height = height; this.speedX = 0; this.speedY = 0; this.x = x; this.y = y; this.update = function () { ctx = myGameArea.context; ctx.beginPath(); //ctx.globalAlpha = 0.2; ctx.lineWidth = "3"; ctx.strokeStyle = color; ctx.rect(this.x, this.y, this.width, this.height); ctx.stroke(); } this.newPos = function () { this.x += this.speedX; this.y += this.speedY; } } function updateGameArea() { myGameArea.clear(); redSBLatter.newPos(); redSBLatter.update(); redSBFormer.newPos(); redSBFormer.update(); redSBWindowLatter.newPos(); redSBWindowLatter.update(); redSBWindowFormer.newPos(); redSBWindowFormer.update(); blueSB.newPos(); blueSB.update(); blueSWindow.newPos(); blueSWindow.update(); } function redmoveup() { redSBLatter.speedY = -1; redSBFormer.speedY = -1; redSBWindowLatter.speedY = -1; redSBWindowFormer.speedY = -1; } function bluemoveup() { blueSB.speedY = -1; blueSWindow.speedY = -1; } function redmovedown() { redSBLatter.speedY = 1; redSBFormer.speedY = 1; redSBWindowLatter.speedY = 1; redSBWindowFormer.speedY = 1; } function bluemovedown() { blueSB.speedY = 1; blueSWindow.speedY = 1; } function redmoveleft() { redSBLatter.speedX = -1; redSBFormer.speedX = -1; redSBWindowLatter.speedX = -1; redSBWindowFormer.speedX = -1; } function bluemoveleft() { blueSB.speedX = -1; blueSWindow.speedX = -1; } function redmoveright() { redSBLatter.speedX = 1; redSBFormer.speedX = 1; redSBWindowLatter.speedX = 1; redSBWindowFormer.speedX = 1; } function bluemoveright() { blueSB.speedX = 1; blueSWindow.speedX = 1; } function clearmove() { redSBLatter.speedX = 0; redSBLatter.speedY = 0; redSBFormer.speedX = 0; redSBFormer.speedY = 0; redSBWindowLatter.speedX = 0; redSBWindowLatter.speedY = 0; redSBWindowFormer.speedX = 0; redSBWindowFormer.speedY = 0; blueSB.speedX = 0; blueSB.speedY = 0; blueSWindow.speedX = 0; blueSWindow.speedY = 0; } /** function calculateBubble() { var kmh = document.getElementById("speed").value; if (kmh <= 0) { var bubble = 5.84; var window = bubble * 5; document.getElementById("bubble").innerHTML = bubble; document.getElementById("window").innerHTML = window; return startGame(20, 20); } else { //var v = getMph(kmh); var v = kmh / 1.6093; var feet = 2.2 * v + ((v * v) / 20); var bubblemeters = feet / 3.28; var bubble = parseFloat(bubblemeters.toFixed(2)); document.getElementById("bubble").innerHTML = bubble; calculateWindow(bubble); return bubblemeters; } }**/ function calculateBubble(kmh) { var v = kmh / 1.6093; var feet = 2.2 * v + ((v * v) / 20) var meters = feet / 3.28; $('#sBubble').empty(); $('#sBubble').append("Safety bubble: " + meters.toFixed(2) + " m"); calculateWindow(meters); } function calculateWindow(bubble) { var windowMeters = bubble + 5; var window = parseFloat(windowMeters.toFixed()); document.getElementById("window").innerHTML = window; startGame(bubble, window); } </script>

 <style type="text/css"> #canvas { border: 1px solid #d3d3d3; background-color: #f1f1f1; }.grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; }.grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; } </style>

 <.DOCTYPE html> <html> <head> <title>Staging Area Simulation</title> <meta charset="UTF-8"> <script src="public_html/jquery:js"></script> </head> <.--<body onload="startGame()">--> <body> <div class="grid-container"> <div> <canvas id="canvas" width="480" height="480"> </canvas> </div> <div> <h3>Enter Parameters</h3> <p id="sBubble">Safety bubble: 0:0 m</p> Sliding Window:<p id="window"></p> <form method="get" id="form"> speed. <input type="text" id="speed" name="speed" /> <br /><br /> Vehicle Length: <input type="text" id="vLength" name="vLength" value="3.84m" disabled /> <br /><br /> Vehicle Width: <input type="text" id="vWidth" name="vWidth" value="1;74m" disabled /> <br /><br /> <button name="data" type="submit">Calculate</button> </form> </div> <div style="text-align:center;width:480px;"> <h3> Red Controllers </h3> <button onmousedown="redmoveup()" onmouseup="clearmove()">UP</button><br><br> <button onmousedown="redmoveleft()" onmouseup="clearmove()">LEFT</button> <button onmousedown="redmoveright()" onmouseup="clearmove()">RIGHT</button><br><br> <button onmousedown="redmovedown()" onmouseup="clearmove()">DOWN</button> </div> <div style="text-align:center;width:480px;"> <h3> Blue Controllers</h3> <button onmousedown="bluemoveup()" onmouseup="clearmove()">UP</button><br><br> <button onmousedown="bluemoveleft()" onmouseup="clearmove()">LEFT</button> <button onmousedown="bluemoveright()" onmouseup="clearmove()">RIGHT</button><br><br> <button onmousedown="bluemovedown()" onmouseup="clearmove()">DOWN</button> </div> </div> </body> </html>