今回は、スマホじゃなくてPCで見てね!
突然始まります!!
ただただ、ボールを跳ね返すだけの虚無なモノ
マウスで動くよ
ゲームとはまだ呼べない、もはやこれはブログなのか?それともブログじゃないのか?なんちゃって哲学するtatsuでした……
機会があれば次はもっとちゃんとしたものを……
if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) { } else {
const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); const ballRadius = 10;
const paddleHeight = 10; const paddleWidth = 75; let paddleX = (canvas.width - paddleWidth) / 2;
let color = '#0095DD'; let x = canvas.width / 2; let y = canvas.height - 30; let dx = 2; let dy = -2;
let rightPressed = false; let leftPressed = false;
document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); document.addEventListener("mousemove", mouseMoveHandler, false); function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI * 2); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); } function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); } function mouseMoveHandler(e) { const relativeX = e.clientX - canvas.offsetLeft; if (relativeX > 0 && relativeX < canvas.width) { paddleX = relativeX - paddleWidth/2; } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; color = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")"; } if (y + dy < ballRadius) { dy = -dy; } else if (y + dy > canvas.height-ballRadius) { if (x > paddleX && x < paddleX + paddleWidth) { dy = -(dy + 1); dx = dx + 1; } else { alert("GAME OVER"); document.location.reload(); clearInterval(interval); } } drawPaddle(); drawBall(); if (rightPressed) { paddleX = Math.min(paddleX + 7, canvas.width - paddleWidth); } else if (leftPressed) { paddleX = Math.max(paddleX - 7, 0); } x += dx; y += dy; } function keyDownHandler(e) { if (e.key === "Right" || e.key === "ArrowRight") { rightPressed = true; } else if (e.key === "Left" || e.key === "ArrowLeft") { leftPressed = true; } } function keyUpHandler(e) { if (e.key === "Right" || e.key === "ArrowRight") { rightPressed = false; } else if (e.key === "Left" || e.key === "ArrowLeft") { leftPressed = false; } } const interval = setInterval(draw, 10); }