Make a Game with html , css and js:
Source code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<style>
body {
margin:0;
padding:0;
}
canvas{
background-color:#000;
position:fixed;
}
p{
position:fixed;
color:#fff;
top:0;
left:0;
font-weight:bold;
}
#player{
height:30px;
width:30px;
border-radius:100%;
background-color:red;
position:fixed;
bottom:50px;
left:50px;
}
#card{
display:none;
}
#card{
height:100vh;
width:100vw;
display:flex;
align-items:center;
justify-content:center;
}
.card{
height:360px;
width:300px;
background-color:#dadada;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
border-radius:20px;
}
.card p{
color:#000;
position:relative;
font-size:20px;
font-weight:bold;
}
#btn{
font-size:20px;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
height:40px;
width:100px;
background-color:red;
border-radius:8px;
}
#sco{
display:none;
}
</style>
</head>
<body id ="b">
<canvas id="canvas"></canvas>
<p id="p"></p>
<div id="player"></div>
<div id="card">
<div class="card">
<h1>Game Over</h1>
<p id="sco">Score :</p>
<div id ="btn">Restart</div>
</div>
</div>
<script>
window.onload = () => {
const cnv = document.getElementById("canvas");
const ctx = cnv.getContext("2d");
cnv.height = window.innerHeight;
cnv.width = window.innerWidth;
let enemies = [];
var dur = 200;
var ok = confirm("Are you using mobile ?")
if(ok != true){
dur = 100;
}
alert(`Instructions to play :-
1. Don't collide with meteor's head
2. Move your finger or mouse to control red circle's position
3 Your task is to prevent red circle from colliding with meteors`)
var posX = 50;
var posY = cnv.height -50;
let alive = true;
let score = 0;
document.getElementById("player").style.bottom = posY;
document.getElementById("player").style.left = posX;
let b = document.getElementById("b");
document.getElementById("btn").addEventListener("click",restart)
function restart(){
cnv.style.display = "block";
document.getElementById("card").style.display = "none";
document.getElementById("player").style.display = "block";
document.getElementById("p").style.display = "block";
score = 0;
enemies = [];
alive = true;
requestAnimationFrame(animate)
}
var {random,round,floor,PI} = Math;
function enemy(x,y,color,radius){
this.x = x;
this.y = y;
this.color = color;
this.radius = radius;
this.m = 0;
this.createEnemy = () =>{
ctx.save();
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x,this.y,this.radius,0,2*PI);
ctx.fill();
ctx.restore();
}
this.update = () =>{
this.y+=3;
this.m += random() * 1 - 0.5;
this.x+=this.m;
}
}
// End game
function gameEnd(){
cnv.style.display = "none";
document.getElementById("card").style.display = "flex";
document.getElementById("sco").innerHTML = "Score : "+ score ;
document.getElementById("player").style.display = "none";
ctx.clearRect(0,0,cnv.height,cnv.width);
document.getElementById("p").style.display = "none";
document.getElementById("sco").style.display = "block";
}
/*********** *********/
/*Score*/
function scores(){
if(alive == true){
score+=1;
}
else{
score+=0;
} document.getElementById("p").innerHTML = "Score : "+score;
}
setInterval(scores,100)
/****** *******/
b.addEventListener("touchmove",getcord)
b.addEventListener("touchstart",getcord)
b.addEventListener("touchcancel",getcord)
b.addEventListener("mousemove",getcord)
b.addEventListener("mousedown",getcord)
b.addEventListener("mouseup",getcord)
function getcord(e){
if(e.type == "touchstart" || e.type== "touchmove" || e.type == "touchcancel"){
posX = e.touches[0].clientX;
posY = e.touches[0].clientY;
/*prevent from going player out*/
if (posY <0){
posY = 0;
}
if(posY >=cnv.height){
posY = cnv.height;
}
}
else{
posX = e.clientX;
posY = e.clientY;
}
document.getElementById("player").style.top = (posY-15) +"px";
document.getElementById("player").style.left = (posX-15) + "px";
}
function atk(){
for(i=0;i<1;i++){
enemies.push(new enemy(random()*cnv.width,0,"red",3))
}
}
function check(){
for(let i = 0; i< enemies.length; i++){
if(enemies[i].x > posX-15 && enemies[i].x < posX+15 && enemies[i].y > posY-15 && enemies[i].y < posY+15 ){
enemies = [];
alive = false;
gameEnd();
}
}
}
setInterval(atk,dur)
function animate(){
ctx.fillStyle = "rgb(0,0,0,0.1)";
ctx.fillRect(0,0,cnv.width,cnv.height);
for(let i = 0;i < enemies.length;i++){
enemies[i].createEnemy();
enemies[i].update();
if(enemies[i].y >= cnv.height){
enemies.splice(1,i)
}
check();
}
if(alive == true){
requestAnimationFrame(animate);
}
}
animate();
window.addEventListener("resize",()=>{
cnv.width = innerWidth;
cnv.height = innerHeight;
});
}
</script>
</body>
</html>
*****
Plz like and comment here if you like it.