蛇head/body没有出现
Snake head/body doesnt appear
我正在尝试学习 HTML/JS/CSS 编程,并尝试按照教程制作游戏“贪吃蛇”。
我正处于想画蛇头的阶段,已经写了代码,但是好像没有出现。我已经坐了最后 30 分钟,试图找出我的代码为何不起作用的原因。我需要帮助找出错误,这样我才能在黑板上画出“头”
let speed = 2
let render = 0
const board = document.getElementById("board")
function main(time){
window.requestAnimationFrame(main)
if ((time - render) < 1/speed) return //"return" works here as "break" in python
render = time
update()
draw()
}
main();
//snake
const body = [{x: 11, y:11}]
function sUpdate(){
}
function sDraw(board){
body.forEach(part => {
// basically puts it on the board using x,y
const sElement = document.createElement("div")
sElement.style.gridRowStart = part.x
sElement.style.gridColumnStart = part.y
sElement.classList.add("snake") //adds the css
board.append(sElement)
})
}
function update() {
}
function draw(board) {
sDraw(board);
}
/* board */
body {
height: 100vh;
width: 100vw;
/* all things get the same size (flex) and location (justify-content for row and align itmes for colomn) */
display: flex;
justify-content: center;
align-items: center;
margin:0;
}
#board {
background-color: #000;
/* rezises so it is always a square */
width: 90vmin;
height: 90vmin;
display: grid;
grid-template-rows: repeat(21,1fr);
grid-template-columns: repeat(21,1fr);
}
.snake{
background-color: #fff;
border: .25vmin solid black;
}
.food{
background-color: #ff0000;
border: .25vmin solid black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Snake</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="board"></div>
<script src="script.js"></script>
</body>
</html>
第一个问题是您在初始化之前尝试访问 const body = [{x: 11, y:11}]
,接下来您在调用 draw()
时不带任何参数,这是解决问题的方法
let speed = 2
let render = 0
const board = document.getElementById("board");
const body = [{x: 11, y:11}]
function main(time){
window.requestAnimationFrame(main)
if ((time - render) < 1/speed) return //"return" works here as "break" in python
render = time
update()
draw(board)
}
main();
//snake
function sUpdate(){
}
function sDraw(board){
body.forEach(part => {
// basically puts it on the board using x,y
const sElement = document.createElement("div")
sElement.style.gridRowStart = part.x
sElement.style.gridColumnStart = part.y
sElement.classList.add("snake") //adds the css
board.append(sElement)
})
}
function update() {
}
function draw(board) {
sDraw(board);
}
我正在尝试学习 HTML/JS/CSS 编程,并尝试按照教程制作游戏“贪吃蛇”。 我正处于想画蛇头的阶段,已经写了代码,但是好像没有出现。我已经坐了最后 30 分钟,试图找出我的代码为何不起作用的原因。我需要帮助找出错误,这样我才能在黑板上画出“头”
let speed = 2
let render = 0
const board = document.getElementById("board")
function main(time){
window.requestAnimationFrame(main)
if ((time - render) < 1/speed) return //"return" works here as "break" in python
render = time
update()
draw()
}
main();
//snake
const body = [{x: 11, y:11}]
function sUpdate(){
}
function sDraw(board){
body.forEach(part => {
// basically puts it on the board using x,y
const sElement = document.createElement("div")
sElement.style.gridRowStart = part.x
sElement.style.gridColumnStart = part.y
sElement.classList.add("snake") //adds the css
board.append(sElement)
})
}
function update() {
}
function draw(board) {
sDraw(board);
}
/* board */
body {
height: 100vh;
width: 100vw;
/* all things get the same size (flex) and location (justify-content for row and align itmes for colomn) */
display: flex;
justify-content: center;
align-items: center;
margin:0;
}
#board {
background-color: #000;
/* rezises so it is always a square */
width: 90vmin;
height: 90vmin;
display: grid;
grid-template-rows: repeat(21,1fr);
grid-template-columns: repeat(21,1fr);
}
.snake{
background-color: #fff;
border: .25vmin solid black;
}
.food{
background-color: #ff0000;
border: .25vmin solid black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Snake</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="board"></div>
<script src="script.js"></script>
</body>
</html>
第一个问题是您在初始化之前尝试访问 const body = [{x: 11, y:11}]
,接下来您在调用 draw()
时不带任何参数,这是解决问题的方法
let speed = 2
let render = 0
const board = document.getElementById("board");
const body = [{x: 11, y:11}]
function main(time){
window.requestAnimationFrame(main)
if ((time - render) < 1/speed) return //"return" works here as "break" in python
render = time
update()
draw(board)
}
main();
//snake
function sUpdate(){
}
function sDraw(board){
body.forEach(part => {
// basically puts it on the board using x,y
const sElement = document.createElement("div")
sElement.style.gridRowStart = part.x
sElement.style.gridColumnStart = part.y
sElement.classList.add("snake") //adds the css
board.append(sElement)
})
}
function update() {
}
function draw(board) {
sDraw(board);
}