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

No:3227

1350

←

Prev Next

→

Action Rpg,Fantasy,Time Travel.
Developer User3675｜Date and time 23/6/24 7:38:25
Build time 34.331 sec｜Game capacity 3.319KB｜

Script

Time Travel Action RPG

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Time Travel Action RPG</title>
	<style>
		body{
			background-color: #444;
			color: #FFF;
			font-family: Arial;
			text-align: center;
		}
		canvas{
			border: solid 2px #FFF;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<h1>Time Travel Action RPG</h1>
	<canvas id="canvas" width="400" height="400"></canvas>
	<script>
		//variaveis globais
		var canvas, ctx, WIDTH, HEIGHT, FPS = 30;
		var player, enemy, timeTravel;
		var gameLoop;

//classe jogador
		function Player(x, y, img){
			this.img = new Image();
			this.img.src = img;
			this.x = x;
			this.y = y;
			this.speedX = 5;
			this.speedY = 5;
			this.width = 50;
			this.height = 50;
			this.draw = function(){
				ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
			}
			this.move = function(){
				if(up){
					this.y -= this.speedY;
				}else if(down){
					this.y += this.speedY;
				}
				if(left){
					this.x -= this.speedX;
				}else if(right){
					this.x += this.speedX;
				}
			}
		}

//classe inimigo
		function Enemy(x, y, img){
			this.img = new Image();
			this.img.src = img;
			this.x = x;
			this.y = y;
			this.width = 50;
			this.height = 50;
			this.draw = function(){
				ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
			}
			this.move = function(){
				if(player.x < this.x){
					this.x -= 1;
				}else if(player.x > this.x){
					this.x += 1;
				}
				if(player.y < this.y){
					this.y -= 1;
				}else if(player.y > this.y){
					this.y += 1;
				}
			}
		}

//classe viagem no tempo
		function TimeTravel(x, y, img){
			this.img = new Image();
			this.img.src = img;
			this.x = x;
			this.y = y;
			this.width = 50;
			this.height = 50;
			this.draw = function(){
				ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
			}
			this.collision = function(){
				if(Math.abs(player.x - this.x) < 50 && Math.abs(player.y - this.y) < 50){
					alert("Viajando no tempo...");
					player.x = 100;
					player.y = 100;
				}
			}
		}

//movimentação do jogador
		var up = false,
			down = false,
			left = false,
			right = false;

function movePlayer(e){
			switch(e.keyCode){
				case 38:
					up = true;
					break;
				case 40:
					down = true;
					break;
				case 37:
					left = true;
					break;
				case 39:
					right = true;
					break;
			}
		}

function stopPlayer(e){
			switch(e.keyCode){
				case 38:
					up = false;
					break;
				case 40:
					down = false;
					break;
				case 37:
					left = false;
					break;
				case 39:
					right = false;
					break;
			}
		}

//atualização do canvas
		function update(){
			ctx.clearRect(0, 0, WIDTH, HEIGHT);
			player.move();
			player.draw();
			enemy.move();
			enemy.draw();
			timeTravel.collision();
			timeTravel.draw();
		}

//função principal
		function main(){
			canvas = document.getElementById("canvas");
			ctx = canvas.getContext("2d");
			WIDTH = canvas.width;
			HEIGHT = canvas.height;

player = new Player(100, 100, "🧑");
			enemy = new Enemy(200, 200, "👺");
			timeTravel = new TimeTravel(300, 300, "⏳");

document.addEventListener("keydown", movePlayer);
			document.addEventListener("keyup", stopPlayer);

gameLoop = setInterval(update, 1000/FPS);
		}

main();
	</script>
</body>
</html>