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

No:2386

1919

←

Prev Next

→

Games in which the circle moves according to the f..ALL
Developer User3556｜Date and time 23/6/21 7:30:38
Build time 31.448 sec｜Game capacity 2.801KB｜

Script

十字キーで操作するゲーム

↑

↓

←

→

このゲームは、白い四角形の中にある赤い丸を十字キーで操作するものです。スマホでも横向きにすると操作ができます。左上が上、右上が右、左下が左、右下が下の方向に移動します。

←

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 type="text/css">
		body{
			background-color: #2ecc71;
			color: #fff;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 2em;
			text-align: center;
		}
		#gameboard{
			margin: 0 auto;
			width: 400px;
			height: 400px;
			background-color: #fff;
			position: relative;
		}
		#ball{
			width: 50px;
			height: 50px;
			border-radius: 25px;
			background-color: #e74c3c;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.controls{
			position: absolute;
			bottom: 0;
			width: 200px;
			margin: 0 auto;
			left: 0;
			right: 0;
			text-align: center;
		}
		.control{
			display: inline-block;
			width: 40px;
			height: 40px;
			border-radius: 20px;
			background-color: #fff;
			margin: 10px;
			cursor: pointer;
			font-size: 1em;
			line-height: 40px;
			color: #2ecc71;
		}
		.control:hover{
			background-color: #2ecc71;
			color: #fff;
		}
	</style>
</head>
<body>
	<h1>十字キーで操作するゲーム</h1>

var ballTop = parseInt(ball.style.top);
		var ballLeft = parseInt(ball.style.left);

function moveUp(){
			ballTop -= 10;
			ball.style.top = ballTop + "px";
		}

function moveDown(){
			ballTop += 10;
			ball.style.top = ballTop + "px";
		}

function moveLeft(){
			ballLeft -= 10;
			ball.style.left = ballLeft + "px";
		}

function moveRight(){
			ballLeft += 10;
			ball.style.left = ballLeft + "px";
		}

up.addEventListener("click", moveUp);
		down.addEventListener("click", moveDown);
		left.addEventListener("click", moveLeft);
		right.addEventListener("click", moveRight);