【发布时间】：2017-01-29 14:40:13
【问题描述】：
这是我第一次尝试 JavaScript 游戏。
我正在尝试制作一个带有黄色块的 javascript 游戏，您可以使用 w a s d 键控制它。蓝色方块应该是一个敌人，如果你击中它会让你松懈。稍后我将添加更多功能。问题：在您释放其中一个按钮之前，游戏运行良好。释放控制器按钮时如何防止播放器方块飞走？
当我启用 w a s d 键作为控制器时，我也无法使按钮工作，但我不认为这是一个主要问题。尽管如此，如果有人知道如何解决它，我会很高兴。
var myGamePiece;
var myFi;
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(200,200,0,0.5)", 10, 175);
//blueGamePiece = new component(20, 20, "blue", 300, 110);
myFi = new component(15, 15, "blue", 300, 120);
}
var myGameArea = {
canvas: document.createElement("canvas"),
start: function() {
this.canvas.width = 680;
this.canvas.height = 420;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function(e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function(e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
}, // I don't get why the comma is so important and what it does!
clear: function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop: function() {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y) {
this.gamearea = myGameArea;
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 += this.speedX;
this.y += this.speedY;
},
this.crashWith = function(enemy) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var fileft = enemy.x;
var firight = enemy.x + (enemy.width);
var fitop = enemy.y;
var fibottom = enemy.y + (enemy.height);
var crash = true;
if ((mybottom < fitop) || (mytop > fibottom) || (myright < fileft) || (myleft > firight)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
if (myGamePiece.crashWith(myFi)) {
myGameArea.stop();
} else {
myGameArea.clear();
myGamePiece.speedX += myGamePiece.speedX;
myGamePiece.speedY += myGamePiece.speedY;
if (myGameArea.keys && myGameArea.keys[65]) {
myGamePiece.speedX = -1;
}
if (myGameArea.keys && myGameArea.keys[68]) {
myGamePiece.speedX = 1;
}
if (myGameArea.keys && myGameArea.keys[87]) {
myGamePiece.speedY = -1;
}
if (myGameArea.keys && myGameArea.keys[83]) {
myGamePiece.speedY = 1;
}
myGamePiece.newPos();
//blueGamePiece.x -=1;
//blueGamePiece.y +=2;
//blueGamePiece.update();
myGamePiece.update();
myFi.update();
}
}
function moveup() {
myGamePiece.speedY = 1;
}
function movedown() {
myGamePiece.speedY = 1;
}
function moveleft() {
myGamePiece.speedX = 1;
}
function moveright() {
myGamePiece.speedX = 1;
}
function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}body {
text-align: center;
}
canvas {
border: 1px solid #d3d3d3;
background-color: #f4f4f4;
}
div {
text-align: center;
width: 300px;
height: 100px;
}
button {
background-color: black;
color: yellow;
}<div>
<button onmousedown="moveup()" onmouseup="clearmove()">UP</button>
<br>
<br>
<button onmousedown="moveleft()" onmouseup="clearmove()">LEFT</button>
<button onmousedown="moveright()" onmouseup="clearmove()">RIGHT</button>
<br>
<br>
<button onmousedown="movedown()" onmouseup="clearmove()">DOWN</button>
</div>
<p>I have created a game area!</p>
<p>Then I created a component to my game! I is a yellow square!</p>
<p>I continued to add frames and movement</p>
<p>After I had added movement, I could finally add controllers</p>
<p>First I added the buttons that was controlled by the mouse,
<br>then I added the keystroke controllers for the w,s,a,d keys.</p>【问题讨论】：
标签： javascript controls