pinpongゲーム

canvasを使って、x座標、y座標で、setTime関数で動かしています。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Pong Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<style>
		body {
			margin: 0;
			font-family: "Century Gothic";
			font-size: 16px;
		}
		#container {
			text-align: center;
			margin: 5px auto;
		}
		#mycanvas {
			background: #AAEDFF;
		}
		#btn {
			margin: 3px auto;
			width: 200px;
			padding: 5px;
			background: #00AAFF;
			color: #FFFFFF;
			border-radius: 3px;
			cursor: pointer;
		}
		#btn:hover {
			opacity: 0.8;
		}
	</style>
</head>
<body>
	<div id="container">
		<canvas width="280" height="280" id="mycanvas">
			Canvasに対応したブラウザを用意してください。
		</canvas>
		<div id="btn">START</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script>
		$(function(){
			var ctx,
				myPaddle,
				myBall,
				mouseX,
				score,
				scoreLabel,
				isPlaying = false,
				timerId;

			var canvas = document.getElementById('mycanvas');
			if (!canvas|| !canvas.getContext) return false;
			ctx = canvas.getContext('2d');

			var Label = function(x, y){
				this.x = x;
				this.y = y;
				this.draw = function(text){
					ctx.font = 'bold 14px "Century Gothic"';
					ctx.fillStyle = '#00AAFF';
					ctx.textAlign = 'left';
					ctx.fillText(text, this.x, this.y);
				}
			}
			var Ball = function(x, y, vx, vy, r){
				this.x = x;
				this.y = y;
				this.vx = vx;
				this.vy = vy;
				this.r = r;
				this.draw = function(){
					ctx.beginPath();
					ctx.fillStyle = '#FF0088';
					ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI, true);
					ctx.fill();
				};
				this.move = function(){
					this.x += this.vx;
					this.y += this.vy;
					if (this.x + this.r > canvas.width || this.x - this.r < 0){
						this.vx *= -1;
					}
					if (this.y - this.r < 0){
						this.vy *= -1;
					}
					if (this.y + this.r > canvas.height){
						// alert("game over");
						isPlaying = false;
						$('#btn').text('REPLAY?').fadeIn();
					}
				};
				this.checkCollision= function(paddle){
					if ((this.y + this.r > paddle.y && this.y + this.r < paddle.y + paddle.h) &&
						(this.x > paddle.x - paddle.w / 2 && this.x < paddle.x + paddle.w /2)){
						this.vy *= -1;
						score++;
						if (score % 2 === 0){
							this.vx *= 1.3;
							paddle.w *= 0.9;
						}
					}
				}
			}

			var Paddle = function(w, h){
				this.w = w;
				this.h = h;
				this.x = canvas.width / 2;
				this.y = canvas.height - 30;
				this.draw = function(){
					ctx.fillStyle = '#00AAFF';
					ctx.fillRect(this.x - this.w / 2, this.y, this.w, this.h);
				};
				this.move = function(){
					this.x = mouseX - $('#mycanvas').offset().left;
				}
			};

			function rand(min, max){
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}

			function init(){
				score = 0;
				isPlaying = true;
				myPaddle = new Paddle(100, 10);
				myBall = new Ball(rand(50, 250), rand(10, 80), rand(3, 8), rand(3, 8), 6);
				scoreLabel = new Label(10, 25);
				scoreLabel.draw('SCORE: ' + score);
			}
			

			function clearStage(){
				ctx.fillStyle = '#AAEDFF';
				ctx.fillRect(0, 0, canvas.width, canvas.height);
			}

			function update(){
				clearStage();
				scoreLabel.draw('SCORE: ' + score);
				myPaddle.draw();
				myPaddle.move();
				myBall.draw();
				myBall.move();
				myBall.checkCollision(myPaddle);
				timerId =setTimeout(function(){
					update();
				}, 30);
				if(!isPlaying) clearTimeout(timerId);
			}

			$('#btn').click(function(){
				$(this).fadeOut();
				init();
				update();
			});


			$('body').mousemove(function(e){
				mouseX = e.pageX;
			});
		});
	</script>
</body>
</html>