我正在创建一个视频游戏,我想要一个按钮消失,一旦我点击它并移动到下一个屏幕。我可以通过我的html和js文件设置按钮的功能,但我不确定如何点击后它会消失。
我的HTML代码:
<html>
<head>
<title> Pong </title>
<link type = "text/css" href = "main.css" rel = "stylesheet">
</head>
<canvas id="gameCanvas" width="1350" height="600"></canvas>
<body>
<button id = 'easy_click' onclick="EasyChange()"> Easy </button>
<button id = 'int_change' onclick="intChange()"> Intermediate </button>
<button id = "hard_change" onclick="hardChange()"> Hard </button>
</body>
<script src = "functions.js"></script>
</html>
这是我的JS代码:
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 20;
var ballSpeedY = 10
var menuScreen = false;
var name = "Developed by Jonah Johnson";
var player1Score = 0;
var player2Score = 0;
const WINNING_SCORE = 10;
var easybutton = "Easy";
var hardButton = "Hard";
var intButton = "Intermediate";
var diffLevelEasy = false;
var diffLevelMedium = true;
var diffLevelHard = false;
var showingWinScreen = true;
var paddle1Y = 250;
var paddle2Y = 250;
const PADDLE_THICKNESS = 10;
const PADDLE_HEIGHT = 100;
function calculateMousePos(evt) {
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
var mouseX = evt.clientX - rect.left - root.scrollLeft;
var mouseY = evt.clientY - rect.top - root.scrollTop;
return {
x:mouseX,
y:mouseY
};
}
//changing of difficulty
//easy changing
function EasyChange() {
diffLevelEasy = true;
diffLevelMedium = false;
diffLevelHard = false;
showingWinScreen = false;
}
function intChange() {
diffLevelEasy = false;
diffLevelMedium = true;
diffLevelHard = false;
showingWinScreen = false;
}
function hardChange() {
diffLevelEasy = false;
diffLevelMedium = false;
diffLevelHard = true;
showingWinScreen = false;
}
function handleMouseClick(evt) {
if(showingWinScreen) {
player1Score = 0;
player2Score = 0;
showingWinScreen = false;
}
}
// getting an easy medium
function handleMouseClick(evt) {
if(easybutton) {
diffLevelEasy = true;
diffLevelMedium = false;
diffLevelHard = false;
showingWinScreen = false;
}
}
//getting medium
function handleMouseClick(evt) {
if(intButton) {
diffLevelEasy = false;
diffLevelMedium = true;
diffLevelHard = false;
showingWinScreen = false;
}
}
//getting hard
function handleMouseClick(evt) {
if(hardButton) {
diffLevelEasy = false;
diffLevelMedium = false;
diffLevelHard = true;
showingWinScreen = false;
}
}
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
var framesPerSecond = 30;
setInterval(function() {
moveEverything();
drawEverything();
}, 1000/framesPerSecond);
canvas.addEventListener('mousedown', handleMouseClick);
canvas.addEventListener('mousemove',
function(evt) {
var mousePos = calculateMousePos(evt);
paddle1Y = mousePos.y - (PADDLE_HEIGHT/2);
});
}
function ballReset() {
if(player1Score >= WINNING_SCORE ||
player2Score >= WINNING_SCORE) {
showingWinScreen = true;
}
ballSpeedX = -ballSpeedX;
ballX = canvas.width/2;
ballY = canvas.height/2;
}
function computerMovement() {
/// ai movement
//easy
if(diffLevelEasy === true) {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
if(paddle2YCenter < ballY - 35) {
paddle2Y = paddle2Y + 2;
} else if(paddle2YCenter > ballY + 35) {
paddle2Y = paddle2Y - 2;
}
}
//medium
else if(diffLevelMedium === true) {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
if(paddle2YCenter < ballY - 35) {
paddle2Y = paddle2Y + 12;
} else if(paddle2YCenter > ballY + 35) {
paddle2Y = paddle2Y - 12;
}
}
//hard
else if(diffLevelHard === true) {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
if(paddle2YCenter < ballY - 35) {
paddle2Y = paddle2Y + 18;
} else if(paddle2YCenter > ballY + 35) {
paddle2Y = paddle2Y - 18;
}
}
}
function moveEverything() {
if(showingWinScreen) { //showing win screen
return;
}
computerMovement();
ballX = ballX + ballSpeedX;
ballY = ballY + ballSpeedY;
if(ballX < 0) {
if(ballY > paddle1Y &&
ballY < paddle1Y+PADDLE_HEIGHT) {
ballSpeedX = -ballSpeedX;
var deltaY = ballY
-(paddle1Y+PADDLE_HEIGHT/2);
ballSpeedY = deltaY * 0.35;
} else {
player2Score++; // must be BEFORE ballReset()
ballReset();
}
}
if(ballX > canvas.width) {
if(ballY > paddle2Y &&
ballY < paddle2Y+PADDLE_HEIGHT) {
ballSpeedX = -ballSpeedX;
var deltaY = ballY
-(paddle2Y+PADDLE_HEIGHT/2);
ballSpeedY = deltaY * 0.35;
} else {
player1Score++; // must be BEFORE ballReset()
ballReset();
}
}
if(ballY < 0) {
ballSpeedY = -ballSpeedY;
}
if(ballY > canvas.height) {
ballSpeedY = -ballSpeedY;
}
}
function drawNet() {
for(var i=0;i<canvas.height;i+=40) {
colorRect(canvas.width/2-1,i,2,20,'white');
}
}
function drawEverything() {
// next line blanks out the screen with black
colorRect(0,0,canvas.width,canvas.height,'black');
if(showingWinScreen) {
canvasContext.fillStyle = 'white';
if(player1Score >= WINNING_SCORE) {
canvasContext.fillText("Left Player Won", 350, 200);
} else if(player2Score >= WINNING_SCORE) {
canvasContext.fillText("Right Player Won", 350, 200);
}
canvasContext.fillText("click to continue", 350, 500);
canvasContext.fillText("Difficulty:", 50, 50);
canvasContext.fillText(easybutton, 50, 100);
canvasContext.fillText(intButton, 50, 200);
canvasContext.fillText(hardButton, 50, 300);
return;
}
drawNet();
// this is left player paddle
colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
// this is right computer paddle
colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
// next line draws the ball
colorCircle(ballX, ballY, 10, 'white');
canvasContext.fillText(player1Score, 100, 100);
canvasContext.fillText(player2Score, canvas.width-100, 100);
canvasContext.fillText(name, 100, 590);
}
function colorCircle(centerX, centerY, radius, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.beginPath();
canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true);
canvasContext.fill();
}
function colorRect(leftX,topY, width,height, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX,topY, width,height);
}
//sets how hard the game is
if(diffLevel = diffLevelEasy) {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
if(paddle2YCenter < ballY - 35) {
paddle2Y = paddle2Y + 2;
} else if(paddle2YCenter > ballY + 35) {
paddle2Y = paddle2Y - 2;
}
}
我只是想在点击时删除按钮,那我该怎么做?
答案 0 :(得分:1)
在网上找到这个尝试
Name Cri City Wanted Val
P1 B BKN ?
P2 D DET ?
答案 1 :(得分:0)
只需致电evt.target.remove()
,它就会将其从DOM中删除。
答案 2 :(得分:0)
为了将来的可扩展性,可能性,可维护性和最少的代码更改,我将按钮作为参数发送给事件处理程序:
<button id = 'easy_click' onclick="EasyChange(this)"> Easy </button>
<button id = 'int_change' onclick="intChange(this)"> Intermediate </button>
<button id = "hard_change" onclick="hardChange(this)"> Hard </button>
然后在处理函数中设置样式:
function EasyChange(btn) {
diffLevelEasy = true;
diffLevelMedium = false;
diffLevelHard = false;
showingWinScreen = false;
btn.style.display='none';
}
function intChange(btn) {
diffLevelEasy = false;
diffLevelMedium = true;
diffLevelHard = false;
showingWinScreen = false;
btn.style.display='none';
}
function hardChange(btn) {
diffLevelEasy = false;
diffLevelMedium = false;
diffLevelHard = true;
showingWinScreen = false;
btn.style.display='none';
}
要恢复按钮使用:
btn.style.display='none';
或者,要停止使用DOM跳转:
btn.style.visibility='hidden';
和
btn.style.visibility='visible';
另请告知我发布的时间和地点,因为网页听起来很棒。