个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
所以我正在学习这个 javascript 游戏制作教程，但我真的找不到我做了什么才能使我的红色方 block 不显示在屏幕上。事实上，我确实认为这是速度问题，因为当我在控制台中更改对象的速度时，它出现...然后飞出屏幕。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame(){
myGamePiece = new component(30, 30, "red", 10, 120);
myGameArea.start();
}
var myGameArea = {
canvas: document.createElement("canvas"),
start: function(){
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear: function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y){
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function(){
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += speedX;
this.y += speedY;
}
}
function updateGameArea(){
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
function moveup(){
myGamePiece.speedY -= 1;
}
function movedown(){
myGamePiece.speedY += 1;
}
function moveright(){
myGamePiece.speedX += 1;
}
function moveleft(){
myGamePiece.speedX -= 1;
}
</script>
<button onmousedown="moveup()">UP</button>
<button onmousedown="movedown()">DOWN</button>
<button onmousedown="moveright()">RIGHT</button>
<button onmousedown="moveleft()">LEFT</button>
</body>
</html>
感谢您提供的任何帮助!
最佳答案
this.newPos = function() {
this.x += speedX;
this.y += speedY;
控制台正确，speedX和speedY不存在。
三种解决方案:
解决方案 1:使用 that
var 那=这个；//保存 this
this.newPos = function() {
that.x += that.speedX;
that.y += that.speedY;
}
解决方案 2:使用绑定(bind):
this.newPos = function() {
this.x += this.speedX;
this.y += thisspeedY;
}.bind(this);
解决方案 3:ES6 - 使用箭头函数
this.newPos = () => {
this.x += this.speedX;
this.y += thisspeedY;
};
关于javascript - 我的红色方 block 不会出现，因为 : "speedX and speedY aren' t defined"-console，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37493427/
27
4
0
我有一个在 Tomcat 下运行的现代网络应用程序，它经常需要调用一些遗留的 perl 代码来获得一些结果。现在，我们将它们包装在对 Runtime.getRuntime().exec() 的调用中，
这是我在 Ruby 中处理的一个非常简单的问题，但我是一个完全的菜鸟，所以我想学习最正确的解决方案。我有一个包含名称和值的数据列表。我需要记住所有这些(显而易见的答案:散列)。但是，我还需要记住这些数
我不明白我实际上在创造什么......通常你用 dog speedy = new dog(); 创建一个对象您调用构造函数 dog() 来创建一个 dog 对象，而 speedy 是对它的引用的名称。
所以我正在学习这个 javascript 游戏制作教程，但我真的找不到我做了什么才能使我的红色方 block 不显示在屏幕上。事实上，我确实认为这是速度问题，因为当我在控制台中更改对象的速度时，它出现
我是一名优秀的程序员,十分优秀！