Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
459 views
in Technique[技术] by (71.8m points)

javascript - HTML文件不会在浏览器中显示任何内容(HTML File will not show anything in browser)

I have been trying to practice javascript by coding a simple 2D Tetris game, but when I view it in the browser after simply trying to create the game space, nothing shows up in the browser and it is entirely blank.(我一直在尝试通过编写简单的2D Tetris游戏来练习javascript,但是当我在尝试创建游戏空间后在浏览器中查看它时,浏览器中没有任何显示,并且完全空白。)

I've tried everything and I just can't seem to get it to work and I don't know if it's my code or something else.(我已经尝试了一切,但似乎无法正常工作,而且我不知道这是我的代码还是其他东西。) Any help is really appreciated!(任何帮助都非常感谢!) <!DOCTYPE html> <html> <head> <title>Tetris</title> </head> <body> <canvas id="tetris" width="240" height="400"></canvas> <script src="tetris.js"></script> </body> </html> const canvas = document.getElementById('tetris'); const context = canvas.getContext('2d'); context.scale(20,20); context.fillStyle = 'black'; context.fillRect.getContext(0, 0 , context.width, context.height); const matrix = [ [0, 0, 0], [1, 1, 1], [0, 1, 0] ]; function drawMatrix(){ matrix.forEach((row, y) => { row.forEarch((value, x) => { if (value != 0) { context.fillStyle = 'red'; context.fillRect(x, y, 1, 1); } }); }); } drawMatrix(matrix);   ask by jmin22 translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Yor code has mistakes:(您的代码有错误:)

context.fillRect.getContext() is incorrect.(context.fillRect.getContext()不正确。) It should be context.fillRect()(应该是context.fillRect()) Your forEach() loop has typo.(您的forEach()循环有错字。) You are writing forEarch() .(您正在编写forEarch() 。) It should be forEach()(应该是forEach()) const canvas = document.getElementById('tetris'); const context = canvas.getContext('2d'); context.scale(20, 20); context.fillStyle = 'black'; context.fillRect(0, 0, context.width, context.height); const matrix = [ [0, 0, 0], [1, 1, 1], [0, 1, 0] ]; function drawMatrix() { matrix.forEach((row, y) => { row.forEach((value, x) => { if (value != 0) { context.fillStyle = 'red'; context.fillRect(x, y, 1, 1); } }); }); } drawMatrix(matrix); <!DOCTYPE html> <html> <head> <title>Tetris</title> </head> <body> <canvas id="tetris" width="240" height="400"></canvas> <script src="tetris.js"></script> </body> </html>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...