在我的暑假期间,无聊接手了,所以我决定开始学习html5游戏。在使这个非常简单的游戏在功能上更好的过程中(逻辑上,如果你愿意的话)我遇到了一个我无法弄明白的问题。我希望你能相应地指导我。
所以我有race.html(它只有Canvas在我的webbrowser中显示给游戏) 我有game.js
这是一款简单的2D汽车游戏。汽车沿着道路行驶,为了不耗尽燃料,它必须尽可能多地捕获燃料箱才能获胜。
我的问题在于让“油箱图像”仅在“道路”的x和y坐标之间进行渲染和重置。目前它重置和渲染所有地方,但不是专门在汽车行驶的“道路”上。
这是我的game.js代码:
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 1024;
canvas.height = 768;
document.body.appendChild(canvas);
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "img/map.png";
// car image
var carReady = false;
var carImage = new Image();
carImage.onload = function () {
carReady = true;
};
carImage.src = "img/car.png";
// fuel image
var fuelReady = false;
var fuelImage = new Image();
fuelImage.onload = function () {
fuelReady = true;
};
fuelImage.src = "img/fuel.jpg";
// Game objects
var car = {
speed: 500 // movement in pixels per second
};
var fuel = {};
var fuelsCaught = 0;
// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
// Reset the game when the player catches a fuel
var reset = function () {
car.x = canvas.width / 3;
car.y = canvas.height / 1.3;
// Throw the fuel somewhere on the screen randomly [lengte(math random) keer breedte voor een random plaat in de oppervlakte)]
fuel.x = 300 + (Math.random() * (canvas.width - 700));
fuel.y = 400 + (Math.random() * (canvas.height - 550));
};
// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
car.y -= car.speed * modifier;
}
if (40 in keysDown) { // Player holding down
car.y += car.speed * modifier;
}
if (37 in keysDown) { // Player holding left
car.x -= car.speed * modifier;
}
if (39 in keysDown) { // Player holding right
car.x += car.speed * modifier;
}
// Are they touching?
if (
car.x <= (fuel.x + 32)
&& fuel.x <= (car.x + 32)
&& car.y <= (fuel.y + 32)
&& fuel.y <= (car.y + 32)
) {
++fuelsCaught;
reset();
}
};
// Draw everything
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (carReady) {
ctx.drawImage(carImage, car.x, car.y);
}
if (fuelReady) {
ctx.drawImage(fuelImage, fuel.x, fuel.y);
}
// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "14px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Fuel Tanks caught: " + fuelsCaught + "/100", 32, 32);
};
// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
// Request to do this again ASAP
requestAnimationFrame(main);
};
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
// Let's play this game!
var then = Date.now();
reset();
main();
重点在于这篇文章:
// Throw the fuel somewhere on the screen randomly [lengte(math random) keer breedte voor een random plaat in de oppervlakte)]
fuel.x = 300 + (Math.random() * (canvas.width - 700));
fuel.y = 400 + (Math.random() * (canvas.height - 550));
我经常改变300和700,以便清楚地了解相关性。但无济于事,因为重置不合逻辑。
这是道路的图片(其res为:1024x768):
这是车:
并且race.html代码是这样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Race</title>
</head>
<body>
<script src="js/game.js"></script>
</body>
</html>
这个想法是在道路两侧之间和汽车正上方渲染/重置燃料箱。
答案 0 :(得分:1)
这很有趣。所以我们先说我们从定义Y坐标开始。 Y可以位于道路的顶部和底部或画布之间(或者400
,如您所示)。您的代码执行此操作:
fuel.y = 400 + (Math.random() * (canvas.height - 550));
道路变得越来越薄,越往右边开始,我们需要定义这是如何发生的。我们可以说,在屏幕底部,它向右10px
开始,最大y
,y=1000px
向右开始600px
。 (我已经明确地提出了这些数字,你必须根据自己的情况对其进行优化)。
我们还要说屏幕底部的宽度为600px
,顶部为30px
。我们需要定义两个公式来描述:
x
坐标的最左侧y
坐标y
坐标的道路宽度。下面:
var left_most_x = 10 + ((600-10)/1000) * fuel.y
var road_width = 600 - ((600-30)/1000) * fuel.y
然后您可以将x
位置定义为:
fuel.x = left_most_x + (Math.random() * road_width)