如何在js中使用一个对象创建多个矩形?如何在不同的x轴和y轴上做出它们
How do you make multiple rectangles in js with on obj? And how do you make them on different x and y axises?
这是我的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循环，但它不会工作。我正在尝试为我的玩家制作多种食物(红色方块)来吃(蓝色方块)
如果我理解正确的话，你是想让玩家收集多种食物。
尝试用这个更新你的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();
相关文章：
- 如何使用PHP和JS级联三个下拉列表
- Jpgraph:如何手动设置X轴和Y轴的范围
- 谷歌地图Api和JS代码不工作
- 浏览器坚持使用旧的html和JS缓存
- PHP和JS脚本的奇怪问题，在我刷新页面之前第一次失败
- Dart和第三方CSS和JS框架
- Bootstrap CSS和JS我必须将它们包含在单独的文件中，或者可以编译它们
- PHP和JS中表单验证的最佳方式
- 使用SVG和JS进行转换
- NVD3.js多图形，具有固定的x轴和y轴
- 制作一个chrome扩展，替换css和js元素
- 单独的文件(HTML5、CSS和JS）
- 使用HTML和JS的iPhone游戏中的性能问题，以及appMobi
- 如何在放大和缩小时间轴时在时间轴Vis.js上设置新选项
- d3.js如何区分 X 轴和 Y 轴
- 图表JS自定义工具提示，X轴和Y轴的%和标签
- 如何在js中使用一个对象创建多个矩形?如何在不同的x轴和y轴上做出它们
- 使用数组计算坐标之间的距离，并设置Y轴和比例- D3.js
- Three.js -当相机以90度角旋转时，为什么在x轴和z轴上旋转会产生相同的效果?
- 我如何通过x轴和y轴移动一个点，而曲线在chart.js线形图中没有改变
