はい、以下は実際のプログラムになります。セキュリティなどについては、できるだけ安全に実装を行いました。また、ジョークとして、ボールが地面に落ちたときに「こらぁ！しっかり蹴り返しなさい！」というメッセージが表示されるようにしてみました。
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Tennis Game</title>
<style>
#canvas {
border: solid black 1px;
}
</style>
</head>
<body onload="startGame()">
<h1>Tennis Game</h1>
<canvas id="canvas" width="480" height="320"></canvas>
<br>
<button onclick="moveUp()">Up</button>
<button onclick="moveDown()">Down</button>
<script>
var ball;
var player;
function startGame() {
ball = new Ball(10, 10, "red", 10, 120);
player = new Player(10, 120, "black", 10, 60);
gameArea.start();
}
var gameArea = {
canvas : document.getElementById("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 320;
this.context = this.canvas.getContext("2d");
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
gameArea.keys = (gameArea.keys || []);
gameArea.keys[e.keyCode] = true;
})
window.addEventListener('keyup', function (e) {
gameArea.keys[e.keyCode] = false;
})
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
function Ball(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 5;
this.speedY = 5;
this.x = x;
this.y = y;
this.update = function() {
ctx = gameArea.context;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.width, 0, 2 * Math.PI, false);
ctx.fill();
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x >= gameArea.canvas.width) {
this.speedX = -this.speedX;
this.x = gameArea.canvas.width - this.width;
}
if (this.x <= 0) {
this.speedX = -this.speedX;
this.x = 0;
}
if (this.y >= gameArea.canvas.height) {
this.speedY = -this.speedY;
this.y = gameArea.canvas.height - this.height;
alert("こらぁ！しっかり蹴り返しなさい！");
}
if (this.y <= 0) {
this.speedY = -this.speedY;
this.y = 0;
}
if (this.x + this.width >= player.x && this.y >= player.y && this.y <= player.y + player.height) {
this.speedX = -this.speedX;
this.x = player.x - this.width;
}
}
}
function Player(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speed = 5;
this.update = function() {
ctx = gameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
if (gameArea.keys && gameArea.keys[38]) {this.y -= this.speed;}
if (gameArea.keys && gameArea.keys[40]) {this.y += this.speed;}
if (this.y <= 0) {this.y = 0;}
if (this.y + this.height >= gameArea.canvas.height) {this.y = gameArea.canvas.height - this.height;}
}
}
function updateGameArea() {
gameArea.clear();
ball.newPos();
ball.update();
player.newPos();
player.update();
}
function moveUp() {
player.y -= 20;
}
function moveDown() {
player.y += 20;
}
</script>
</body>
</html>
```
