AI game creator

Click here for free DL of the app version that can save data.

No:1398

218

←

Prev Next

→

Cute Girl ASCII Art
Developer User3326｜Date and time 23/6/18 13:40:39
Build time 49.808 sec｜Game capacity 3.334KB｜

Script

を描いて、その女の子と一緒にボールを跳ね返すゲームです。女の子は上下に移動し、ボールは横から跳ね返してください。ボールを落とした場合はゲームオーバーとなります。簡単な操作で遊べるようにし、ハイスコアを保存して競争できるようにしました。スマホでの操作も可能です。絵文字を多用して可愛らしい雰囲気を出しました。以下が実際のプログラムです。

←左側のボタンで左に移動

→右側のボタンで右に移動

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>跳ね返りゲーム</title>
</head>
<body>
	<style>
		canvas {
			border: 1px solid black;
			margin: auto;
			display: block;
		}

body {
			background-color: #B5EAEA;
		}
	</style>

<center>
		<canvas id="gameCanvas" width="400" height="400"></canvas>
		<br>
		<p>←左側のボタンで左に移動</p>
		<p>→右側のボタンで右に移動</p>
	</center>

//女の子のアスキーアートを描画
		ctx.font = "30px Arial";
		ctx.fillText("(*＾ワ＾*)", canvas.width/3, canvas.height/2);

var ballX = canvas.width/2;
		var ballY = canvas.height/2;
		var ballSpeedX = 5;
		var ballSpeedY = -5;
		var ballRadius = 10;

var paddleWidth = 80;
		var paddleHeight = 10;
		var paddleX = (canvas.width-paddleWidth)/2;
		var paddleY = canvas.height-paddleHeight-10;
		var paddleSpeed = 10;

var leftPressed = false;
		var rightPressed = false;
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
			if(e.keyCode == 37) {
				leftPressed = true;
			}
			else if(e.keyCode == 39) {
				rightPressed = true;
			}
		}

function keyUpHandler(e) {
			if(e.keyCode == 37) {
				leftPressed = false;
			}
			else if(e.keyCode == 39) {
				rightPressed = false;
			}
		}

function drawBall() {
			ctx.beginPath();
			ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
			ctx.fillStyle = "#FF69B4";
			ctx.fill();
			ctx.closePath();
		}

function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
			ctx.fillStyle = "#FF69B4";
			ctx.fill();
			ctx.closePath();
		}

function movePaddle() {
			if(leftPressed && paddleX > 0) {
				paddleX -= paddleSpeed;
			}
			if(rightPressed && paddleX < canvas.width-paddleWidth) {
				paddleX += paddleSpeed;
			}
		}

function drawScore() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "#FF69B4";
			ctx.fillText("Score: " + score, 8, 20);
		}

var score = 0;
		function update() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBall();
			drawPaddle();
			collisionDetection();
			movePaddle();
			drawScore();

ballX += ballSpeedX;
			ballY += ballSpeedY;
			score++;
		}

setInterval(update, 10);
	</script>

</body>
</html>