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

No:3278

4477

←

Prev Next

→

Make a game in the style of Mortal Kombat 3, but t..ALL
Developer User3682｜Date and time 23/6/24 11:09:32
Build time 70.728 sec｜Game capacity 6.885KB｜

Script

Jedi vs Sith Lightsaber Duel

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Jedi vs Sith Lightsaber Duel</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: Arial, sans-serif;
		}
		canvas {
			display: block;
			margin: 0 auto;
			background-color: black;
		}
		h1 {
			text-align: center;
			color: white;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div>
		<h1>Jedi vs Sith Lightsaber Duel</h1>
	</div>
	<canvas id="gameCanvas" width="800" height="600"></canvas>
	<script>
		const canvas = document.getElementById('gameCanvas');
		const context = canvas.getContext('2d');
		const width = canvas.width;
		const height = canvas.height;
		const player1 = {
			name: 'Jedi',
			x: 150,
			y: height/2,
			width: 60,
			height: 150,
			speed: 10,
			image: new Image(),
			frameIndex: 0,
			tickCount: 0,
			ticksPerFrame: 10,
			numberOfFrames: 3,
			direction: 'right',
			health: 100,
			attackPower: 10
		};
		const player2 = {
			name: 'Sith',
			x: width - 200,
			y: height/2,
			width: 60,
			height: 150,
			speed: 10,
			image: new Image(),
			frameIndex: 0,
			tickCount: 0,
			ticksPerFrame: 10,
			numberOfFrames: 3,
			direction: 'left',
			health: 100,
			attackPower: 10
		};
		const lightsaber = {
			x: 0,
			y: 0,
			width: 100,
			height: 10,
			color: 'white',
			speed: 20,
			direction: ''
		};
		let gameLoop;
		let keysPressed = {};
		let attack1 = false;
		let attack2 = false;

player1.image.src = 'jedi.png';
		player2.image.src = 'sith.png';

document.addEventListener('keydown', (event) => {
			keysPressed[event.key] = true;
		});

document.addEventListener('keyup', (event) => {
			delete keysPressed[event.key];
			attack1 = false;
			attack2 = false;
		});

if (keysPressed['j']) {
				player2.x -= player2.speed;
				player2.direction = 'left';
			}
			if (keysPressed['l']) {
				player2.x += player2.speed;
				player2.direction = 'right';
			}
			if (keysPressed['i']) {
				player2.y -= player2.speed;
			}
			if (keysPressed['k']) {
				player2.y += player2.speed;
			}
			if (keysPressed['z']) {
				attack2 = true;
			}

//check bounds
			if (player1.x < 0) {
				player1.x = 0;
			}
			if (player1.x + player1.width > width) {
				player1.x = width - player1.width;
			}
			if (player1.y < 0) {
				player1.y = 0;
			}
			if (player1.y + player1.height > height) {
				player1.y = height - player1.height;
			}

if (player2.x < 0) {
				player2.x = 0;
			}
			if (player2.x + player2.width > width) {
				player2.x = width - player2.width;
			}
			if (player2.y < 0) {
				player2.y = 0;
			}
			if (player2.y + player2.height > height) {
				player2.y = height - player2.height;
			}

//attack
			if (attack1) {
				lightsaber.x = player1.x + player1.width;
				lightsaber.y = player1.y + (player1.height / 2) - (lightsaber.height / 2);
				lightsaber.direction = 'right';
			}
			if (attack2) {
				lightsaber.x = player2.x - lightsaber.width;
				lightsaber.y = player2.y + (player2.height / 2) - (lightsaber.height / 2);
				lightsaber.direction = 'left';
			}

//collision detection
			if (lightsaber.direction == 'right' &&
				lightsaber.x + lightsaber.width >= player2.x &&
				lightsaber.y + lightsaber.height >= player2.y &&
				lightsaber.y <= player2.y + player2.height) {
					player2.health -= player1.attackPower;
					if (player2.health < 0) {
						player2.health = 0;
					}
					attack1 = false;
			}
			if (lightsaber.direction == 'left' &&
				lightsaber.x <= player1.x + player1.width &&
				lightsaber.y + lightsaber.height >= player1.y &&
				lightsaber.y <= player1.y + player1.height) {
					player1.health -= player2.attackPower;
					if (player1.health < 0) {
						player1.health = 0;
					}
					attack2 = false;
			}

//animation
			player1.tickCount++;
			if (player1.tickCount > player1.ticksPerFrame) {
				player1.tickCount = 0;
				player1.frameIndex++;
				if (player1.frameIndex >= player1.numberOfFrames) {
					player1.frameIndex = 0;
				}
			}

player2.tickCount++;
			if (player2.tickCount > player2.ticksPerFrame) {
				player2.tickCount = 0;
				player2.frameIndex++;
				if (player2.frameIndex >= player2.numberOfFrames) {
					player2.frameIndex = 0;
				}
			}
		}

function draw() {
			context.clearRect(0, 0, width, height);

//lightsaber
			context.fillStyle = lightsaber.color;
			context.fillRect(lightsaber.x, lightsaber.y, lightsaber.width, lightsaber.height);

//players
			if (player1.direction == 'right') {
				context.drawImage(player1.image, 
					player1.frameIndex * player1.width, 
					0, 
					player1.width, 
					player1.height, 
					player1.x, 
					player1.y, 
					player1.width, 
					player1.height
				);
			} else {
				context.translate(player2.width, 0);
				context.scale(-1, 1);
				context.drawImage(player1.image, 
					player1.frameIndex * player1.width, 
					0, 
					player1.width, 
					player1.height, 
					(-1) * (player1.x + player1.width), 
					player1.y, 
					player1.width, 
					player1.height
				);
				context.setTransform(1, 0, 0, 1, 0, 0);
			}

if (player2.direction == 'left') {
				context.drawImage(player2.image, 
					player2.frameIndex * player2.width, 
					0, 
					player2.width, 
					player2.height, 
					player2.x, 
					player2.y, 
					player2.width, 
					player2.height
				);
			} else {
				context.translate(player2.width, 0);
				context.scale(-1, 1);
				context.drawImage(player2.image, 
					player2.frameIndex * player2.width, 
					0, 
					player2.width, 
					player2.height, 
					(-1) * (player2.x + player2.width), 
					player2.y, 
					player2.width, 
					player2.height
				);
				context.setTransform(1, 0, 0, 1, 0, 0);
			}

//health bars
			context.fillStyle = 'white';
			context.fillRect(20, 20, player1.health, 10);
			context.fillRect(width - 120, 20, player2.health, 10);
			context.strokeStyle = 'white';
			context.strokeRect(20, 20, 100, 10);
			context.strokeRect(width - 120, 20, 100, 10);

//game over
			if (player1.health <= 0) {
				clearInterval(gameLoop);
				context.fillStyle = 'white';
				context.font = '48px Arial';
				context.fillText(player2.name + ' Wins!', width/2 - 120, height/2);
			}
			if (player2.health <= 0) {
				clearInterval(gameLoop);
				context.fillStyle = 'white';
				context.font = '48px Arial';
				context.fillText(player1.name + ' Wins!', width/2 - 120, height/2);
			}
		}

gameLoop = setInterval(() => {
			update();
			draw();
		}, 1000/60);
	</script>
</body>
</html>