간단한 게임, 어레이의 두 번째 세트 추가 문제
26288 단어 htmltestingjavascriptbeginners
아래의 이 코드는 내가 하나의 배열에 설정한 6블록의 블록과 목표가 있는 간단한 크로스 게임입니다. 이제 목표가 사각형의 4 모서리에 4개의 목표를 가질 수 있도록 다른 배열을 추가하려고 생각했습니다. 내 목표를 위해 두 번째 배열을 추가하면 페이지가 충돌하고 내 배경만 표시됩니다. 아무도 내가 여기에 두 번째 배열 세트를 추가할 수 없고 그리기 기능에 사용할 수 없는 이유를 알 수 있습니까? 또한 레벨에 대한 좋은 팁이 있다면 알려주세요. 플레이어가 매번 목표에 도달할 때마다 블록 속도를 높이는 등의 레벨을 추가할 생각이므로 다음 레벨이 더 어려워집니다...
<!DOCTYPE html>
<html>
<head>
<title>Crossing Game</title>
<style type="text/css">
canvas {
border: 5px solid rgb(251, 241, 105);
background-color: rgb(59, 138, 246);
}
</style>
</head>
<body>
<h2>My Game</h2>
<canvas id='myCanvas' width='600' height='600'></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
const screenWidth = 600;
const screenHeight = 600;
var isGameLive = true;
class GameCharacter {
constructor (x, y, width, height, color, xSpeed, ySpeed){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.color = color;
this.xSpeed = xSpeed;
this.ySpeed = ySpeed;
this.maxSpeed = 4;
}
move(){
this.x += this.xSpeed;
if (this.x < 0) {
this.x = 0;
} else if (this.x > screenWidth - 10) {
this.x = 590;
}
this.y += this.ySpeed;
if (this.y > screenHeight - 35 || this.y < screenTop) {
this.ySpeed = -this.ySpeed;
}
}
}
document.onkeydown = function(event) {
switch(event.key) {
case 'ArrowRight':
player.xSpeed = player.maxSpeed;
break;
}
switch(event.key) {
case 'ArrowLeft':
player.xSpeed = -player.maxSpeed;
break;
}
switch(event.key) {
case 'ArrowUp':
player.ySpeed = -player.maxSpeed;
break;
}
switch(event.key) {
case 'ArrowDown':
player.ySpeed = player.maxSpeed;
break;
}
}
document.onkeyup = function(event) {
player.xSpeed = 0;
player.ySpeed = 0;
}
var checkCollisions = function(rect1, rect2) {
let rect1x2 = rect1.x + rect1.width;
let rect2x2 = rect2.x + rect2.width;
let rect1y2 = rect1.y + rect1.height;
let rect2y2 = rect2.y + rect2.height;
return rect1.x < rect2x2 && rect1x2 > rect2.x && rect1.y < rect2y2 && rect1y2 > rect2.y;
}
var draw = function() {
ctx.clearRect(0, 0, screenWidth, screenHeight);
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
ctx.fillStyle = goalOne.color;
ctx.fillRect(goalOne.x, goalOne.y, goalOne.width, goalOne.height);
enemies.forEach(function(element){
ctx.fillStyle = element.color;
ctx.fillRect(element.x, element.y, element.width, element.height);
});
}
var update = function() {
player.move();
enemies.forEach(function(element) {
if (checkCollisions(player, element)) {
endGameLogic("Game Over!");
}
if (checkCollisions(player, goalOne)) {
endGameLogic("You Win!");
}
element.move();
});
}
var enemies = [
new GameCharacter (24, 75, 72, 35, "rgb(251, 241, 105)", 0, 2),
new GameCharacter (120, screenHeight - 110, 72, 35, "rgb(251, 241, 105)", 0, 1.5),
new GameCharacter (216, 75, 72, 35, "rgb(251, 241, 105)", 0, 1),
new GameCharacter (312, screenHeight - 110, 72, 35, "rgb(251, 241, 105)", 0, 1),
new GameCharacter (408, 75, 72, 35, "rgb(251, 241, 105)", 0, 1.5),
new GameCharacter (504, screenHeight - 110, 72, 35, "rgb(251, 241, 105)", 0, 2),
];
var player = new GameCharacter (295, 295, 10, 10, "rgb(0, 255, 0)", 0, 0);
var goalOne = new GameCharacter (0, 0, 15, 15, "rgb(0, 255, 0)", 0, 0);
var endGameLogic = function(text) {
isGameLive = false;
alert(text);
window.location = "";
}
var step = function() {
update();
draw();
if (isGameLive) {
window.requestAnimationFrame(step);
}
}
step();
</script>
</body>
</html>
Reference
이 문제에 관하여(간단한 게임, 어레이의 두 번째 세트 추가 문제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/commodore1/simple-game-issue-with-adding-2nd-set-of-array-1kjh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
