个人中心
gpt4 book ai didi

javascript - 需要帮助，JavaScript 和 HTML 未显示在资源管理器上

转载 作者：行者123 更新时间：2023-11-28 04:16:30 25 4
gpt4 key购买 nike

我尝试使用“The Coding Train” channel 制作的代码来制作贪吃蛇游戏。但是，我没有 p5，我尝试使用 <script> 在 HTML 文件上添加所有内容。和</script> 。我调用了原始代码中不存在的函数...

谁能帮助我并告诉我我做错了什么......？我尝试了很多东西，但页面总是空的......

谢谢! :)

<!DOCTYPE html>
<html>
	<head>
		<title>Snake Game</title>
	</head>
	<body>
  		<script type="text/javascript">
			var s;
			var scl = 20;
			var food;

			function setup() {
				createCanvas(600,600);
				s = new Snake();
				frameRate(10);
				pickLocation();
			}
			
			function pickLocation() {
				var cols = floor(width/scl);
				var rows = floor(height/scl);
				food = createVector (floor (random (cols)), floor (random (rows)));
				food.mult (scl);
			}
			
			function draw() {
				background (51);
				
				if (s.eat(food)) {
					pickLocation();
				}
				
				s.death();
				s.update();
				s.show();

				fill(255,0,100);
				rect(food.x, food.y, scl, scl);
			}
			
			function keyPressed() {
				if (keyCode === UP_ARROW) {
					s.dir (0,-1);
				} else if (keyCode === DOWN_ARROW) {
					s.dir (0,1);
				} else if (keyCode === 	RIGHT_ARROW) {
					s.dir (1,0);
				} else if (keyCode === LEFT_ARROW) {
					s.dir (-1,0);
				}
			}
			
			function Snake() {
				this.x = 0;
				this.y = 0;
				this.xspeed = 1;
				this.yspeed = 0;
				this.total = 0;
				this.tail = [];

				this.eat = function(pos) {
					var d = dist(this.x, this.y, pos.x, pos.y);
					if (d<1) {
						this.total++;
						return true;
					} else {
						return false;
					}
				}
		
				this.dir = function (x, y) {
					this.xspeed = x;
					this.yspeed = y;
				}
				
				this.death = function() {
					for (var i = 0; i < this.tail.length; i++) {
						var pos = this.tail[i];
						var d = dist (this.x, this.y, pos.x, pos.y);
						if (d<1) {
							this.total = 0;
							this.tail = [];
						}
					}
				}

				this.update = function() {
					for (var i = 0; i < this.tail.length -1 ; i++) {
						this.tail[i] = this.tail[i+1];
					}
					if (this.total >= 1) {
						this.tail[this.total-1] = createVector(this.x, this.y);
					}
			
					this.x = this.x + this.xspeed * scl;
					this.y = this.y + this.yspeed * scl;

					this.x = constrain(this.x, 0, width - scl);
					this.y = constrain(this.y, 0, height - scl);
				}
			
				this.show = function() {
					fill(255);
					for (var i = 0; i < this.tail.length; i++) {
						rect(this.tail[i].x; this.tail[i].y, scl, scl);
					}
					rect(this.x, this.y, scl, scl);
				}

			}

			setup();
			pickLocation();
			draw();
			keyPressed();
			Snake();
		</script>
	</body>
<html>

最佳答案

您的代码中有一个小拼写错误:

rect(this.tail[i].x; this.tail[i].y, scl, scl);

将第一个 ; 替换为 ,。

rect(this.tail[i].x, this.tail[i].y, scl, scl);

<!DOCTYPE html>
<html>

<head>
    <title>Snake Game</title>
</head>

<body>
    <script type="text/javascript">
        var s;
        var scl = 20;
        var food;

        function setup() {
            createCanvas(600, 600);
            s = new Snake();
            frameRate(10);
            pickLocation();
        }

        function pickLocation() {
            var cols = floor(width / scl);
            var rows = floor(height / scl);
            food = createVector(floor(random(cols)), floor(random(rows)));
            food.mult(scl);
        }

        function draw() {
            background(51);

            if (s.eat(food)) {
                pickLocation();
            }

            s.death();
            s.update();
            s.show();

            fill(255, 0, 100);
            rect(food.x, food.y, scl, scl);
        }

        function keyPressed() {
            if (keyCode === UP_ARROW) {
                s.dir(0, -1);
            } else if (keyCode === DOWN_ARROW) {
                s.dir(0, 1);
            } else if (keyCode === RIGHT_ARROW) {
                s.dir(1, 0);
            } else if (keyCode === LEFT_ARROW) {
                s.dir(-1, 0);
            }
        }

        function Snake() {
            this.x = 0;
            this.y = 0;
            this.xspeed = 1;
            this.yspeed = 0;
            this.total = 0;
            this.tail = [];

            this.eat = function (pos) {
                var d = dist(this.x, this.y, pos.x, pos.y);
                if (d < 1) {
                    this.total++;
                    return true;
                } else {
                    return false;
                }
            }

            this.dir = function (x, y) {
                this.xspeed = x;
                this.yspeed = y;
            }

            this.death = function () {
                for (var i = 0; i < this.tail.length; i++) {
                    var pos = this.tail[i];
                    var d = dist(this.x, this.y, pos.x, pos.y);
                    if (d < 1) {
                        this.total = 0;
                        this.tail = [];
                    }
                }
            }

            this.update = function () {
                for (var i = 0; i < this.tail.length - 1; i++) {
                    this.tail[i] = this.tail[i + 1];
                }
                if (this.total >= 1) {
                    this.tail[this.total - 1] = createVector(this.x, this.y);
                }

                this.x = this.x + this.xspeed * scl;
                this.y = this.y + this.yspeed * scl;

                this.x = constrain(this.x, 0, width - scl);
                this.y = constrain(this.y, 0, height - scl);
            }

            this.show = function () {
                fill(255);
                for (var i = 0; i < this.tail.length; i++) {
                    rect(this.tail[i].x, this.tail[i].y, scl, scl);
                }
                rect(this.x, this.y, scl, scl);
            }

        }

        setup();
        pickLocation();
        draw();
        keyPressed();
        Snake();

    </script>
</body>
<html>

关于javascript - 需要帮助，JavaScript 和 HTML 未显示在资源管理器上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45803417/

25 4 0
文章推荐： javascript - style="background-image 不工作，但 img 正在工作
文章推荐： javascript - 如何同时打印多个网页？
文章推荐： javascript - 使用带有 getDay() 方法的 switch 语句？
文章推荐： javascript - LazyLoad 不隐藏占位符 img Rails 5
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com