10 Simple Javascript Game Codes Free Copy and Paste
Before you continue do you already know what is javascript programming ?, if you don't know yet, please read the brief summary below.
Understanding JavaScript
JavaScript is one of the most widely used programming languages in the past twenty years. JavaScript programming can be learned quickly and easily, and we can use it for various purposes, for example from increasing the functionality of a site to creating game applications and web-based applications. In addition, there are thousands of themes and JavaScript applications that you can use for free and all of this is thanks to several sites, such as Github.com.
Baca Juga: Tempat Wisata di Nganjuk untuk Mengisi Akhir Pekan
Baca Juga: Tempat Wisata di Nganjuk untuk Mengisi Akhir Pekan
10 Simple Javascript Game Codes Free
The following is a collection of simple javascript games but has very interesting functions and can be a reference material, these games include:
1. Flappy Bird Game Using JavaScript and HTML5
Flappy Bird is a game that uses 2D display. The aim is to direct the flying bird, named "Faby", which moves continuously to the right, between sets of pipes like Mario. If a player touches the pipe, they lose. Faby quickly flaps every time the player taps the screen, if the screen doesn't knock, then Faby falls due to gravity. Each pair of pipes he navigates yields one player point, with a medal awarded for a score at the end of the match. No medals are awarded for scores less than ten. Bronze medals are awarded for scores between ten and twenty. To receive a silver medal, players must reach 20 points. Gold medals are given to those whose value is higher than thirty points. Players who reach a score of forty or higher receive a platinum medal.
Here is the game code for Flappy Bird
Code index.html
<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird using JS | by learnWD</title>
</head>
<body>
<h3>flappyBird by LearnWD</h3>
<canvas id="canvas" width="288" height="512"></canvas>
<script src="flappyBird.js"></script>
</body>
</html>Code flappyBird.js
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
// load images
var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeNorth = new Image();
var pipeSouth = new Image();
bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeNorth.src = "images/pipeNorth.png";
pipeSouth.src = "images/pipeSouth.png";
// some variables
var gap = 85;
var constant;
var bX = 10;
var bY = 150;
var gravity = 1.5;
var score = 0;
// audio files
var fly = new Audio();
var scor = new Audio();
fly.src = "sounds/fly.mp3";
scor.src = "sounds/score.mp3";
// on key down
document.addEventListener("keydown",moveUp);
function moveUp(){
bY -= 25;
fly.play();
}
// pipe coordinates
var pipe = [];
pipe[0] = {
x : cvs.width,
y : 0
};
// draw images
function draw(){
ctx.drawImage(bg,0,0);
for(var i = 0; i < pipe.length; i++){
constant = pipeNorth.height+gap;
ctx.drawImage(pipeNorth,pipe[i].x,pipe[i].y);
ctx.drawImage(pipeSouth,pipe[i].x,pipe[i].y+constant);
pipe[i].x--;
if( pipe[i].x == 125 ){
pipe.push({
x : cvs.width,
y : Math.floor(Math.random()*pipeNorth.height)-pipeNorth.height
});
}
// detect collision
if( bX + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeNorth.width && (bY <= pipe[i].y + pipeNorth.height || bY+bird.height >= pipe[i].y+constant) || bY + bird.height >= cvs.height - fg.height){
location.reload(); // reload the page
}
if(pipe[i].x == 5){
score++;
scor.play();
}
}
ctx.drawImage(fg,0,cvs.height - fg.height);
ctx.drawImage(bird,bX,bY);
bY += gravity;
ctx.fillStyle = "#000";
ctx.font = "20px Verdana";
ctx.fillText("Score : "+score,10,cvs.height-20);
requestAnimationFrame(draw);
}
draw();The following tutorial makes a game Flappy Bird
2. Simple Code Snake Game Using Javascript
The following code to make a simple snake game with JavaScript:
Here is the game code for Snake
<canvas id="gc" width="400" height="400"></canvas>
<script>
window.onload=function() {
canv=document.getElementById("gc");
ctx=canv.getContext("2d");
document.addEventListener("keydown",keyPush);
setInterval(game,1000/15);
}
px=py=10;
gs=tc=20;
ax=ay=15;
xv=yv=0;
trail=[];
tail = 5;
function game() {
px+=xv;
py+=yv;
if(px<0) {
px= tc-1;
}
if(px>tc-1) {
px= 0;
}
if(py<0) {
py= tc-1;
}
if(py>tc-1) {
py= 0;
}
ctx.fillStyle="black";
ctx.fillRect(0,0,canv.width,canv.height);
ctx.fillStyle="lime";
for(var i=0;i<trail.length;i++) {
ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2);
if(trail[i].x==px && trail[i].y==py) {
tail = 5;
}
}
trail.push({x:px,y:py});
while(trail.length>tail) {
trail.shift();
}
if(ax==px && ay==py) {
tail++;
ax=Math.floor(Math.random()*tc);
ay=Math.floor(Math.random()*tc);
}
ctx.fillStyle="red";
ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);
}
function keyPush(evt) {
switch(evt.keyCode) {
case 37:
xv=-1;yv=0;
break;
case 38:
xv=0;yv=-1;
break;
case 39:
xv=1;yv=0;
break;
case 40:
xv=0;yv=1;
break;
}
}
</script>Here is a video tutorial for creating a snake game
3. Tetris game in JavaScript
Here is the code to make the tetris game.
Here is the game code for Tetris
Files index.html
<html>
<head>
<title>Tetris</title>
</head>
<body>
<canvas id="tetris" width="240" height="400" />
<script src="tetris.js"></script>
</body>
</html>
const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');
context.scale(20, 20);
function arenaSweep() {
let rowCount = 1;
outer: for (let y = arena.length -1; y > 0; --y) {
for (let x = 0; x < arena[y].length; ++x) {
if (arena[y][x] === 0) {
continue outer;
}
}
const row = arena.splice(y, 1)[0].fill(0);
arena.unshift(row);
++y;
player.score += rowCount * 10;
rowCount *= 2;
}
}
function collide(arena, player) {
const m = player.matrix;
const o = player.pos;
for (let y = 0; y < m.length; ++y) {
for (let x = 0; x < m[y].length; ++x) {
if (m[y][x] !== 0 &&
(arena[y + o.y] &&
arena[y + o.y][x + o.x]) !== 0) {
return true;
}
}
}
return false;
}
function createMatrix(w, h) {
const matrix = [];
while (h--) {
matrix.push(new Array(w).fill(0));
}
return matrix;
}
function createPiece(type)
{
if (type === 'I') {
return [
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
];
} else if (type === 'L') {
return [
[0, 2, 0],
[0, 2, 0],
[0, 2, 2],
];
} else if (type === 'J') {
return [
[0, 3, 0],
[0, 3, 0],
[3, 3, 0],
];
} else if (type === 'O') {
return [
[4, 4],
[4, 4],
];
} else if (type === 'Z') {
return [
[5, 5, 0],
[0, 5, 5],
[0, 0, 0],
];
} else if (type === 'S') {
return [
[0, 6, 6],
[6, 6, 0],
[0, 0, 0],
];
} else if (type === 'T') {
return [
[0, 7, 0],
[7, 7, 7],
[0, 0, 0],
];
}
}
function drawMatrix(matrix, offset) {
matrix.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
context.fillStyle = colors[value];
context.fillRect(x + offset.x,
y + offset.y,
1, 1);
}
});
});
}
function draw() {
context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.height);
drawMatrix(arena, {x: 0, y: 0});
drawMatrix(player.matrix, player.pos);
}
function merge(arena, player) {
player.matrix.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
arena[y + player.pos.y][x + player.pos.x] = value;
}
});
});
}
function rotate(matrix, dir) {
for (let y = 0; y < matrix.length; ++y) {
for (let x = 0; x < y; ++x) {
[
matrix[x][y],
matrix[y][x],
] = [
matrix[y][x],
matrix[x][y],
];
}
}
if (dir > 0) {
matrix.forEach(row => row.reverse());
} else {
matrix.reverse();
}
}
function playerDrop() {
player.pos.y++;
if (collide(arena, player)) {
player.pos.y--;
merge(arena, player);
playerReset();
arenaSweep();
updateScore();
}
dropCounter = 0;
}
function playerMove(offset) {
player.pos.x += offset;
if (collide(arena, player)) {
player.pos.x -= offset;
}
}
function playerReset() {
const pieces = 'TJLOSZI';
player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);
player.pos.y = 0;
player.pos.x = (arena[0].length / 2 | 0) -
(player.matrix[0].length / 2 | 0);
if (collide(arena, player)) {
arena.forEach(row => row.fill(0));
player.score = 0;
updateScore();
}
}
function playerRotate(dir) {
const pos = player.pos.x;
let offset = 1;
rotate(player.matrix, dir);
while (collide(arena, player)) {
player.pos.x += offset;
offset = -(offset + (offset > 0 ? 1 : -1));
if (offset > player.matrix[0].length) {
rotate(player.matrix, -dir);
player.pos.x = pos;
return;
}
}
}
let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;
function update(time = 0) {
const deltaTime = time - lastTime;
dropCounter += deltaTime;
if (dropCounter > dropInterval) {
playerDrop();
}
lastTime = time;
draw();
requestAnimationFrame(update);
}
function updateScore() {
document.getElementById('score').innerText = player.score;
}
document.addEventListener('keydown', event => {
if (event.keyCode === 37) {
playerMove(-1);
} else if (event.keyCode === 39) {
playerMove(1);
} else if (event.keyCode === 40) {
playerDrop();
} else if (event.keyCode === 81) {
playerRotate(-1);
} else if (event.keyCode === 87) {
playerRotate(1);
}
});
const colors = [
null,
'#FF0D72',
'#0DC2FF',
'#0DFF72',
'#F538FF',
'#FF8E0D',
'#FFE138',
'#3877FF',
];
const arena = createMatrix(12, 20);
const player = {
pos: {x: 0, y: 0},
matrix: null,
score: 0,
};
playerReset();
updateScore();
update();Here is a video to make a tetris game
4. Quiz App With JavaScript
Here is the code to make a simple quiz game that has an attractive and cool appearance.
Here is the game code for Quiz
Files index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
<title>Quiz App</title>
</head>
<body>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
</div>
</div>
</body>
</html>
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
function startGame() {
startButton.classList.add('hide')
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
startButton.innerText = 'Restart'
startButton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
const questions = [
{
question: 'What is 2 + 2?',
answers: [
{ text: '4', correct: true },
{ text: '22', correct: false }
]
},
{
question: 'Who is the best YouTuber?',
answers: [
{ text: 'Web Dev Simplified', correct: true },
{ text: 'Traversy Media', correct: true },
{ text: 'Dev Ed', correct: true },
{ text: 'Fun Fun Function', correct: true }
]
},
{
question: 'Is web development fun?',
answers: [
{ text: 'Kinda', correct: false },
{ text: 'YES!!!', correct: true },
{ text: 'Um no', correct: false },
{ text: 'IDK', correct: false }
]
},
{
question: 'What is 4 * 2?',
answers: [
{ text: '6', correct: false },
{ text: '8', correct: true }
]
}
]Files style.css
*, *::before, *::after {
box-sizing: border-box;
font-family: Gotham Rounded;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: var(--hue-wrong);
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}Video making quiz game application
6. Suwit Jawa 2.0 Using Javascript
The following is the script code for creating Java Javanese game, which is a traditional game or guess.
Here is the game code for Suwit Jawa
Files index.html
<html>
<head>
<title>Suwit Jawa</title>
<link href="style.css">
</head>
<body>
<h1>Suwit Jawa v2.0</h1>
<div class="container">
<div class="area-komputer">
<img src="img/gajah.png" class="img-komputer">
</div>
<div class="info"></div>
<div class="area-player">
<ul>
<li>
<img src="img/gajah.png" class="gajah">
</li>
<li>
<img src="img/orang.png" class="orang">
</li>
<li>
<img src="img/semut.png" class="semut">
</li>
</ul>
</div>
</div>
</body>
</html>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Suwit Jawa 2.0 */
body {
background-image: url(img/bg.png);
font-family: arial;
}
h1 {
font-size: 60px;
font-weight: bold;
text-align: center;
margin: 10px 0;
margin-top: 30px;
text-transform: uppercase;
color: #e7e7e7;
text-shadow: 1.5px 1.5px 0 #333, 0px 1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px -1.5px 0 #333, -1.5px 1.5px 0 #333, 1.5px -1.5px 0 #333, 0.7778174593px 0.7778174593px 0 #aaaaaa, 1.5556349186px 1.5556349186px 0 #aaaaaa, 2.3334523779px 2.3334523779px 0 #aaaaaa, 3.1112698372px 3.1112698372px 0 #aaaaaa, 3.8890872965px 3.8890872965px 0 #aaaaaa, 4.6669047558px 4.6669047558px 0 #aaaaaa, 5.4447222151px 5.4447222151px 0 #aaaaaa, 6.2225396744px 6.2225396744px 0 #aaaaaa, 7.0003571337px 7.0003571337px 0 #aaaaaa, 7.7781745931px 7.7781745931px 0 #aaaaaa;
}
.container {
width: 600px;
margin: auto;
padding: 20px;
position: relative;
}
.area-komputer {
width: 560px;
height: 250px;
margin: 5px auto;
background-color: lightblue;
background: linear-gradient(to bottom, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
position: relative;
padding-top: 40px;
box-sizing: border-box;
border-radius: 40px 40px 0 0;
}
.area-player {
width: 560px;
height: 250px;
margin: 5px auto;
background-color: lightgreen;
background: linear-gradient(to bottom, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%);
position: relative;
border-radius: 0 0 40px 40px;
}
.info {
width: 150px;
height: 60px;
border: 5px solid salmon;
position: absolute;
left: 50%;
margin-left: -75px;
top: 50%;
margin-top: -30px;
background-color: white;
border-radius: 30px;
z-index: 1;
text-align: center;
line-height: 60px;
color: #f89bb4;
font-size: 26px;
text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
ul {
padding-top: 80px;
padding-left: 25px;
}
li {
display: inline-block;
margin: 0 18px;
}
img {
width: 130px;
height: 130px;
display: block;
margin: auto;
border-radius: 50%;
}
.gajah, .orang, .semut {
transition: .3s;
position: relative;
top:0;
cursor: pointer;
}
.gajah:hover, .semut:hover, .orang:hover, .active {
box-shadow: 0 0 10px 5px limegreen;
}
.gajah:active, .semut:active, .orang:active {
top: 2px;
}The following video tutorial for making Javanese Suwit game
7. Code Ping Pong Game Using JavaScript
Table tennis, also known as ping pong, is a game where two or four players hit the ball lightly, back and forth across the table using a small line. Points are scored when a player fails to return the ball to another player. Basically, you play small tennis on a table.
Here is the game code for Ping Pong
Files index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pong Game JavaScript</title>
<style>
body{
background-color: dimgray;
}
#pong{
border: 2px solid #FFF;
position: absolute;
margin :auto;
top:0;
right:0;
left:0;
bottom:0;
}
</style>
</head>
<body>
<canvas id="pong" width="600" height="400"></canvas>
<script src="pong.js"></script>
</body>
</html>
// select canvas element
const canvas = document.getElementById("pong");
// getContext of canvas = methods and properties to draw and do a lot of thing to the canvas
const ctx = canvas.getContext('2d');
// load sounds
let hit = new Audio();
let wall = new Audio();
let userScore = new Audio();
let comScore = new Audio();
hit.src = "sounds/hit.mp3";
wall.src = "sounds/wall.mp3";
comScore.src = "sounds/comScore.mp3";
userScore.src = "sounds/userScore.mp3";
// Ball object
const ball = {
x : canvas.width/2,
y : canvas.height/2,
radius : 10,
velocityX : 5,
velocityY : 5,
speed : 7,
color : "WHITE"
}
// User Paddle
const user = {
x : 0, // left side of canvas
y : (canvas.height - 100)/2, // -100 the height of paddle
width : 10,
height : 100,
score : 0,
color : "WHITE"
}
// COM Paddle
const com = {
x : canvas.width - 10, // - width of paddle
y : (canvas.height - 100)/2, // -100 the height of paddle
width : 10,
height : 100,
score : 0,
color : "WHITE"
}
// NET
const net = {
x : (canvas.width - 2)/2,
y : 0,
height : 10,
width : 2,
color : "WHITE"
}
// draw a rectangle, will be used to draw paddles
function drawRect(x, y, w, h, color){
ctx.fillStyle = color;
ctx.fillRect(x, y, w, h);
}
// draw circle, will be used to draw the ball
function drawArc(x, y, r, color){
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
// listening to the mouse
canvas.addEventListener("mousemove", getMousePos);
function getMousePos(evt){
let rect = canvas.getBoundingClientRect();
user.y = evt.clientY - rect.top - user.height/2;
}
// when COM or USER scores, we reset the ball
function resetBall(){
ball.x = canvas.width/2;
ball.y = canvas.height/2;
ball.velocityX = -ball.velocityX;
ball.speed = 7;
}
// draw the net
function drawNet(){
for(let i = 0; i <= canvas.height; i+=15){
drawRect(net.x, net.y + i, net.width, net.height, net.color);
}
}
// draw text
function drawText(text,x,y){
ctx.fillStyle = "#FFF";
ctx.font = "75px fantasy";
ctx.fillText(text, x, y);
}
// collision detection
function collision(b,p){
p.top = p.y;
p.bottom = p.y + p.height;
p.left = p.x;
p.right = p.x + p.width;
b.top = b.y - b.radius;
b.bottom = b.y + b.radius;
b.left = b.x - b.radius;
b.right = b.x + b.radius;
return p.left < b.right && p.top < b.bottom && p.right > b.left && p.bottom > b.top;
}
// update function, the function that does all calculations
function update(){
// change the score of players, if the ball goes to the left "ball.x<0" computer win, else if "ball.x > canvas.width" the user win
if( ball.x - ball.radius < 0 ){
com.score++;
comScore.play();
resetBall();
}else if( ball.x + ball.radius > canvas.width){
user.score++;
userScore.play();
resetBall();
}
// the ball has a velocity
ball.x += ball.velocityX;
ball.y += ball.velocityY;
// computer plays for itself, and we must be able to beat it
// simple AI
com.y += ((ball.y - (com.y + com.height/2)))*0.1;
// when the ball collides with bottom and top walls we inverse the y velocity.
if(ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height){
ball.velocityY = -ball.velocityY;
wall.play();
}
// we check if the paddle hit the user or the com paddle
let player = (ball.x + ball.radius < canvas.width/2) ? user : com;
// if the ball hits a paddle
if(collision(ball,player)){
// play sound
hit.play();
// we check where the ball hits the paddle
let collidePoint = (ball.y - (player.y + player.height/2));
// normalize the value of collidePoint, we need to get numbers between -1 and 1.
// -player.height/2 < collide Point < player.height/2
collidePoint = collidePoint / (player.height/2);
// when the ball hits the top of a paddle we want the ball, to take a -45degees angle
// when the ball hits the center of the paddle we want the ball to take a 0degrees angle
// when the ball hits the bottom of the paddle we want the ball to take a 45degrees
// Math.PI/4 = 45degrees
let angleRad = (Math.PI/4) * collidePoint;
// change the X and Y velocity direction
let direction = (ball.x + ball.radius < canvas.width/2) ? 1 : -1;
ball.velocityX = direction * ball.speed * Math.cos(angleRad);
ball.velocityY = ball.speed * Math.sin(angleRad);
// speed up the ball everytime a paddle hits it.
ball.speed += 0.1;
}
}
// render function, the function that does al the drawing
function render(){
// clear the canvas
drawRect(0, 0, canvas.width, canvas.height, "#000");
// draw the user score to the left
drawText(user.score,canvas.width/4,canvas.height/5);
// draw the COM score to the right
drawText(com.score,3*canvas.width/4,canvas.height/5);
// draw the net
drawNet();
// draw the user's paddle
drawRect(user.x, user.y, user.width, user.height, user.color);
// draw the COM's paddle
drawRect(com.x, com.y, com.width, com.height, com.color);
// draw the ball
drawArc(ball.x, ball.y, ball.radius, ball.color);
}
function game(){
update();
render();
}
// number of frames per second
let framePerSecond = 50;
//call the game function 50 times every 1 Sec
let loop = setInterval(game,1000/framePerSecond);The following is a video tutorial for making ping pong games
8. Code Memory Game JavaScript
The following code is for making game memory with javascript.
Here is the game code for Memory
"code-elem"><!DOCTYPE html>
"code-elem"><html>
"code-elem"><head>
"code-elem">"code-styletags"><style>
div#memory_board{
background:#CCC;
border:#999 1px solid;
width:800px;
height:540px;
padding:24px;
margin:0px auto;
}
div#memory_board > div{
background: url(tile_bg.jpg) no-repeat;
border:#000 1px solid;
width:71px;
height:71px;
float:left;
margin:10px;
padding:20px;
font-size:64px;
cursor:pointer;
text-align:center;
}
"code-elem">"code-styletags"></style>
"code-elem"><script>
"code-comment">// Scripted By Adam Khoury in connection with the following video tutorial:
"code-comment">// http://www.youtube.com/watch?v=c_ohDPWmsM0
var memory_array = ["code-str">'A',"code-str">'A',"code-str">'B',"code-str">'B',"code-str">'C',"code-str">'C',"code-str">'D',"code-str">'D',"code-str">'E',"code-str">'E',"code-str">'F',"code-str">'F',"code-str">'G',"code-str">'G',"code-str">'H',"code-str">'H',"code-str">'I',"code-str">'I',"code-str">'J',"code-str">'J',"code-str">'K',"code-str">'K',"code-str">'L',"code-str">'L'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function(){
var i = this.length, j, temp;
while(--i > 0){
j = Math.floor(Math.random() * (i+1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function newBoard(){
tiles_flipped = 0;
var output = "code-str">'';
memory_array.memory_tile_shuffle();
for(var i = 0; i < memory_array.length; i++){
output += "code-str">'"code-elem"><div id="code-str">"tile_'+i+code-str">'" onclick="code-str">"memoryFlipTile(this,\'code-str">'+memory_array[i]+'\code-str">')">"code-elem"></div>';
}
document.getElementById("code-str">'memory_board').innerHTML = output;
}
function memoryFlipTile(tile,val){
if(tile.innerHTML == "code-str">"" && memory_values.length < 2){
tile.style.background = "code-str">'#FFF';
tile.innerHTML = val;
if(memory_values.length == 0){
memory_values.push(val);
memory_tile_ids.push(tile.id);
} else if(memory_values.length == 1){
memory_values.push(val);
memory_tile_ids.push(tile.id);
if(memory_values[0] == memory_values[1]){
tiles_flipped += 2;
"code-comment">// Clear both arrays
memory_values = [];
memory_tile_ids = [];
"code-comment">// Check to see if the whole board is cleared
if(tiles_flipped == memory_array.length){
alert("code-str">"Board cleared... generating new board");
document.getElementById("code-str">'memory_board').innerHTML = "code-str">"";
newBoard();
}
} else {
function flip2Back(){
"code-comment">// Flip the 2 tiles back over
var tile_1 = document.getElementById(memory_tile_ids[0]);
var tile_2 = document.getElementById(memory_tile_ids[1]);
tile_1.style.background = "code-str">'url(tile_bg.jpg) no-repeat';
tile_1.innerHTML = "code-str">"";
tile_2.style.background = "code-str">'url(tile_bg.jpg) no-repeat';
tile_2.innerHTML = "code-str">"";
"code-comment">// Clear both arrays
memory_values = [];
memory_tile_ids = [];
}
setTimeout(flip2Back, 700);
}
}
}
}
"code-elem"></script>
"code-elem"></head>
"code-elem"><body>
"code-elem"><div id="code-str">"memory_board">"code-elem"></div>
"code-elem"><script>newBoard();"code-elem"></script>
"code-elem"></body>
"code-elem"></html>
Next is a video tutorial for creating memory games
Next is a video tutorial for creating memory games
9. Hangman Game using Javascript
Hangman This simple game is written in HTML, CSS, and JavaScript. Here is the code to make this simple game.
Here is the game code for Hangman
Files index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap 4 CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Hangman</title>
</head>
<body>
<div class="container">
<h1 class="text-center">Hangman</h1>
<div class="float-right">Wrong Guesses: <span id='mistakes'>0</span> of <span id='maxWrong'></span></div>
<div class="text-center">
<img id='hangmanPic' src="./images/0.jpg" alt="">
<p>Guess the Programming Language:</p>
<p id="wordSpotlight">The word to be guessed goes here</p>
<div id="keyboard"></div>
<button class="btn btn-info" onClick="reset()">Reset</button>
</div>
</div>
<script src='hangman.js'></script>
</body>
</html>
var programming_languages = [
"python",
"javascript",
"mongodb",
"json",
"java",
"html",
"css",
"c",
"csharp",
"golang",
"kotlin",
"php",
"sql",
"ruby"
]
let answer = '';
let maxWrong = 6;
let mistakes = 0;
let guessed = [];
let wordStatus = null;
function randomWord() {
answer = programming_languages[Math.floor(Math.random() * programming_languages.length)];
}
function generateButtons() {
let buttonsHTML = 'abcdefghijklmnopqrstuvwxyz'.split('').map(letter =>
`
<button
class="btn btn-lg btn-primary m-2"
id='` + letter + `'
onClick="handleGuess('` + letter + `')"
>
` + letter + `
</button>
`).join('');
document.getElementById('keyboard').innerHTML = buttonsHTML;
}
function handleGuess(chosenLetter) {
guessed.indexOf(chosenLetter) === -1 ? guessed.push(chosenLetter) : null;
document.getElementById(chosenLetter).setAttribute('disabled', true);
if (answer.indexOf(chosenLetter) >= 0) {
guessedWord();
checkIfGameWon();
} else if (answer.indexOf(chosenLetter) === -1) {
mistakes++;
updateMistakes();
checkIfGameLost();
updateHangmanPicture();
}
}
function updateHangmanPicture() {
document.getElementById('hangmanPic').src = './images/' + mistakes + '.jpg';
}
function checkIfGameWon() {
if (wordStatus === answer) {
document.getElementById('keyboard').innerHTML = 'You Won!!!';
}
}
function checkIfGameLost() {
if (mistakes === maxWrong) {
document.getElementById('wordSpotlight').innerHTML = 'The answer was: ' + answer;
document.getElementById('keyboard').innerHTML = 'You Lost!!!';
}
}
function guessedWord() {
wordStatus = answer.split('').map(letter => (guessed.indexOf(letter) >= 0 ? letter : " _ ")).join('');
document.getElementById('wordSpotlight').innerHTML = wordStatus;
}
function updateMistakes() {
document.getElementById('mistakes').innerHTML = mistakes;
}
function reset() {
mistakes = 0;
guessed = [];
document.getElementById('hangmanPic').src = './images/0.jpg';
randomWord();
guessedWord();
updateMistakes();
generateButtons();
}
document.getElementById('maxWrong').innerHTML = maxWrong;
randomWord();
generateButtons();
guessedWord();Next is a tutorial on making a hangman game
10. Bubble Shooter Using Javascript
10 Simple Javascript Game Codes Free - Next is a tutorial on making Bubble Shooter games, which can be used as reference materials to make other games.
Here is the game code for Bubble Shooter
Files index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rembound.com Example</title>
<script type='text/javascript' src='bubble-shooter-example.js'></script>
</head>
<body style="background-color: gray;">
<canvas style="margin-left: 30%;" id="viewport" width="628" height="628"></canvas></div>
</body>
</html>
// ------------------------------------------------------------------------
// Bubble Shooter Game Tutorial With HTML5 And JavaScript
// Copyright (c) 2015 Rembound.com
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see http://www.gnu.org/licenses/.
//
// http://rembound.com/articles/bubble-shooter-game-tutorial-with-html5-and-javascript
// ------------------------------------------------------------------------
// The function gets called when the window is fully loaded
window.onload = function() {
// Get the canvas and context
var canvas = document.getElementById("viewport");
var context = canvas.getContext("2d");
// Timing and frames per second
var lastframe = 0;
var fpstime = 0;
var framecount = 0;
var fps = 0;
var initialized = false;
// Level
var level = {
x: 4, // X position
y: 83, // Y position
width: 0, // Width, gets calculated
height: 0, // Height, gets calculated
columns: 15, // Number of tile columns
rows: 14, // Number of tile rows
tilewidth: 40, // Visual width of a tile
tileheight: 40, // Visual height of a tile
rowheight: 34, // Height of a row
radius: 20, // Bubble collision radius
tiles: [] // The two-dimensional tile array
};
// Define a tile class
var Tile = function(x, y, type, shift) {
this.x = x;
this.y = y;
this.type = type;
this.removed = false;
this.shift = shift;
this.velocity = 0;
this.alpha = 1;
this.processed = false;
};
// Player
var player = {
x: 0,
y: 0,
angle: 0,
tiletype: 0,
bubble: {
x: 0,
y: 0,
angle: 0,
speed: 1000,
dropspeed: 900,
tiletype: 0,
visible: false
},
nextbubble: {
x: 0,
y: 0,
tiletype: 0
}
};
// Neighbor offset table
var neighborsoffsets = [[[1, 0], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1]], // Even row tiles
[[1, 0], [1, 1], [0, 1], [-1, 0], [0, -1], [1, -1]]]; // Odd row tiles
// Number of different colors
var bubblecolors = 7;
// Game states
var gamestates = { init: 0, ready: 1, shootbubble: 2, removecluster: 3, gameover: 4 };
var gamestate = gamestates.init;
// Score
var score = 0;
var turncounter = 0;
var rowoffset = 0;
// Animation variables
var animationstate = 0;
var animationtime = 0;
// Clusters
var showcluster = false;
var cluster = [];
var floatingclusters = [];
// Images
var images = [];
var bubbleimage;
// Image loading global variables
var loadcount = 0;
var loadtotal = 0;
var preloaded = false;
// Load images
function loadImages(imagefiles) {
// Initialize variables
loadcount = 0;
loadtotal = imagefiles.length;
preloaded = false;
// Load the images
var loadedimages = [];
for (var i=0; i<imagefiles.length; i++) {
// Create the image object
var image = new Image();
// Add onload event handler
image.onload = function () {
loadcount++;
if (loadcount == loadtotal) {
// Done loading
preloaded = true;
}
};
// Set the source url of the image
image.src = imagefiles[i];
// Save to the image array
loadedimages[i] = image;
}
// Return an array of images
return loadedimages;
}
// Initialize the game
function init() {
// Load images
images = loadImages(["bubble-sprites.png"]);
bubbleimage = images[0];
// Add mouse events
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mousedown", onMouseDown);
// Initialize the two-dimensional tile array
for (var i=0; i<level.columns; i++) {
level.tiles[i] = [];
for (var j=0; j<level.rows; j++) {
// Define a tile type and a shift parameter for animation
level.tiles[i][j] = new Tile(i, j, 0, 0);
}
}
level.width = level.columns * level.tilewidth + level.tilewidth/2;
level.height = (level.rows-1) * level.rowheight + level.tileheight;
// Init the player
player.x = level.x + level.width/2 - level.tilewidth/2;
player.y = level.y + level.height;
player.angle = 90;
player.tiletype = 0;
player.nextbubble.x = player.x - 2 * level.tilewidth;
player.nextbubble.y = player.y;
// New game
newGame();
// Enter main loop
main(0);
}
// Main loop
function main(tframe) {
// Request animation frames
window.requestAnimationFrame(main);
if (!initialized) {
// Preloader
// Clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw the frame
drawFrame();
// Draw a progress bar
var loadpercentage = loadcount/loadtotal;
context.strokeStyle = "#ff8080";
context.lineWidth=3;
context.strokeRect(18.5, 0.5 + canvas.height - 51, canvas.width-37, 32);
context.fillStyle = "#ff8080";
context.fillRect(18.5, 0.5 + canvas.height - 51, loadpercentage*(canvas.width-37), 32);
// Draw the progress text
var loadtext = "Loaded " + loadcount + "/" + loadtotal + " images";
context.fillStyle = "#000000";
context.font = "16px Verdana";
context.fillText(loadtext, 18, 0.5 + canvas.height - 63);
if (preloaded) {
// Add a delay for demonstration purposes
setTimeout(function(){initialized = true;}, 1000);
}
} else {
// Update and render the game
update(tframe);
render();
}
}
// Update the game state
function update(tframe) {
var dt = (tframe - lastframe) / 1000;
lastframe = tframe;
// Update the fps counter
updateFps(dt);
if (gamestate == gamestates.ready) {
// Game is ready for player input
} else if (gamestate == gamestates.shootbubble) {
// Bubble is moving
stateShootBubble(dt);
} else if (gamestate == gamestates.removecluster) {
// Remove cluster and drop tiles
stateRemoveCluster(dt);
}
}
function setGameState(newgamestate) {
gamestate = newgamestate;
animationstate = 0;
animationtime = 0;
}
function stateShootBubble(dt) {
// Bubble is moving
// Move the bubble in the direction of the mouse
player.bubble.x += dt * player.bubble.speed * Math.cos(degToRad(player.bubble.angle));
player.bubble.y += dt * player.bubble.speed * -1*Math.sin(degToRad(player.bubble.angle));
// Handle left and right collisions with the level
if (player.bubble.x <= level.x) {
// Left edge
player.bubble.angle = 180 - player.bubble.angle;
player.bubble.x = level.x;
} else if (player.bubble.x + level.tilewidth >= level.x + level.width) {
// Right edge
player.bubble.angle = 180 - player.bubble.angle;
player.bubble.x = level.x + level.width - level.tilewidth;
}
// Collisions with the top of the level
if (player.bubble.y <= level.y) {
// Top collision
player.bubble.y = level.y;
snapBubble();
return;
}
// Collisions with other tiles
for (var i=0; i<level.columns; i++) {
for (var j=0; j<level.rows; j++) {
var tile = level.tiles[i][j];
// Skip empty tiles
if (tile.type < 0) {
continue;
}
// Check for intersections
var coord = getTileCoordinate(i, j);
if (circleIntersection(player.bubble.x + level.tilewidth/2,
player.bubble.y + level.tileheight/2,
level.radius,
coord.tilex + level.tilewidth/2,
coord.tiley + level.tileheight/2,
level.radius)) {
// Intersection with a level bubble
snapBubble();
return;
}
}
}
}
function stateRemoveCluster(dt) {
if (animationstate == 0) {
resetRemoved();
// Mark the tiles as removed
for (var i=0; i<cluster.length; i++) {
// Set the removed flag
cluster[i].removed = true;
}
// Add cluster score
score += cluster.length * 100;
// Find floating clusters
floatingclusters = findFloatingClusters();
if (floatingclusters.length > 0) {
// Setup drop animation
for (var i=0; i<floatingclusters.length; i++) {
for (var j=0; j<floatingclusters[i].length; j++) {
var tile = floatingclusters[i][j];
tile.shift = 0;
tile.shift = 1;
tile.velocity = player.bubble.dropspeed;
score += 100;
}
}
}
animationstate = 1;
}
if (animationstate == 1) {
// Pop bubbles
var tilesleft = false;
for (var i=0; i<cluster.length; i++) {
var tile = cluster[i];
if (tile.type >= 0) {
tilesleft = true;
// Alpha animation
tile.alpha -= dt * 15;
if (tile.alpha < 0) {
tile.alpha = 0;
}
if (tile.alpha == 0) {
tile.type = -1;
tile.alpha = 1;
}
}
}
// Drop bubbles
for (var i=0; i<floatingclusters.length; i++) {
for (var j=0; j<floatingclusters[i].length; j++) {
var tile = floatingclusters[i][j];
if (tile.type >= 0) {
tilesleft = true;
// Accelerate dropped tiles
tile.velocity += dt * 700;
tile.shift += dt * tile.velocity;
// Alpha animation
tile.alpha -= dt * 8;
if (tile.alpha < 0) {
tile.alpha = 0;
}
// Check if the bubbles are past the bottom of the level
if (tile.alpha == 0 || (tile.y * level.rowheight + tile.shift > (level.rows - 1) * level.rowheight + level.tileheight)) {
tile.type = -1;
tile.shift = 0;
tile.alpha = 1;
}
}
}
}
if (!tilesleft) {
// Next bubble
nextBubble();
// Check for game over
var tilefound = false
for (var i=0; i<level.columns; i++) {
for (var j=0; j<level.rows; j++) {
if (level.tiles[i][j].type != -1) {
tilefound = true;
break;
}
}
}
if (tilefound) {
setGameState(gamestates.ready);
} else {
// No tiles left, game over
setGameState(gamestates.gameover);
}
}
}
}
// Snap bubble to the grid
function snapBubble() {
// Get the grid position
var centerx = player.bubble.x + level.tilewidth/2;
var centery = player.bubble.y + level.tileheight/2;
var gridpos = getGridPosition(centerx, centery);
// Make sure the grid position is valid
if (gridpos.x < 0) {
gridpos.x = 0;
}
if (gridpos.x >= level.columns) {
gridpos.x = level.columns - 1;
}
if (gridpos.y < 0) {
gridpos.y = 0;
}
if (gridpos.y >= level.rows) {
gridpos.y = level.rows - 1;
}
// Check if the tile is empty
var addtile = false;
if (level.tiles[gridpos.x][gridpos.y].type != -1) {
// Tile is not empty, shift the new tile downwards
for (var newrow=gridpos.y+1; newrow<level.rows; newrow++) {
if (level.tiles[gridpos.x][newrow].type == -1) {
gridpos.y = newrow;
addtile = true;
break;
}
}
} else {
addtile = true;
}
// Add the tile to the grid
if (addtile) {
// Hide the player bubble
player.bubble.visible = false;
// Set the tile
level.tiles[gridpos.x][gridpos.y].type = player.bubble.tiletype;
// Check for game over
if (checkGameOver()) {
return;
}
// Find clusters
cluster = findCluster(gridpos.x, gridpos.y, true, true, false);
if (cluster.length >= 3) {
// Remove the cluster
setGameState(gamestates.removecluster);
return;
}
}
// No clusters found
turncounter++;
if (turncounter >= 5) {
// Add a row of bubbles
addBubbles();
turncounter = 0;
rowoffset = (rowoffset + 1) % 2;
if (checkGameOver()) {
return;
}
}
// Next bubble
nextBubble();
setGameState(gamestates.ready);
}
function checkGameOver() {
// Check for game over
for (var i=0; i<level.columns; i++) {
// Check if there are bubbles in the bottom row
if (level.tiles[i][level.rows-1].type != -1) {
// Game over
nextBubble();
setGameState(gamestates.gameover);
return true;
}
}
return false;
}
function addBubbles() {
// Move the rows downwards
for (var i=0; i<level.columns; i++) {
for (var j=0; j<level.rows-1; j++) {
level.tiles[i][level.rows-1-j].type = level.tiles[i][level.rows-1-j-1].type;
}
}
// Add a new row of bubbles at the top
for (var i=0; i<level.columns; i++) {
// Add random, existing, colors
level.tiles[i][0].type = getExistingColor();
}
}
// Find the remaining colors
function findColors() {
var foundcolors = [];
var colortable = [];
for (var i=0; i<bubblecolors; i++) {
colortable.push(false);
}
// Check all tiles
for (var i=0; i<level.columns; i++) {
for (var j=0; j<level.rows; j++) {
var tile = level.tiles[i][j];
if (tile.type >= 0) {
if (!colortable[tile.type]) {
colortable[tile.type] = true;
foundcolors.push(tile.type);
}
}
}
}
return foundcolors;
}
// Find cluster at the specified tile location
function findCluster(tx, ty, matchtype, reset, skipremoved) {
// Reset the processed flags
if (reset) {
resetProcessed();
}
// Get the target tile. Tile coord must be valid.
var targettile = level.tiles[tx][ty];
// Initialize the toprocess array with the specified tile
var toprocess = [targettile];
targettile.processed = true;
var foundcluster = [];
while (toprocess.length > 0) {
// Pop the last element from the array
var currenttile = toprocess.pop();
// Skip processed and empty tiles
if (currenttile.type == -1) {
continue;
}
// Skip tiles with the removed flag
if (skipremoved && currenttile.removed) {
continue;
}
// Check if current tile has the right type, if matchtype is true
if (!matchtype || (currenttile.type == targettile.type)) {
// Add current tile to the cluster
foundcluster.push(currenttile);
// Get the neighbors of the current tile
var neighbors = getNeighbors(currenttile);
// Check the type of each neighbor
for (var i=0; i<neighbors.length; i++) {
if (!neighbors[i].processed) {
// Add the neighbor to the toprocess array
toprocess.push(neighbors[i]);
neighbors[i].processed = true;
}
}
}
}
// Return the found cluster
return foundcluster;
}
// Find floating clusters
function findFloatingClusters() {
// Reset the processed flags
resetProcessed();
var foundclusters = [];
// Check all tiles
for (var i=0; i<level.columns; i++) {
for (var j=0; j<level.rows; j++) {
var tile = level.tiles[i][j];
if (!tile.processed) {
// Find all attached tiles
var foundcluster = findCluster(i, j, false, false, true);
// There must be a tile in the cluster
if (foundcluster.length <= 0) {
continue;
}
// Check if the cluster is floating
var floating = true;
for (var k=0; k<foundcluster.length; k++) {
if (foundcluster[k].y == 0) {
// Tile is attached to the roof
floating = false;
break;
}
}
if (floating) {
// Found a floating cluster
foundclusters.push(foundcluster);
}
}
}
}
return foundclusters;
}
// Reset the processed flags
function resetProcessed() {
for (var i=0; i<level.columns; i++) {
for (var j=0; j<level.rows; j++) {
level.tiles[i][j].processed = false;
}
}
}
// Reset the removed flags
function resetRemoved() {
for (var i=0; i<level.columns; i++) {
for (var j=0; j<level.rows; j++) {
level.tiles[i][j].removed = false;
}
}
}
// Get the neighbors of the specified tile
function getNeighbors(tile) {
var tilerow = (tile.y + rowoffset) % 2; // Even or odd row
var neighbors = [];
// Get the neighbor offsets for the specified tile
var n = neighborsoffsets[tilerow];
// Get the neighbors
for (var i=0; i<n.length; i++) {
// Neighbor coordinate
var nx = tile.x + n[i][0];
var ny = tile.y + n[i][1];
// Make sure the tile is valid
if (nx >= 0 && nx < level.columns && ny >= 0 && ny < level.rows) {
neighbors.push(level.tiles[nx][ny]);
}
}
return neighbors;
}
function updateFps(dt) {
if (fpstime > 0.25) {
// Calculate fps
fps = Math.round(framecount / fpstime);
// Reset time and framecount
fpstime = 0;
framecount = 0;
}
// Increase time and framecount
fpstime += dt;
framecount++;
}
// Draw text that is centered
function drawCenterText(text, x, y, width) {
var textdim = context.measureText(text);
context.fillText(text, x + (width-textdim.width)/2, y);
}
// Render the game
function render() {
// Draw the frame around the game
drawFrame();
var yoffset = level.tileheight/2;
// Draw level background
context.fillStyle = "#8c8c8c";
context.fillRect(level.x - 4, level.y - 4, level.width + 8, level.height + 4 - yoffset);
// Render tiles
renderTiles();
// Draw level bottom
context.fillStyle = "#656565";
context.fillRect(level.x - 4, level.y - 4 + level.height + 4 - yoffset, level.width + 8, 2*level.tileheight + 3);
// Draw score
context.fillStyle = "#ffffff";
context.font = "18px Verdana";
var scorex = level.x + level.width - 150;
var scorey = level.y+level.height + level.tileheight - yoffset - 8;
drawCenterText("Score:", scorex, scorey, 150);
context.font = "24px Verdana";
drawCenterText(score, scorex, scorey+30, 150);
// Render cluster
if (showcluster) {
renderCluster(cluster, 255, 128, 128);
for (var i=0; i<floatingclusters.length; i++) {
var col = Math.floor(100 + 100 * i / floatingclusters.length);
renderCluster(floatingclusters[i], col, col, col);
}
}
// Render player bubble
renderPlayer();
// Game Over overlay
if (gamestate == gamestates.gameover) {
context.fillStyle = "rgba(0, 0, 0, 0.8)";
context.fillRect(level.x - 4, level.y - 4, level.width + 8, level.height + 2 * level.tileheight + 8 - yoffset);
context.fillStyle = "#ffffff";
context.font = "24px Verdana";
drawCenterText("Game Over!", level.x, level.y + level.height / 2 + 10, level.width);
drawCenterText("Click to start", level.x, level.y + level.height / 2 + 40, level.width);
}
}
// Draw a frame around the game
function drawFrame() {
// Draw background
context.fillStyle = "#e8eaec";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw header
context.fillStyle = "#303030";
context.fillRect(0, 0, canvas.width, 79);
// Draw title
context.fillStyle = "#ffffff";
context.font = "24px Verdana";
context.fillText("Bubble Shooter Example - Rembound.com", 10, 37);
// Display fps
context.fillStyle = "#ffffff";
context.font = "12px Verdana";
context.fillText("Fps: " + fps, 13, 57);
}
// Render tiles
function renderTiles() {
// Top to bottom
for (var j=0; j<level.rows; j++) {
for (var i=0; i<level.columns; i++) {
// Get the tile
var tile = level.tiles[i][j];
// Get the shift of the tile for animation
var shift = tile.shift;
// Calculate the tile coordinates
var coord = getTileCoordinate(i, j);
// Check if there is a tile present
if (tile.type >= 0) {
// Support transparency
context.save();
context.globalAlpha = tile.alpha;
// Draw the tile using the color
drawBubble(coord.tilex, coord.tiley + shift, tile.type);
context.restore();
}
}
}
}
// Render cluster
function renderCluster(cluster, r, g, b) {
for (var i=0; i<cluster.length; i++) {
// Calculate the tile coordinates
var coord = getTileCoordinate(cluster[i].x, cluster[i].y);
// Draw the tile using the color
context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
context.fillRect(coord.tilex+level.tilewidth/4, coord.tiley+level.tileheight/4, level.tilewidth/2, level.tileheight/2);
}
}
// Render the player bubble
function renderPlayer() {
var centerx = player.x + level.tilewidth/2;
var centery = player.y + level.tileheight/2;
// Draw player background circle
context.fillStyle = "#7a7a7a";
context.beginPath();
context.arc(centerx, centery, level.radius+12, 0, 2*Math.PI, false);
context.fill();
context.lineWidth = 2;
context.strokeStyle = "#8c8c8c";
context.stroke();
// Draw the angle
context.lineWidth = 2;
context.strokeStyle = "#0000ff";
context.beginPath();
context.moveTo(centerx, centery);
context.lineTo(centerx + 1.5*level.tilewidth * Math.cos(degToRad(player.angle)), centery - 1.5*level.tileheight * Math.sin(degToRad(player.angle)));
context.stroke();
// Draw the next bubble
drawBubble(player.nextbubble.x, player.nextbubble.y, player.nextbubble.tiletype);
// Draw the bubble
if (player.bubble.visible) {
drawBubble(player.bubble.x, player.bubble.y, player.bubble.tiletype);
}
}
// Get the tile coordinate
function getTileCoordinate(column, row) {
var tilex = level.x + column * level.tilewidth;
// X offset for odd or even rows
if ((row + rowoffset) % 2) {
tilex += level.tilewidth/2;
}
var tiley = level.y + row * level.rowheight;
return { tilex: tilex, tiley: tiley };
}
// Get the closest grid position
function getGridPosition(x, y) {
var gridy = Math.floor((y - level.y) / level.rowheight);
// Check for offset
var xoffset = 0;
if ((gridy + rowoffset) % 2) {
xoffset = level.tilewidth / 2;
}
var gridx = Math.floor(((x - xoffset) - level.x) / level.tilewidth);
return { x: gridx, y: gridy };
}
// Draw the bubble
function drawBubble(x, y, index) {
if (index < 0 || index >= bubblecolors)
return;
// Draw the bubble sprite
context.drawImage(bubbleimage, index * 40, 0, 40, 40, x, y, level.tilewidth, level.tileheight);
}
// Start a new game
function newGame() {
// Reset score
score = 0;
turncounter = 0;
rowoffset = 0;
// Set the gamestate to ready
setGameState(gamestates.ready);
// Create the level
createLevel();
// Init the next bubble and set the current bubble
nextBubble();
nextBubble();
}
// Create a random level
function createLevel() {
// Create a level with random tiles
for (var j=0; j<level.rows; j++) {
var randomtile = randRange(0, bubblecolors-1);
var count = 0;
for (var i=0; i<level.columns; i++) {
if (count >= 2) {
// Change the random tile
var newtile = randRange(0, bubblecolors-1);
// Make sure the new tile is different from the previous tile
if (newtile == randomtile) {
newtile = (newtile + 1) % bubblecolors;
}
randomtile = newtile;
count = 0;
}
count++;
if (j < level.rows/2) {
level.tiles[i][j].type = randomtile;
} else {
level.tiles[i][j].type = -1;
}
}
}
}
// Create a random bubble for the player
function nextBubble() {
// Set the current bubble
player.tiletype = player.nextbubble.tiletype;
player.bubble.tiletype = player.nextbubble.tiletype;
player.bubble.x = player.x;
player.bubble.y = player.y;
player.bubble.visible = true;
// Get a random type from the existing colors
var nextcolor = getExistingColor();
// Set the next bubble
player.nextbubble.tiletype = nextcolor;
}
// Get a random existing color
function getExistingColor() {
existingcolors = findColors();
var bubbletype = 0;
if (existingcolors.length > 0) {
bubbletype = existingcolors[randRange(0, existingcolors.length-1)];
}
return bubbletype;
}
// Get a random int between low and high, inclusive
function randRange(low, high) {
return Math.floor(low + Math.random()*(high-low+1));
}
// Shoot the bubble
function shootBubble() {
// Shoot the bubble in the direction of the mouse
player.bubble.x = player.x;
player.bubble.y = player.y;
player.bubble.angle = player.angle;
player.bubble.tiletype = player.tiletype;
// Set the gamestate
setGameState(gamestates.shootbubble);
}
// Check if two circles intersect
function circleIntersection(x1, y1, r1, x2, y2, r2) {
// Calculate the distance between the centers
var dx = x1 - x2;
var dy = y1 - y2;
var len = Math.sqrt(dx * dx + dy * dy);
if (len < r1 + r2) {
// Circles intersect
return true;
}
return false;
}
// Convert radians to degrees
function radToDeg(angle) {
return angle * (180 / Math.PI);
}
// Convert degrees to radians
function degToRad(angle) {
return angle * (Math.PI / 180);
}
// On mouse movement
function onMouseMove(e) {
// Get the mouse position
var pos = getMousePos(canvas, e);
// Get the mouse angle
var mouseangle = radToDeg(Math.atan2((player.y+level.tileheight/2) - pos.y, pos.x - (player.x+level.tilewidth/2)));
// Convert range to 0, 360 degrees
if (mouseangle < 0) {
mouseangle = 180 + (180 + mouseangle);
}
// Restrict angle to 8, 172 degrees
var lbound = 8;
var ubound = 172;
if (mouseangle > 90 && mouseangle < 270) {
// Left
if (mouseangle > ubound) {
mouseangle = ubound;
}
} else {
// Right
if (mouseangle < lbound || mouseangle >= 270) {
mouseangle = lbound;
}
}
// Set the player angle
player.angle = mouseangle;
}
// On mouse button click
function onMouseDown(e) {
// Get the mouse position
var pos = getMousePos(canvas, e);
if (gamestate == gamestates.ready) {
shootBubble();
} else if (gamestate == gamestates.gameover) {
newGame();
}
}
// Get the mouse position
function getMousePos(canvas, e) {
var rect = canvas.getBoundingClientRect();
return {
x: Math.round((e.clientX - rect.left)/(rect.right - rect.left)*canvas.width),
y: Math.round((e.clientY - rect.top)/(rect.bottom - rect.top)*canvas.height)
};
}
// Call init to start the game
init();
};video tutorial on making the Bubble Shooter game
Baca Juga: Pengenalan Dasar HTML untuk Pemula
Conclusion
That was 10 Simple Javascript Game Code Using Javascript that you can try at home using a text editor application. For this game you will need to use a browser, for example chrome, mozilla. and others.
If you have questions or anything else, please comment in blog comments column, thank you.
Nice Thanks