AI game creator

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

No:359

158

←

Prev Next

→

pinball
Developer User2906｜Date and time 23/6/13 0:41:09
Build time 70.749 sec｜Game capacity 4.903KB｜

Script

// This app is a pinball game. You control a ball drawn with yellow pictograms and、The objective is to destroy the orange blocks while bouncing them off with the blue paddle. The number of blocks destroyed is the score, and、Three lives exist.、When the ball falls, you lose one life. The game is cleared when all blocks are destroyed. You can control the paddle with the left and right arrow keys. You can also play on your mobile phone.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Emoji Pinball</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>

<canvas id="myCanvas" width="320" height="480"></canvas>
	
	<script>
	
		// Define variables
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		var ballRadius = 10;
		var x = canvas.width/2;
		var y = canvas.height-30;
		var dx = 3;
		var dy = -3;
		var paddleHeight = 10;
		var paddleWidth = 75;
		var paddleX = (canvas.width-paddleWidth)/2;
		var rightPressed = false;
		var leftPressed = false;
		var brickRowCount = 3;
		var brickColumnCount = 5;
		var brickWidth = 75;
		var brickHeight = 20;
		var brickPadding = 10;
		var brickOffsetTop = 30;
		var brickOffsetLeft = 30;
		var score = 0;
		var lives = 3;
		var bricks = [];

// Create bricks
		for(var c=0; c<brickColumnCount; c++) {
			bricks[c] = [];
			for(var r=0; r<brickRowCount; r++) {
				bricks[c][r] = { x: 0, y: 0, status: 1 };
			}
		}

// Event listeners for arrow keys
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);

// Key pressed functions
		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;
			}
		}

// Draw ball
		function drawBall() {
			ctx.beginPath();
			ctx.arc(x, y, ballRadius, 0, Math.PI*2);
			ctx.fillStyle = "yellow";
			ctx.fill();
			ctx.closePath();
		}

// Draw paddle
		function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
			ctx.fillStyle = "blue";
			ctx.fill();
			ctx.closePath();
		}

// Draw bricks
		function drawBricks() {
			for(var c=0; c<brickColumnCount; c++) {
				for(var r=0; r<brickRowCount; r++) {
					if(bricks[c][r].status == 1) {
						var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
						var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
						bricks[c][r].x = brickX;
						bricks[c][r].y = brickY;
						ctx.beginPath();
						ctx.rect(brickX, brickY, brickWidth, brickHeight);
						ctx.fillStyle = "orange";
						ctx.fill();
						ctx.closePath();
					}
				}
			}
		}

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

// Draw lives
		function drawLives() {
			ctx.font = "16px Arial";
			ctx.fillStyle = "black";
			ctx.fillText("Lives: "+lives, canvas.width-65, 20);
		}

// Collision detection for bricks
		function collisionDetection() {
			for(var c=0; c<brickColumnCount; c++) {
				for(var r=0; r<brickRowCount; r++) {
					var b = bricks[c][r];
					if(b.status == 1) {
						if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
							dy = -dy;
							b.status = 0;
							score++;
							if(score == brickRowCount*brickColumnCount) {
								alert("Congratulations! You won!");
								document.location.reload();
							}
						}
					}
				}
			}
		}

// Main function
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBricks();
			drawBall();
			drawPaddle();
			drawScore();
			drawLives();
			collisionDetection();

// Ball movement
			x += dx;
			y += dy;

// Bounce off walls
			if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
				dx = -dx;
			}
			if(y + dy < ballRadius) {
				dy = -dy;
			}
			else if(y + dy > canvas.height-ballRadius) {
				if(x > paddleX && x < paddleX + paddleWidth) {
					dy = -dy;
				}
				else {
					lives--;
					if(!lives) {
						alert("Game over!");
						document.location.reload();
					}
					else {
						x = canvas.width/2;
						y = canvas.height-30;
						dx = 3;
						dy = -3;
						paddleX = (canvas.width-paddleWidth)/2;
					}
				}
			}

// Move paddle
			if(rightPressed && paddleX < canvas.width-paddleWidth) {
				paddleX += 7;
			}
			else if(leftPressed && paddleX > 0) {
				paddleX -= 7;
			}

requestAnimationFrame(draw);
		}

draw(); // Start game
		
	</script>

</body>
</html>

// このアプリはピンボールのゲームです。黄色い絵文字で描かれたボールを操作し、青いパドルで跳ね返しながらオレンジのブロックを破壊することが目的です。破壊したブロックの数がスコアとなり、ライフが3つ存在して、ボールが落ちるとライフが1つ減ります。全てのブロックを破壊するとゲームクリアです。左右の矢印キーでパドルを操作することができます。スマホでもプレイ可能です。