Samurai Quest

by RocketPanther31

185 lines3.2 KB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Samurai Quest</title>
<style>
body{margin:0;background:#111;overflow:hidden}
canvas{display:block;margin:auto;background:#223}
</style>
</head>
<body>
<canvas id="game" width="1000" height="500"></canvas>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

const GROUND = 420;
const gravity = 0.8;
const keys = {};

document.addEventListener("keydown",e=>keys[e.key]=true);
document.addEventListener("keyup",e=>keys[e.key]=false);

let level = 1;

const levels = [
 {name:"Village", hp:60, speed:1.5},
 {name:"Forest", hp:90, speed:2},
 {name:"Temple", hp:120, speed:2.5},
 {name:"Castle", hp:170, speed:3},
 {name:"Shogun Boss", hp:300, speed:3.5}
];

const player = {
 x:100,y:GROUND,w:40,h:90,
 hp:100,vy:0,facing:1,
 attack:0
};

const enemy = {
 x:800,y:GROUND,hp:60,
 speed:1.5,cooldown:0
};

function loadLevel(){
 let d = levels[level-1];
 enemy.hp = d.hp;
 enemy.speed = d.speed;
 enemy.x = 800;
 player.x = 100;
}

function attackDamage(){
 if(player.attack===1) return 5;
 if(player.attack===2) return 12;
 return 0;
}

function updatePlayer(){
 if(keys["a"]){player.x-=5;player.facing=-1;}
 if(keys["d"]){player.x+=5;player.facing=1;}

 if(keys[" "] && player.y>=GROUND){
   player.vy=-13;
 }

 if(keys["j"]) player.attack=1;
 else if(keys["k"]) player.attack=2;
 else player.attack=0;

 player.vy += gravity;
 player.y += player.vy;

 if(player.y>GROUND){
   player.y=GROUND;
   player.vy=0;
 }
}

function updateEnemy(){
 const dist=Math.abs(player.x-enemy.x);

 if(player.x<enemy.x) enemy.x-=enemy.speed;
 else enemy.x+=enemy.speed;

 if(player.attack && dist<90){
   enemy.hp -= attackDamage()*0.2;
 }

 enemy.cooldown--;

 if(dist<70 && enemy.cooldown<=0){
   player.hp -= 8;
   enemy.cooldown=60;
 }
}

function nextLevel(){
 level++;

 if(level>levels.length){
   alert("You Win!");
   level=levels.length;
   return;
 }

 loadLevel();
}

function drawCharacter(x,y,color,facing){
 ctx.fillStyle=color;

 ctx.beginPath();
 ctx.arc(x+20,y-70,15,0,Math.PI*2);
 ctx.fill();

 ctx.fillRect(x+8,y-55,24,45);
 ctx.fillRect(x+8,y-10,8,20);
 ctx.fillRect(x+24,y-10,8,20);

 ctx.strokeStyle="silver";
 ctx.lineWidth=4;
 ctx.beginPath();

 if(facing===1){
   ctx.moveTo(x+30,y-35);
   ctx.lineTo(x+70,y-45);
 }else{
   ctx.moveTo(x+10,y-35);
   ctx.lineTo(x-30,y-45);
 }

 ctx.stroke();
}

function draw(){
 ctx.clearRect(0,0,1000,500);

 ctx.fillStyle="#2f7";
 ctx.fillRect(0,450,1000,50);

 ctx.fillStyle="white";
 ctx.font="24px Arial";
 ctx.fillText("Level "+level+" - "+levels[level-1].name,20,30);

 ctx.fillStyle="red";
 ctx.fillRect(20,50,300,20);
 ctx.fillRect(680,50,300,20);

 ctx.fillStyle="lime";
 ctx.fillRect(20,50,player.hp*3,20);
 ctx.fillRect(680,50,enemy.hp,20);

 drawCharacter(player.x,player.y,"black",player.facing);
 drawCharacter(enemy.x,enemy.y,"darkred",-1);
}

function loop(){

 if(player.hp>0 && enemy.hp>0){
   updatePlayer();
   updateEnemy();
 }

 if(enemy.hp<=0){
   nextLevel();
 }

 draw();

 if(player.hp<=0){
   ctx.fillStyle="white";
   ctx.font="60px Arial";
   ctx.fillText("GAME OVER",300,250);
 }

 requestAnimationFrame(loop);
}

loadLevel();
loop();
</script>
</body>
</html>

Game Source: Samurai Quest

Creator: RocketPanther31

Libraries: none

Complexity: moderate (185 lines, 3.2 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: samurai-quest-rocketpanther31" to link back to the original. Then publish at arcadelab.ai/publish.