Take a fish with an x-ray.'s game

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

No:3932

1414

←

Prev Next

→

Take a fish with an x-ray.
Developer sayaensm｜Date and time 23/6/26 23:58:23
Build time 26.054 sec｜Game capacity 2.171KB｜

Script

というゲームを作ります。プレイヤーはスマホのタッチ操作で釣竿を動かし、レントゲン技術を使って魚を捕まえることが目的です。以下が実装したHTMLファイルのコードです。JavaScriptの部分はscriptタグの中に記述しています。

このゲームでは、画面をタッチすることで釣竿を操作し、レントゲン技術を使って魚を捕まえることが目的となっています。魚の画像には絵文字を使用しており、手軽に楽しめるゲームとなっています。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

というゲームを作ります。プレイヤーはスマホのタッチ操作で釣竿を動かし、レントゲン技術を使って魚を捕まえることが目的です。

以下が実装したHTMLファイルのコードです。JavaScriptの部分はscriptタグの中に記述しています。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>レントゲンで魚をとる</title>
	<style>
		body {
			background-color: #99ccff;
			margin: 0;
			padding: 0;
		}

#canvas {
			display: block;
			margin: auto;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	
	<script>
		// ゲームの設定
		const width = 480; // 画面の幅
		const height = 640; // 画面の高さ
		const fishImage = new Image(); // 魚の画像データ
		fishImage.src = 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/72/apple/271/fish_1f41f.png'; // 魚の画像URL

// ゲームの初期化
		const canvas = document.getElementById('canvas');
		const context = canvas.getContext('2d');

canvas.width = width;
		canvas.height = height;

let fishX = width / 2;
		let fishY = height / 2;

// ゲームのメインループ
		function update() {
			context.clearRect(0, 0, width, height);

drawFish();

requestAnimationFrame(update);
		}

// 魚を描画する処理
		function drawFish() {
			context.drawImage(fishImage, fishX - 32, fishY - 32, 64, 64);
		}

// タッチ操作の処理
		canvas.addEventListener('touchstart', function(e) {
			fishX = e.changedTouches[0].pageX;
			fishY = e.changedTouches[0].pageY;
		});

canvas.addEventListener('touchmove', function(e) {
			fishX = e.changedTouches[0].pageX;
			fishY = e.changedTouches[0].pageY;
		});

// ゲームの開始
		fishImage.addEventListener('load', function() {
			requestAnimationFrame(update);
		});
	</script>
</body>
</html>
```