我的糖果粉碎风格 javascript 游戏遇到问题

Question

app.js 该函数通过html 按钮startPage()调用，但是当被调用时，我收到错误：onclickcreateBoard()

未捕获的类型错误：无法读取 null 的属性“appendChild”。

我只是想知道是否有什么办法可以解决这个问题，或者它是否存在致命缺陷，必须从头开始。谢谢

Answer 1

//Initializing global variablesconst grid = document.getElementById("grid");const scoreDisplay = document.getElementById("score");const width = 8;const squares = [];let score = 0;const candyColors = [&nbsp; "url(images/red-candy.png)",&nbsp; "url(images/yellow-candy.png)",&nbsp; "url(images/orange-candy.png)",&nbsp; "url(images/purple-candy.png)",&nbsp; "url(images/green-candy.png)",&nbsp; "url(images/blue-candy.png)",];//Game Home Pagefunction startPage() {&nbsp; var myBut = document.getElementById("but");&nbsp; var button = document.getElementById("button");&nbsp; myBut.removeChild(button);&nbsp; createBoard();}//create your boardfunction createBoard() {&nbsp; for (let i = 0; i < width * width; i++) {&nbsp; &nbsp; const square = document.createElement('div')&nbsp; &nbsp; square.setAttribute("draggable", true)&nbsp; &nbsp; square.setAttribute("id", i)&nbsp; &nbsp; let randomColor = Math.floor(Math.random() * candyColors.length)&nbsp; &nbsp; square.style.backgroundImage = candyColors[randomColor]&nbsp; &nbsp; grid.appendChild(square)&nbsp; &nbsp; squares.push(square)&nbsp; }&nbsp; squares.forEach((square) => square.addEventListener("dragstart", dragStart));&nbsp; squares.forEach((square) => square.addEventListener("dragend", dragEnd));&nbsp; squares.forEach((square) => square.addEventListener("dragover", dragOver));&nbsp; squares.forEach((square) => square.addEventListener("dragenter", dragEnter));&nbsp; squares.forEach((square) => square.addEventListener("drageleave", dragLeave));&nbsp; squares.forEach((square) => square.addEventListener("drop", dragDrop));&nbsp; start_interval();}// Dragging the Blockslet colorBeingDragged;let colorBeingReplaced;let squareIdBeingDragged;let squareIdBeingReplaced;function dragStart() {&nbsp; colorBeingDragged = this.style.backgroundImage;&nbsp; squareIdBeingDragged = parseInt(this.id);&nbsp; // this.style.backgroundImage = ''}function dragOver(e) {&nbsp; e.preventDefault();}function dragEnter(e) {&nbsp; e.preventDefault();}function dragLeave() {&nbsp; this.style.backgroundImage = "";}function dragDrop() {&nbsp; colorBeingReplaced = this.style.backgroundImage;&nbsp; squareIdBeingReplaced = parseInt(this.id);&nbsp; this.style.backgroundImage = colorBeingDragged;&nbsp; squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced;}function dragEnd() {&nbsp; //What is a valid move?&nbsp; let validMoves = [&nbsp; &nbsp; squareIdBeingDragged - 1,&nbsp; &nbsp; squareIdBeingDragged - width,&nbsp; &nbsp; squareIdBeingDragged + 1,&nbsp; &nbsp; squareIdBeingDragged + width,&nbsp; ];&nbsp; let validMove = validMoves.includes(squareIdBeingReplaced);&nbsp; if (squareIdBeingReplaced && validMove) {&nbsp; &nbsp; squareIdBeingReplaced = null;&nbsp; } else if (squareIdBeingReplaced && !validMove) {&nbsp; &nbsp; squares[squareIdBeingReplaced].style.backgroundImage = colorBeingReplaced;&nbsp; &nbsp; squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged;&nbsp; } else&nbsp; &nbsp; squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged;}//drop candies once some have been clearedfunction moveIntoSquareBelow() {&nbsp; for (i = 0; i < 55; i++) {&nbsp; &nbsp; if (squares[i + width].style.backgroundImage === "") {&nbsp; &nbsp; &nbsp; squares[i + width].style.backgroundImage =&nbsp; &nbsp; &nbsp; &nbsp; squares[i].style.backgroundImage;&nbsp; &nbsp; &nbsp; squares[i].style.backgroundImage = "";&nbsp; &nbsp; &nbsp; const firstRow = [0, 1, 2, 3, 4, 5, 6, 7];&nbsp; &nbsp; &nbsp; const isFirstRow = firstRow.includes(i);&nbsp; &nbsp; &nbsp; if (isFirstRow && squares[i].style.backgroundImage === "") {&nbsp; &nbsp; &nbsp; &nbsp; let randomColor = Math.floor(Math.random() * candyColors.length);&nbsp; &nbsp; &nbsp; &nbsp; squares[i].style.backgroundImage = candyColors[randomColor];&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }}///Checking for Matches//for row of Fourfunction checkRowForFour() {&nbsp; for (i = 0; i < 60; i++) {&nbsp; &nbsp; let rowOfFour = [i, i + 1, i + 2, i + 3];&nbsp; &nbsp; let decidedColor = squares[i].style.backgroundImage;&nbsp; &nbsp; const isBlank = squares[i].style.backgroundImage === "";&nbsp; &nbsp; const notValid = [&nbsp; &nbsp; &nbsp; 5,&nbsp; &nbsp; &nbsp; 6,&nbsp; &nbsp; &nbsp; 7,&nbsp; &nbsp; &nbsp; 13,&nbsp; &nbsp; &nbsp; 14,&nbsp; &nbsp; &nbsp; 15,&nbsp; &nbsp; &nbsp; 21,&nbsp; &nbsp; &nbsp; 22,&nbsp; &nbsp; &nbsp; 23,&nbsp; &nbsp; &nbsp; 29,&nbsp; &nbsp; &nbsp; 30,&nbsp; &nbsp; &nbsp; 31,&nbsp; &nbsp; &nbsp; 37,&nbsp; &nbsp; &nbsp; 38,&nbsp; &nbsp; &nbsp; 39,&nbsp; &nbsp; &nbsp; 45,&nbsp; &nbsp; &nbsp; 46,&nbsp; &nbsp; &nbsp; 47,&nbsp; &nbsp; &nbsp; 53,&nbsp; &nbsp; &nbsp; 54,&nbsp; &nbsp; &nbsp; 55,&nbsp; &nbsp; ];&nbsp; &nbsp; if (notValid.includes(i)) continue;&nbsp; &nbsp; if (&nbsp; &nbsp; &nbsp; rowOfFour.every(&nbsp; &nbsp; &nbsp; &nbsp; (index) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; squares[index].style.backgroundImage === decidedColor && !isBlank&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; score += 4;&nbsp; &nbsp; &nbsp; scoreDisplay.innerHTML = score;&nbsp; &nbsp; &nbsp; rowOfFour.forEach((index) => {&nbsp; &nbsp; &nbsp; &nbsp; squares[index].style.backgroundImage = "";&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }}//for column of Fourfunction checkColumnForFour() {&nbsp; for (i = 0; i < 39; i++) {&nbsp; &nbsp; let columnOfFour = [i, i + width, i + width * 2, i + width * 3];&nbsp; &nbsp; let decidedColor = squares[i].style.backgroundImage;&nbsp; &nbsp; const isBlank = squares[i].style.backgroundImage === "";&nbsp; &nbsp; if (&nbsp; &nbsp; &nbsp; columnOfFour.every(&nbsp; &nbsp; &nbsp; &nbsp; (index) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; squares[index].style.backgroundImage === decidedColor && !isBlank&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; score += 4;&nbsp; &nbsp; &nbsp; scoreDisplay.innerHTML = score;&nbsp; &nbsp; &nbsp; columnOfFour.forEach((index) => {&nbsp; &nbsp; &nbsp; &nbsp; squares[index].style.backgroundImage = "";&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }}//for row of Threefunction checkRowForThree() {&nbsp; for (i = 0; i < 61; i++) {&nbsp; &nbsp; let rowOfThree = [i, i + 1, i + 2];&nbsp; &nbsp; let decidedColor = squares[i].style.backgroundImage;&nbsp; &nbsp; const isBlank = squares[i].style.backgroundImage === "";&nbsp; &nbsp; const notValid = [6, 7, 14, 15, 22, 23, 30, 31, 38, 39, 46, 47, 54, 55];&nbsp; &nbsp; if (notValid.includes(i)) continue;&nbsp; &nbsp; if (&nbsp; &nbsp; &nbsp; rowOfThree.every(&nbsp; &nbsp; &nbsp; &nbsp; (index) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; squares[index].style.backgroundImage === decidedColor && !isBlank&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; score += 3;&nbsp; &nbsp; &nbsp; scoreDisplay.innerHTML = score;&nbsp; &nbsp; &nbsp; rowOfThree.forEach((index) => {&nbsp; &nbsp; &nbsp; &nbsp; squares[index].style.backgroundImage = "";&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }}//for column of Threefunction checkColumnForThree() {&nbsp; for (i = 0; i < 47; i++) {&nbsp; &nbsp; let columnOfThree = [i, i + width, i + width * 2];&nbsp; &nbsp; let decidedColor = squares[i].style.backgroundImage;&nbsp; &nbsp; const isBlank = squares[i].style.backgroundImage === "";&nbsp; &nbsp; if (&nbsp; &nbsp; &nbsp; columnOfThree.every(&nbsp; &nbsp; &nbsp; &nbsp; (index) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; squares[index].style.backgroundImage === decidedColor && !isBlank&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; score += 3;&nbsp; &nbsp; &nbsp; scoreDisplay.innerHTML = score;&nbsp; &nbsp; &nbsp; columnOfThree.forEach((index) => {&nbsp; &nbsp; &nbsp; &nbsp; squares[index].style.backgroundImage = "";&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }}// Checks carried out indefintely - Add Butotn to clear interval for best practisefunction start_interval(){&nbsp; &nbsp; window.setInterval(function () {&nbsp; &nbsp; &nbsp; checkRowForFour();&nbsp; &nbsp; &nbsp; checkColumnForFour();&nbsp; &nbsp; &nbsp; checkRowForThree();&nbsp; &nbsp; &nbsp; checkColumnForThree();&nbsp; &nbsp; &nbsp; moveIntoSquareBelow();&nbsp; &nbsp; }, 100);}

Answer 2

该错误Uncaught TypeError: Cannot read property 'appendChild' of null表明您正在尝试调用appendChildnull 变量。错误发生在这一行：grid.appendChild(square)grid确保在初始化时没有为其分配 null 。const&nbsp;grid&nbsp;=&nbsp;document.getElementById("grid");

Answer 3

defer向脚本标记添加一个属性（async也可以是一个属性）。&nbsp;<script async defer src="app.js" charset="utf-8"></script>这将确保脚本仅在页面加载并且网格实际存在后执行。截至目前，它在 DOM 完全加载之前立即执行。