スマホを傾けて遊ぶゲームスマホの傾きを認識して遊ぶゲームを作ってください's game

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

No:3623

4219

←

Prev Next

→

スマホを傾けて遊ぶゲームスマホの傾きを認識して遊ぶゲームを作ってください
Developer もちきなこ｜Date and time 23/6/25 22:20:17
Build time 39.774 sec｜Game capacity 3.986KB｜

Script

以下はスマホを傾けて遊ぶゲームのサンプルコードです。このゲームでは、ボールを操作して足場を上がっていくことが目的です。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

以下はスマホを傾けて遊ぶゲームのサンプルコードです。このゲームでは、ボールを操作して足場を上がっていくことが目的です。

<!DOCTYPE html>
<html>
<head>
	<title>傾けてゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000;
		}

canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// ゲームオブジェクト
		var game = {};

// 初期化
		game.init = function(){
			this.canvas = document.getElementById("canvas");
			this.context = this.canvas.getContext("2d");
			this.width = window.innerWidth;
			this.height = window.innerHeight;
			this.canvas.width = this.width;
			this.canvas.height = this.height;
			this.ball = {
				x: this.width / 2,
				y: this.height / 2,
				radius: 20,
				speed: 5,
				angle: 0
			};
			this.platforms = [];
			for(var i=0; i<10; i++){
				this.platforms.push({
					x: this.width * Math.random(),
					y: this.height * Math.random(),
					width: 100,
					height: 10
				});
			}
			this.score = 0;
			this.draw();
		};

// 描画
		game.draw = function(){
			// 背景を描画
			this.context.fillStyle = "#000";
			this.context.fillRect(0, 0, this.width, this.height);
			// ボールを描画
			this.context.fillStyle = "#fff";
			this.context.beginPath();
			this.context.arc(this.ball.x, this.ball.y, this.ball.radius, 0, Math.PI * 2);
			this.context.fill();
			// 足場を描画
			for(var i=0; i<this.platforms.length; i++){
				this.context.fillStyle = "#fff";
				this.context.fillRect(this.platforms[i].x, this.platforms[i].y, this.platforms[i].width, this.platforms[i].height);
			}
			// スコアを描画
			this.context.fillStyle = "#fff";
			this.context.font = "24px Arial";
			this.context.textAlign = "right";
			this.context.fillText("Score: " + this.score, this.width - 20, 40);
		};

// 更新
		game.update = function(){
			// ボールの移動
			this.ball.x += this.ball.speed * Math.cos(this.ball.angle);
			this.ball.y += this.ball.speed * Math.sin(this.ball.angle);
			// ボールと足場の衝突判定
			for(var i=0; i<this.platforms.length; i++){
				if(this.ball.x + this.ball.radius >= this.platforms[i].x
					&& this.ball.x - this.ball.radius <= this.platforms[i].x + this.platforms[i].width
					&& this.ball.y + this.ball.radius >= this.platforms[i].y
					&& this.ball.y - this.ball.radius <= this.platforms[i].y + this.platforms[i].height){
					this.score++;
					this.ball.speed = 5;
					this.ball.angle = Math.PI * Math.random();
					this.ball.angle *= Math.random() < 0.5 ? -1 : 1;
					this.ball.x = this.width / 2;
					this.ball.y = this.height / 2;
					this.platforms[i].x = this.width * Math.random();
					this.platforms[i].y = -this.platforms[i].height;
				}
			}
			// ボールの速度を減速
			this.ball.speed *= 0.99;
			// ボールが画面外に出たらゲームオーバー
			if(this.ball.x < -this.ball.radius || this.ball.x > this.width + this.ball.radius
				|| this.ball.y < -this.ball.radius || this.ball.y > this.height + this.ball.radius){
				alert("Game Over! Score: " + this.score);
				location.reload();
			}
			// 描画
			this.draw();
			// 繰り返し
			window.requestAnimationFrame(this.update.bind(this));
		};

// デバイスの傾きを取得
		window.addEventListener("deviceorientation", function(event){
			// ボールの角度を変更
			game.ball.angle += event.gamma * 0.02;
			// ボールの速度を加速
			game.ball.speed += Math.abs(event.beta);
			// 回転角度の範囲を制限
			if(game.ball.angle < -Math.PI){
				game.ball.angle += Math.PI * 2;
			}
			if(game.ball.angle > Math.PI){
				game.ball.angle -= Math.PI * 2;
			}
		});

// 初期化
		game.init();
		// 更新
		game.update();
	</script>
</body>
</html>