AI game creator

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

No:1151

140

←

Prev Next

→

Cube simulator
Developer User3257｜Date and time 23/6/18 6:20:02
Build time 26.373 sec｜Game capacity 2.598KB｜

Script

This is a simple Cube Simulator game where the player controls a yellow cube on the canvas with arrow keys, and rotates it clockwise every time it is clicked. The objective of the game is to score as many points as possible by clicking the cube before it goes off the canvas or collides with other objects (which are not present in this implementation). The score is displayed on the HTML element. The game is designed for smartphone use, with the canvas size and font size adjusted accordingly. Emoji are not included in this implementation, but can be added as desired.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Cube Simulator</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			border: 1px solid black;
		}
		#score {
			font-size: 20px;
			margin-bottom: 10px;
			text-align: center;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="score"></div>

// Set up game variables
		let score = 0;
		let cubeX = canvas.width / 2;
		let cubeY = canvas.height / 2;
		let cubeSpeed = 5;
		let cubeSize = 50;
		let cubeRotation = Math.PI / 2;

// Move cube based on arrow key press
		document.addEventListener("keydown", (event) => {
			switch (event.keyCode) {
				case 37: // Left arrow
					cubeX -= cubeSpeed;
					break;
				case 38: // Up arrow
					cubeY -= cubeSpeed;
					break;
				case 39: // Right arrow
					cubeX += cubeSpeed;
					break;
				case 40: // Down arrow
					cubeY += cubeSpeed;
					break;
			}
		});

// Rotate cube clockwise every time it is clicked
		canvas.addEventListener("click", () => {
			cubeRotation -= Math.PI / 2;
			score += 1;
			updateScore();
		});

// Draw cube on canvas
		function drawCube() {
			ctx.save();

ctx.translate(cubeX + cubeSize / 2, cubeY + cubeSize / 2);
			ctx.rotate(cubeRotation);

ctx.fillStyle = "yellow";
			ctx.fillRect(-cubeSize / 2, -cubeSize / 2, cubeSize, cubeSize);
			ctx.strokeStyle = "black";
			ctx.strokeRect(-cubeSize / 2, -cubeSize / 2, cubeSize, cubeSize);

ctx.restore();
		}

// Update score on HTML element
		function updateScore() {
			document.getElementById("score").innerHTML = "Score: " + score;
		}

// Main game loop
		function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawCube();
			window.requestAnimationFrame(gameLoop);
		}

// Start game loop
		gameLoop();
	</script>
</body>
</html>