这是我的js
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
var keys =[];
var width = 1575,
height = 700,
speed = 10,
score1 = 0,
NUMFOOD = 10,
running = true,
i = 0;
var requestAnimFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var randomXSpawn = Math.random() * (width - 8);
var randomYSpawn = Math.random() * (height - 8);
function gameObj(x,y,width,height) {
this.x=x;
this.y=y;
this.width=width;
this.height=height;
};
var player1 = new gameObj(0,0,10,10);
var player2 = new gameObj(0, 700-10,10,10);
var food = new gameObj(randomXSpawn,randomYSpawn,3,3);
window.addEventListener("keydown", function(e){
keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
delete keys[e.keyCode];
}, false);
/*
keys
up-38
down-40
right-39
left-37
w-87
s-83
a-65
d-68
y-89
h-72
g-71
j-74
5-101
2-98
1-97
3-99
*/
function game(){
update();
render();
}
function update(){
if(keys[87]) player1.y-=speed;
if(keys[83]) player1.y+=speed;
if(keys[65]) player1.x-=speed;
if(keys[68]) player1.x+=speed;
if(player1.x <0) player1.x=0;
if(player1.y <0) player1.y=0;
if(player1.x >= width - player1.width) player1.x = width - player1.width;
if(player1.y >= height - player1.height) player1.y = height - player1.height;
if(collision(player1, food)){
playerColl1 = true;
process(player1, score1);
console.log("collision");
}
console.log(player1.x, player1.y);
}
function process(player){
score1++;
food.x = Math.random() * (width - 8);
food.y = Math.random() * (height - 8);
if(score1 >= player.width){
player.width++;
player.height++;
if(speed >= 1){
speed = speed - 0.1;
if(speed <= 2){
speed = 2;
}
}
}
}
function render(){
context.clearRect(0,0,width,height);
context.fillStyle = "black";
context.fillRect(width/2 - 1,0,1,height);
context.fillStyle = "blue";
context.fillRect(player1.x, player1.y, player1.width, player1.height);
context.fillStyle = "red";
while(NUMFOOD > i){
food++;
}
context.fillRect(food.x, food.y, food.width, food.height);
context.fillStyle = "black";
context.font = "bold 30px helvetica";
context.fillText(score1, 10,30);
}
function collision(first, second){
return !(first.x > second.x + second.width ||
first.x + first.width < second.x ||
first.y > second.y + second.height||
first.y + first.height < second.y||
second.x > first.x + first.width ||
second.x + second.width < first.x ||
second.y > first.y + first.height||
second.y + second.height < first.y);
}
function animate() {
if (running) {
game();
}
requestAnimFrame(animate);
}
animate();
这是我的html
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<canvas id="mainCanvas" height="700" width="1575"></canvas>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
这是我的CSS
#mainCanvas{
outline: 1px solid black;
background-color: #bcbcbc;
}
我不知道为什么我不能制作多个矩形。有人可以帮助我任何帮助都表示赞赏。我正在尝试使用 while 循环，但它不起作用。我正在尝试制作多种食物(红色方 block )供我的玩家吃(蓝色方 block )
最佳答案
如果我没理解错的话，你是在尝试让玩家收集多种食物。
尝试用这个更新你的 js。我在我修改的地方添加了注释:
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
var keys =[];
var width = 1575,
height = 700,
speed = 10,
score1 = 0,
NUMFOOD = 10,
running = true,
i = 0;
var requestAnimFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
function gameObj(x,y,width,height) {
this.x=x;
this.y=y;
this.width=width;
this.height=height;
};
var player1 = new gameObj(0,0,10,10);
var player2 = new gameObj(0, 700-10,10,10);
// create a list of food items
var foods = [];
for (var i=0; i< NUMFOOD; i++){
foods[i]=new gameObj( Math.random() * (width - 8), Math.random() * (height- 8),3,3);
}
window.addEventListener("keydown", function(e){
keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
delete keys[e.keyCode];
}, false);
/*
keys
up-38
down-40
right-39
left-37
w-87
s-83
a-65
d-68
y-89
h-72
g-71
j-74
5-101
2-98
1-97
3-99
*/
function game(){
update();
render();
}
function update(){
if(keys[87]) player1.y-=speed;
if(keys[83]) player1.y+=speed;
if(keys[65]) player1.x-=speed;
if(keys[68]) player1.x+=speed;
if(player1.x <0) player1.x=0;
if(player1.y <0) player1.y=0;
if(player1.x >= width - player1.width) player1.x = width - player1.width;
if(player1.y >= height - player1.height) player1.y = height - player1.height;
//loop over list of food and check if any hits
for (var i=0; i< NUMFOOD; i++){
if(collision(player1, foods[i])){
playerColl1 = true;
// pass food object that has been hit to process
process(player1, score1, foods[i]);
console.log("collision");
}
}
console.log(player1.x, player1.y);
}
function process(player, score1, food){
score1++;
food.x = Math.random() * (width - 8);
food.y = Math.random() * (height - 8);
if(score1 >= player.width){
player.width++;
player.height++;
if(speed >= 1){
speed = speed - 0.1;
if(speed <= 2){
speed = 2;
}
}
}
}
function render(){
context.clearRect(0,0,width,height);
context.fillStyle = "black";
context.fillRect(width/2 - 1,0,1,height);
context.fillStyle = "blue";
context.fillRect(player1.x, player1.y, player1.width, player1.height);
context.fillStyle = "red";
// render all food items
for (var i=0; i< NUMFOOD; i++){
context.fillRect(foods[i].x, foods[i].y, foods[i].width, foods[i].height);
}
context.fillStyle = "black";
context.font = "bold 30px helvetica";
context.fillText(score1, 10,30);
}
function collision(first, second){
return !(first.x > second.x + second.width ||
first.x + first.width < second.x ||
first.y > second.y + second.height||
first.y + first.height < second.y||
second.x > first.x + first.width ||
second.x + second.width < first.x ||
second.y > first.y + first.height||
second.y + second.height < first.y);
}
function animate() {
if (running) {
game();
}
requestAnimFrame(animate);
}
animate();
关于javascript - 你如何在js中用on obj制作多个矩形？以及如何在不同的 x 和 y 轴上制作它们？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33192615/