画面上でボールがバウンドしているので、プレーヤーと衝突したときにゲームを本質的に終了するコードを作成する必要があります...これは私の現在のコードですが、機能していません。さらに情報が必要な場合はお知らせください。
if(playerLoc == ballLoc){
gameOver();
}
ここで、playerLoc / ballLocは、X軸とY軸の測定値に基づいて測定されます。
<script language="JavaScript">
//get info, process data, update screen objects
//instance vars
var player;
var ball;
var score;
var axis;
var ballaxis;
//initial speeds
var dx = 6;
var dy = 6;
var currentScore = 0;
var timer;
//set initial conditions for ball and paddle
var playerTop = 400;
var playerLeft = 200;
var ballLeft = 228;
var ballTop = 4;
var playerLoc = playerLeft + playerTop;
var ballLoc = ballLeft + ballTop;
function init(){
//instantiate HTML object instance vars
player = document.getElementById('player');
ball = document.getElementById('ball');
score = document.getElementById('score');
axis = document.getElementById('axis');
ballaxis = document.getElementById('ballaxis');
//register key listener with document object
document.onkeydown = keyListener;
//start the game loop
start();
}
function keyListener(e){
if(!e){
//for IE
e = window.event;
}
if(e.keyCode==37 && playerLeft > 0){
//keyCode 37 is left arrow
playerLeft -= 10;
player.style.left = playerLeft + 'px';
}
if(e.keyCode==39 && playerLeft < 450){
//keyCode 39 is right arrow
playerLeft += 10;
player.style.left = playerLeft + 'px';
}
if(e.keyCode==38 && playerTop > 0){
//keyCode 38 is up arrow
playerTop -= 10;
player.style.top = playerTop + 'px';
}
if(e.keyCode==40 && playerTop < 450){
//keyCode 40 is down arrow
playerTop += 10;
player.style.top = playerTop + 'px';
}
}
function start(){
//game loop
render();
detectCollisions();
difficulty();
axisMeasure();
//end conditions
if(playerLoc == ballLoc){
gameOver();
}
else{
//still in play - keep the loop going
timer = setTimeout('start()',50);
}
}
function detectCollisions(){
//just reflect the ball on a collision
//a more robust engine could change trajectory of ball based
//on where the ball hits the paddle
if(collisionX())
dx = dx * -1;
if(collisionY())
dy = dy * -1;
}
function collisionX(){
//check left and right boundaries
if(ballLeft < 2 || ballLeft > 480)
return true;
else {
return false;
}
}
function collisionY(){
//check if at top of playing area
if(ballTop < 2 || ballTop > 480)
return true;
else {
return false;
}
}
function render(){
moveBall();
updateScore();
}
function moveBall(){
ballLeft += dx;
ballTop += dy;
ball.style.left = ballLeft;
ball.style.top = ballTop;
}
function axisMeasure(){
axis.innerHTML = 'P X-Axis: ' + playerLeft + ' P Y-Axis: ' + playerTop
ballaxis.innerHTML = 'B X-Axis: ' + ballLeft + ' B Y-Axis: ' + ballTop
}
function updateScore(){
currentScore += 5;
score.innerHTML = 'Score: ' + currentScore;
}
function difficulty(){
//as the game progresses, increase magnitude of the vertical speed
if(currentScore % 1000 == 0){
if(dy > 0)
dy += 1;
else
dy -= 1;
}
}
function gameOver(){
//end the game by clearing the timer, modifying the score label
clearTimeout(timer);
score.innerHTML += " Game Over";
score.style.backgroundColor = 'rgb(128,0,0)';