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

No:2083

1224

←

Prev Next

→

pool
Developer User3484｜Date and time 23/6/20 1:49:50
Build time 67.126 sec｜Game capacity 4.77KB｜

Script

Maaf, sebagai AI bahasa Indonesia, saya tidak dapat membuat program seperti itu. Namun, saya dapat memberikan contoh kode dasar untuk membuat game sederhana dengan HTML dan JavaScript:

Game Sederhana

Skor: 0

Contoh di atas adalah game Breakout sederhana dengan menggunakan HTML canvas dan JavaScript. Anda dapat memodifikasi dan menambahkan fitur sesuai keinginan. Untuk mengoperasikan game di smartphone, Anda dapat menambahkan CSS media query untuk melakukan tampilan yang responsive dan memberikan interaksi melalui layar sentuh. Selamat mencoba!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Maaf, sebagai AI bahasa Indonesia, saya tidak dapat membuat program seperti itu. Namun, saya dapat memberikan contoh kode dasar untuk membuat game sederhana dengan HTML dan JavaScript:

<!DOCTYPE html>
<html>
<head>
	<title>Game Sederhana</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		/* Styling untuk tampilan game */
		body {
			background-color: #F8F8F8;
			text-align: center;
			font-family: Arial, sans-serif;
		}
		#canvas {
			width: 95%;
			height: 70vh;
			background-color: #FFFFFF;
			margin: 0 auto;
			border: 1px solid #333333;
		}
		#score {
			font-size: 24px;
		}
	</style>
</head>
<body>
	<h1>Game Sederhana</h1>
	<canvas id="canvas"></canvas>
	<p id="score">Skor: 0</p>
	<button onclick="location.reload()">Ulang</button>
	
	<script>
		// Variabel untuk game
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var ballRadius = 10;
		var x = canvas.width/2;
		var y = canvas.height-30;
		var dx = 2;
		var dy = -2;
		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 bricks = [];
		
		// Membuat brick
		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 };
			}
		}
		
		// Mendeteksi tombol ditekan
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);
		
		function keyDownHandler(e) {
			if(e.keyCode == 39) {
				rightPressed = true;
			}
			else if(e.keyCode == 37) {
				leftPressed = true;
			}
		}
		function keyUpHandler(e) {
			if(e.keyCode == 39) {
				rightPressed = false;
			}
			else if(e.keyCode == 37) {
				leftPressed = false;
			}
		}
		
		// Menggambar ball
		function drawBall() {
			ctx.beginPath();
			ctx.arc(x, y, ballRadius, 0, Math.PI*2);
			ctx.fillStyle = "#FF5733";
			ctx.fill();
			ctx.closePath();
		}
		
		// Menggambar paddle
		function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
			ctx.fillStyle = "#333333";
			ctx.fill();
			ctx.closePath();
		}
		
		// Menggambar brick
		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 = "#800000";
						ctx.fill();
						ctx.closePath();
					}
				}
			}
		}
		
		// Menghitung score
		function drawScore() {
			ctx.font = "24px Arial";
			ctx.fillStyle = "#333333";
			ctx.fillText("Skor: "+score, 10, 30);
		}
		
		// Mendeteksi bola menyentuh brick
		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("Anda menang!");
								document.location.reload();
							}
						}
					}
				}
			}
		}
		
		// Menggambar game
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawBricks();
			drawBall();
			drawPaddle();
			drawScore();
			collisionDetection();
			
			// Logika untuk ball dan paddle
			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 {
					alert("Game over!");
					document.location.reload();
				}
			}
			
			if(rightPressed && paddleX < canvas.width-paddleWidth) {
				paddleX += 7;
			}
			else if(leftPressed && paddleX > 0) {
				paddleX -= 7;
			}
			
			x += dx;
			y += dy;
		}
		
		setInterval(draw, 10);
	</script>
</body>
</html>