AI game creator

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

No:1533

1676

←

Prev Next

→

game creation
Developer User3358｜Date and time 23/6/18 18:13:10
Build time 24.292 sec｜Game capacity 2.063KB｜

Script

Score: 0

←

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>ゲームクリエイト</title>
	<style>
		canvas {
			border: 1px solid black;
		}
		#score {
			font-size: 20px;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="300" height="400"></canvas>
	<div id="score">Score: 0</div>
	<button id="start">Start</button>
	<button id="stop">Stop</button>
	<script>
		// ゲームの概要：ブロックを落として積み上げる、積み上げたブロックの数がスコアになる
		let canvas = document.getElementById('canvas');
		let ctx = canvas.getContext('2d');
		let score = 0;
		let block;
		let blockWidth = 50;
		let blockHeight = 50;
		let gap = 5;
		let blockSpeed = 1;
		let blockInterval = 1000;
		let gameInterval;
		let isPlaying = false;
		
		function createBlock() {
			let x = Math.floor(Math.random() * (canvas.width - blockWidth));
			block = {
				x: x,
				y: 0,
				width: blockWidth,
				height: blockHeight,
				color: '#' + Math.random().toString(16).slice(2, 8)
			};
		}
		
		function drawBlock() {
			ctx.fillStyle = block.color;
			ctx.fillRect(block.x, block.y, block.width, block.height);
		}
		
		function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}
		
		function updateScore() {
			score++;
			document.getElementById('score').textContent = 'Score: ' + score;
		}
		
		function draw() {
			if (isPlaying) {
				clearCanvas();
				drawBlock();
				block.y += blockSpeed;
				if (block.y >= canvas.height - blockHeight) {
					updateScore();
					createBlock();
				}
			}
		}
		
		function startGame() {
			isPlaying = true;
			gameInterval = setInterval(draw, blockInterval);
			createBlock();
		}
		
		function stopGame() {
			isPlaying = false;
			clearInterval(gameInterval);
			clearCanvas();
			score = 0;
			document.getElementById('score').textContent = 'Score: ' + score;
		}
		
		document.getElementById('start').addEventListener('click', startGame);
		document.getElementById('stop').addEventListener('click', stopGame);
	</script>
</body>
</html>