【发布时间】：2024-05-21 03:40:02
【问题描述】：
这是我的 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 循环，但它不起作用。我正在尝试制作多种食物（红色方块）供我的玩家吃（蓝色方块）
【问题讨论】：
标签： javascript html css loops while-loop