HTML
<!--
This code is not good and not bad😂
50-50
There are three levels
1.Easy
2.Medium
3.Hard
Background music credits goes to "http://k003.kiwi6.com"
Thanks Prashanth bhaiya for fixing a little bug
i used soft ui from my prvs codes .....
Hope you enjoy
Bug Reports and suggestions are most welcome
-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="loader">Loading...</div>
<title>Page Title</title>
</head>
<body onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" oncontextmenu="return false">
<div id="aiLevel" class="levPage">
<div class="levels">
<div onclick="setLevel(0.024,3)" id = "easyLevel" class="lev">Easy</div>
<div onclick="setLevel(0.23,4)" id = "mediumLevel" class="lev">Medium</div>
<div onclick="setLevel(1,5)" id = "hardLevel" class="lev">Hard</div>
</div>
</div>
<canvas></canvas>
<div id="result">
<p id="data">Match Is Tie</p>
<button onclick="hide_result()">Ok</button>
</div>
<audio id="pop">
<source src="http://k003.kiwi6.com/hotlink/8p93ocrvmw/4B_X_AAZAR_-_Pop_Dat.mp3"></source>
</audio>
<audio id="pop1">
<source src="http://k003.kiwi6.com/hotlink/wh7j0ca3jd/TRAP_-_The_Legend_Of_Zelda_-_Saria_s_Turn_up_GTA_Remix_.mp3"></source>
- </audio>
<audio id="pop2">
<source src="http://k003.kiwi6.com/hotlink/wl5s7t819o/marshmello_-_FinD_Me_Bass_Boosted_.mp3"></source>
</audio>
<audio id="pop3">
<source src="http://k003.kiwi6.com/hotlink/4knbi5ayu9/Marshmello_-_Blocks_Official_Music_Video_.mp3"></source>
</audio>
</body>
</html>
CSS
body {
max-height:100vh;
max-width:100vw;
overflow:hidden;
background:#ececec;
}
#aiLevel{
display:none;
}
.levPage{
position:absolute;
top:0;left:0;
width:100%;height:100%;
background:#ececec;
}
.lev{
width:90%;background:#ececec;
padding:20px 2%;
margin:20px 0px;
margin-left:3.5%;
border-radius:5px;
text-align:center;
font-weight:bold;
box-shadow: 6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-webkit-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-moz-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-ms-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
}
.lev:hover{
box-shadow:inset 6px 6px 12px rgba(0,0,0,0.1),
inset -6px -6px 12px rgba(255,255,255,0.8);
-webkit-box-shadow:inset 6px 6px 12px rgba(0,0,0,0.1),
inset -6px -6px 12px rgba(255,255,255,0.8);
-moz-box-shadow:inset 6px 6px 12px rgba(0,0,0,0.1),
inset -6px -6px 12px rgba(255,255,255,0.8);
-ms-box-shadow:inset 6px 6px 12px rgba(0,0,0,0.1),
inset -6px -6px 12px rgba(255,255,255,0.8);
}
.levels{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:100%;
}
canvas{
background:#efefef;
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
box-shadow: 6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-webkit-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-moz-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-ms-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
display:none;
}
#result{
position:absolute;
background:#ececec;
width:90%;height:auto;
padding:20px 10px;
box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-webkit-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-moz-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-ms-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
border-radius:10px;
top:50%;left:-50%;
transform:translate(-50%,-50%);
visibility:hidden;
transition:0.5s;
}
#result p{
font-weight:600;
font-size:25px;
text-align:center;
}
#result button{
outline:none;border:none;
padding:10px 50px;float:right;
font-weight:600;background:#ececec;
box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-webkit-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-moz-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-ms-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
}
#result button:hover{
box-shadow:inset 6px 6px 12px rgba(0,0,0,0.1),
inset -6px -6px 12px rgba(255,255,255,0.8);
-webkit-box-shadow:inset 6px 6px 12px rgba(0,0,0,0.1),
inset -6px -6px 12px rgba(255,255,255,0.8);
-moz-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
inset -6px -6px 12px rgba(255,255,255,0.8);
-ms-box-shadow:inset 6px 6px 12px rgba(0,0,0,0.1),
inset -6px -6px 12px rgba(255,255,255,0.8);
}
#loader{
position:absolute;
background-size:100%;
width:100%;
height:50px;
background:#ececec;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-webkit-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-moz-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
-ms-box-shadow:6px 6px 12px rgba(0,0,0,0.1),
-6px -6px 12px rgba(255,255,255,0.8);
animation:loading 1s infinite ease-in-out;
background-image: linear-gradient(90deg, #ddd 100px, rgba(229, 229, 229, 1) 100px, #eee 90px);
display:flex;
justify-content:center;
align-items:center;
font-weight:bold;
}
@keyframes loading {
to{background-position:350px;}
}
Js
let ctx,cvs,w,h,player,ai,ball,gameOver=false,start=false,aiScore=0,aiLevel = 0.034,plyScore=0,board,dx=4,dy=4;
const {pow,abs,random,floor} = Math;
const setLevel =(e,vel)=>{
if(!gameOver){
start = true;
aiLevel = e;
dx = vel;dy=vel;
document.querySelector("#aiLevel").style.display = "none"; document.querySelector("canvas").style.display ="block";
init();
let arr= [pop,pop1,pop2,pop3];
arr[floor(random()*arr.length)].play();
}
}
window.onload= ()=>document.querySelector("#aiLevel").style.display ="block";loader.style.display="none";
const init =()=>{
cvs = document.querySelector("canvas");
w = cvs.width = window.innerWidth/1.2 || innerWidth/1.2;
h = cvs.height = window.innerHeight/1.2 || innerHeight/1.2;
ctx = cvs.getContext("2d");
ai = new Player (w/2-35,10);
player = new Player(w/2-35,h-20);
ball = new Ball(w/2,h/2);
board = new ScoreBoard(aiScore,plyScore);
requestAnimationFrame(draw);
}
const draw =()=>{
if(!gameOver){
requestAnimationFrame(draw);
ctx.clearRect(0,0,w,h);
player.show();
ai.show();
board.show();
ball.show();
ball.update();
ai.update();
if (collision(player, ball)) {ball.y=player.y-ball.r;ball.velY *=-1; }
else if(collision(ai,ball)){ball.y=ai.y+ai.h+ball.r;ball.velY *=-1 };
if(aiScore>5||plyScore>5)gameover();
}
}
window.ontouchmove=(e)=>{
if(start)player.x= parseInt(e.changedTouches[0].clientX) - cvs.getBoundingClientRect().top - document.documentElement.scrollTop-(player.w/2);
}
let collision=(a,b)=>{
let distX =abs(b.x - a.x-a.w/2);
let distY =abs(b.y - a.y-a.h/2);
if(distX>(a.w/2+b.r))return false;
if(distY>(a.h/2+b.r))return false;
if(distX <= (a.w/2))return true;
if (distY <= (a.h/2))return true;
return (pow(distX-a.w/2,2)+pow(distY-a.h/2,2)<=(pow(b.r,2)));
}
const gameover =()=>{
gameOver = true;
start = false; document.querySelector("canvas").style.display ="none";
document.querySelector("#aiLevel").style.display = "block";
show_result("Game Over!!\nHope u enjoy it");
}
class Player{
constructor(x,y){
this.x = x;
this.y = y;
this.w = 40;
this.h = 4;
}
show(){
ctx.fillStyle="#000";
ctx.fillRect(this.x,this.y,this.w,this.h);
}
update(){
this.x += (ball.x - (this.x +this.w/2))*aiLevel;
}
}
class Ball{
constructor(x,y){
this.x = x;
this.y = y;
this.r = 4;
this.velX = dx;
this.velY = dy;
}
show(){
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(this.x,this.y,this.r,2*Math.PI,false);
ctx.fill();
ctx.closePath();
}
update(){
this.x+=this.velX;
this.y+=this.velY;
if(this.x+this.r>w)this.velX*=-1;
else if(this.x<this.r)this.velX*=-1;
else if(this.y>h+this.r){ball=new Ball(w/2,h/2);aiScore++;}
else if(this.y<0){ball=new Ball(w/2,h/2);plyScore++; }
}
}
class ScoreBoard{
constructor(score1,score2){
this.score1 = score1;
this.score2 = score2;
}
show(){
ctx.beginPath();
ctx.lineWidth = 1;
ctx.setLineDash([4, 2]);
ctx.strokeStyle = "#000";
ctx.moveTo(0,h/2);
ctx.lineTo(w,h/2);
ctx.font = "bold 20px sans-serif"
ctx.fillText(aiScore,w/2,h/2-20);
ctx.fillText(plyScore,w/2,h/2+30);
ctx.stroke();
ctx.closePath();
}
}
const show_result=(e)=>{
data.innerText=e;
result.style.visibility = "visible";
result.style.left ="50%";
}
const hide_result=()=>{
result.style.left ="-50%";
result.style.visibility = "hidden";
gameOver =false;aiScore =0;
plyScore =0;dx = 3;dy =3;
ai = new Player (w/2-35,10);
player = new Player(w/2-35,h-20);
ball = new Ball(w/2,h/2);
board = new ScoreBoard(aiScore,plyScore);
}
Link of the code
0 Comments