javascript - 我的飞鸟游戏的 Javascript 代码未按预期显示角色
问题描述
我是 Javascript 的新手,我正在尝试用普通的 Javascript 创建飞扬的鸟。我正在关注一个教程,当我到达这一点时,我的代码无法正常工作并且没有显示字符(黄色方块),因为它显然是按照教程要做的。我希望有人能够帮助我解决我的问题,非常感谢。
这是我的 HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flappy Bird</title>
<style>
canvas {
border: 3px solid #000000;
display: block;
margin: 0 auto;
background-color: lightblue;
}
</style>
</head>
<body>
<canvas id="canvas" width="320" height="480"></canvas>
<script src="game.js"></script>
</body>
</html>
这是我的 Javascript 代码:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
class Player {
constructor(x, y) {
this.x = x;
this.y = y;
this.w = 40;
this.h = 40;
this.ySpeed = 3;
}
show() {
ctx.fillStyle = "yellow";
ctx.fillRect(this.x, this.y, this.w, this.h);
}
update() {
this.y += this.ySpeed;
this.ySpeed += gravity;
}
}
var p;
var gravity = 0.1;
window.onload = function () {
start();
setInterval(update, 10);
};
function start() {
p = new Player(400, 400);
}
function update() {
canvas.width = canvas.width;
//player
p.show();
p.update();
}
解决方案
你的画布大小只有 320px,但你试图在 400px 的位置绘制一个正方形。
尝试:
p = new Player(0, 400)
有用
推荐阅读
- c# - 动态创建的面板的访问控制
- java - Apache Storm 1.1.0 未运行并给出无法从客户端 sessionid 读取附加数据
- javascript - 比较这两个时间戳我做错了什么?
- python - 如何在python中以网格格式从html表中获取数据
- r - R非重叠样本 - 更快的功能
- javascript - 此代码段中的加法器是什么?我找不到答案
- firebase - Firebase Admin Node.js SDK 没有 firebase.firestore.FieldValue.increment。我应该使用 Firebase JavaScript SDK(客户端)吗?
- sql - 如果 '" \ 被过滤,sql注入是否有效
- php - laravel 中是否有有效的方法从数据库中选择记录并将其设置为 user_id?
- python - Python串行读取需要更长的时间