Schrodingers cat (quantum mechanics thought experiment)'s game

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

No:3417

1880

←

Prev Next

→

Schrodingers cat (quantum mechanics thought experi..ALL
Developer User3698｜Date and time 23/6/25 2:02:34
Build time 19.937 sec｜Game capacity 1.633KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Schrodinger's Cat</title>
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		canvas{
			width: 100%;
			height: 100%;
			background-color: #000;
		}
	</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
	//canvasの設定
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var width = canvas.width = window.innerWidth;
	var height = canvas.height = window.innerHeight;

//画像の読み込み
	var catImg = new Image();
	catImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/cat-face_1f431.png";

//キャラクターの初期設定
	var cat = {
		x: width/2,
		y: height/2,
		size: 40,
		color: "#fff"
	}

//タッチスクリーン操作の設定
	canvas.addEventListener("touchstart", function(evt){
		cat.color = "#f00"; //赤色に色を変える
		moveCat(evt.touches[0].clientX, evt.touches[0].clientY); //タッチした場所に移動
	});

canvas.addEventListener("touchmove", function(evt){
		moveCat(evt.touches[0].clientX, evt.touches[0].clientY); //指を動かした場所に移動
	});

//キャラクターの移動関数
	function moveCat(x, y){
		cat.x = x;
		cat.y = y;
	}

//ゲームループ
	function loop(){
		//キャンバスをクリア
		ctx.clearRect(0, 0, width, height);
		//キャラクターを描画
		ctx.drawImage(catImg, cat.x-cat.size/2, cat.y-cat.size/2, cat.size, cat.size);
		//キャラクターの色を元に戻す
		cat.color = "#fff";
		//ループを繰り返す
		requestAnimationFrame(loop);
	}

//ループを開始
	loop();
</script>
</body>
</html>