AI game creator

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

No:3319

2066

←

Prev Next

→

alpha blending
Developer User3655｜Date and time 23/6/24 13:07:08
Build time 20.535 sec｜Game capacity 1.929KB｜

Script

の処理も実装するように心がけると、よりリッチなUIになるでしょう。

Click to move the character

←

Prev　Next

→ 　

Back　

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

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

の処理も実装するように心がけると、よりリッチなUIになるでしょう。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ゲーム</title>
	<style>
		canvas{
			border: 1px solid black;
			margin: 0 auto;
			display: block;
		}
		p{
			text-align: center;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="400" height="600"></canvas>
	<p>Click to move the character</p>

//アルファブレンディング処理の設定
		const context = document.getElementById('gameCanvas').getContext('2d');
		context.globalCompositeOperation = 'lighter';

//画像の読み込み
		const characterImage = new Image();
		characterImage.src = 'https://i.imgur.com/YuDqMbo.png';
		const backgroundImage = new Image();
		backgroundImage.src = 'https://i.imgur.com/b01hWms.png';

//キャラクターの初期位置
		let characterX = 200;
		let characterY = 300;

//背景スクロール用の変数
		let backgroundY = 0;

//キャラクターの移動処理
		document.addEventListener('click', function(event) {
			characterX = event.clientX - 25; //クリック位置にキャラクターの中心を合わせるために25を引く
			characterY = event.clientY - 25;
		});

//ゲームループの設定
		setInterval(function() {
			update();
			draw();
		}, 16);

function update() {
			//背景のスクロール処理
			backgroundY += 1;
			if(backgroundY > 600){
				backgroundY = 0;
			}
		}

function draw() {
			//背景の描画
			context.drawImage(backgroundImage, 0, backgroundY - 600, 400, 600);
			context.drawImage(backgroundImage, 0, backgroundY, 400, 600);

//キャラクターの描画
			context.drawImage(characterImage, characterX, characterY);

//スコアの描画
			context.fillStyle = 'white';
			context.font = 'bold 20px sans-serif';
			context.fillText('Score: 0', 10, 30);
		}

</script>
</body>
</html>