Buat game itu susah-susah banget apalagi kalau lagi gabut melanda. Kali ini ane mau share sedikit script kodingan untuk bahan referensi kalian atau buat di kembangin lagi. Script code game tembak-tembakan bola yang dibuat dari html, css, dan javascript.
Aplikasi yang perlu kalian siapkan yaitu browser bisa pakai chrome dan teks editor bisa pakai notepad, sublime, atau VS code.
Game ini bisa jalan di browser seperti chrome dan belum ane tes di browser lain. Tanpa basa basi berikut ini script kodingannya.
Pertama-tama buka dulu teks editor kesayangan kalian dan salin kode dibawah ini.
<html onresize="resize()">
<head>
<title>Game taembakan</title>
</head>
<style>
#canvas{
border: 0.5px solid black;
margin:0;
}
body{
margin:0;
background-color:black;
}
#container{
top:40%;
height:50%;
width:50%;
background-color:white;
display:flex;
flex-direction:column;
position:absolute;
left:25%;
padding-bottom:5px;
padding-top:0;
Overflow:auto;
}
#score{
margin:10%;
margin-bottom:0;
font-size:50pt;
}
#text{
margin:0;
font-style: italic;
}
#initbtn{
width:200px;
margin-top:5%;
margin-left:2px;
margin-right:2px;
border-radius:15px;
border-color:#0a78d6;
background-color:#0a78d6;
color:white;
font-size:20pt;
height:35px;
}
</style>
<body onresize="resize()">
<center><canvas id="canvas"></canvas></center>
<div id="container">
<center>
<h1 id="score">0</h1>
<p id="text">points</p>
<h3>Instructions:</h3>
<ul>
<li>Klik dan arahkan ke bola atau musuh yang menyerang</li>
<li>Hancurkan bola sebanyak mungkin</li>
<li>Kamu bisa menghindari musuh dengan tombol arah pada komputermu</li>
</ul>
<div id="initbtn">Start Game</div>
</center>
</div>
<script>
const c=document.getElementById('canvas');
var ctx=c.getContext('2d');
c.width=innerWidth-2;
c.height=innerHeight-2;
function Player(){
this.rad=20;
this.x=c.width/2-this.rad;
this.y=c.height/2-this.rad;
this.draw=function(){
ctx.beginPath();
ctx.fillStyle='red';
ctx.arc(this.x,this.y,this.rad,Math.PI*2,false);
ctx.fill();
};
this.move=function(){
this.draw();
if(this.x+this.rad>=c.width)
this.x=c.width-this.rad;
if(this.x-this.rad<=0)
this.x=this.rad;
if(this.y+this.rad>=c.height)
this.y=c.height-this.rad;
if(this.y-this.rad<=0)
this.y=this.rad;
};
}
function Projectile(x,y,vx,vy){
this.x=x;
this.y=y;
this.vx=vx;
this.vy=vy;
this.rad=5;
this.draw=function(){
ctx.beginPath();
ctx.fillStyle='white';
ctx.arc(this.x,this.y,this.rad,Math.PI*2,false);
ctx.fill();
}
this.move=function(){
this.draw();
this.x+=this.vx;
this.y+=this.vy;
}
}
function Enemy(x,y,vx,vy,rad){
this.x=x;
this.y=y;
this.vx=vx;
this.vy=vy;
this.rad=rad;
this.r=Math.random()*255;
this.g=Math.random()*255;
this.b=Math.random()*255;
this.draw=function(){
ctx.beginPath();
ctx.fillStyle='rgb('+this.r+','+this.g+','+this.b+')';
ctx.arc(this.x,this.y,this.rad,Math.PI*2,false);
ctx.fill();
}
this.move=function(){
this.draw();
this.x+=this.vx;
this.y+=this.vy;
}
}
function Particle(x,y,r,g,b){
this.x=x;
this.y=y;
this.vx=(Math.random()-0.5)*7;
this.vy=(Math.random()-0.5)*7;
this.rad=Math.random()*4;
this.r=r;
this.g=g;
this.b=b;
this.alpha=1;
this.draw=function(){
ctx.beginPath();
ctx.fillStyle='rgba('+this.r+','+this.g+','+this.b+','+this.alpha+')';
ctx.arc(this.x,this.y,this.rad,Math.PI*2,false);
ctx.fill();
}
this.update=function(){
this.draw();
this.x+=this.vx;
this.y+=this.vy;
this.alpha-=0.01;
}
}
var projectileArray,enemyArray,player,particleArray,score;
function init(){
projectileArray=[];
enemyArray=[];
player=new Player();
particleArray=[];
score=0;
document.getElementById('container').style.display='none';
}
function spawnEnemies(){
setInterval(()=>{
var rad=(Math.random()*20)+5,
x,y,vx,vy,angle;
if(Math.random()<0.5){
x=Math.random()<0.5?0-rad:c.width+rad;
y=Math.random()*c.height;
}else{
x=Math.random()*c.width;
y=Math.random()<0.5?0-rad:c.height+rad;
}
angle=Math.atan2(player.y-y ,player.x-x);
vx=Math.cos(angle);
vy=Math.sin(angle);
enemyArray.push(new Enemy(x,y,vx,vy,rad));
},800);
}
var animationId;
function animate(){
animationId=requestAnimationFrame(animate);
ctx.fillStyle='rgba(0,0,0,0.2)';
ctx.fillRect(0,0,c.width,c.height);
ctx.fillStyle='white';
ctx.font='15pt Magneto';
ctx.fillText("Score:"+score,10,15);
player.move();
for(let i=0;i<enemyArray.length;i++){
enemyArray[i].move();
for(let j=0;j<projectileArray.length;j++){
const dist=Math.hypot(enemyArray[i].x-projectileArray[j].x,enemyArray[i].y-projectileArray[j].y);
if(dist-enemyArray[i].rad-projectileArray[j].rad<1){
for(let k=0;k<30;k++)
particleArray.push(new Particle(enemyArray[i].x,enemyArray[i].y,enemyArray[i].r,enemyArray[i].g,enemyArray[i].b));
enemyArray.splice(i,1);
projectileArray.splice(j,1);
score++;
}
}
const dist=Math.hypot(enemyArray[i].x-player.x,enemyArray[i].y-player.y);
if(dist-enemyArray[i].rad-player.rad<1){
cancelAnimationFrame(animationId);
document.getElementById('score').innerHTML=score;
document.getElementById('container').style.display='flex';
document.getElementById('initbtn').innerHTML='replay';
}
}
if(projectileArray.length>0)
for(let i=0;i<projectileArray.length;i++)
projectileArray[i].move();
for(let i=0;i<projectileArray.length;i++){
if(projectileArray[i].x>c.width)
projectileArray.splice(projectileArray[i],1);
else if(projectileArray[i].x<0)
projectileArray.splice(projectileArray[i],1);
else if(projectileArray[i].y>c.height)
projectileArray.splice(projectileArray[i],1);
else if(projectileArray[i].y<0)
projectileArray.splice(projectileArray[i],1);
}
for(let i=0;i<particleArray.length;i++){
if(particleArray[i].alpha>0)
particleArray[i].update();
else
particleArray.splice(i,1);
}
}
document.addEventListener('keydown',(e)=>{
if(e.code==="ArrowUp")
player.y-=10;
if(e.code==="ArrowDown")
player.y+=10;
if(e.code==="ArrowLeft")
player.x-=10;
if(e.code==="ArrowRight")
player.x+=10;
});
function resize(){
c.width=innerWidth-2;
c.height=innerHeight-2;
player.x=c.width/2-player.rad;
player.y=c.height/2-player.rad;
}
document.addEventListener('click',(e)=>{
let x=e.clientX;
let y=e.clientY;
let angle=Math.atan2(y-player.y,x-player.x);
x=player.x;
y=player.y;
let vx=Math.cos(angle)*15;
let vy=Math.sin(angle)*15;
projectileArray.push(new Projectile(x,y,vx,vy));
});
var oneClick=false;
document.getElementById('initbtn').addEventListener('click',()=>{
if(!oneClick){
init();
animate();
spawnEnemies();
oneClick=true;
}
else
//alert('please refresh the page');
location.reload();
});
</script>
</body>
</html>Silahkan di comot dan simpen dengan nama index.html. Untuk menjalankannya buka file html tersebut dan drag ke browser kesayangan kalian. Script lainnya yang mungkin anda suka : Script kode calkulator dari html, css dan javascript.
Jadi file html, css, dan javascript ane gabungkan menjadi satu biar gak ribet. Namanya juga contoh game, jadi ane gak perlu jelaskan ya maksud dari masih-masih code diatas. Yang ada ntar artikelnya penuh lagi, ente males baca.
File diatas juga bisa ente pecah pecah menjadi 3 bagian yaitu index.html, index.css dan index.js. Namanya terserah kalian yang penting disimpan dalam satu folder yang sama.
Jika nggak ada yang eror, maka tampilannya akan sama seperti dibawah ini.
Selamat, script code game tembak-tembakan dari html, css, dan javascript kamu berjalan dengan baik. Pengen kepoin script lainnya? bisa klik disini. Semoga bermanfaat dan silahkan dikembangkan.
