LANGKAH PEMBUATAN CODING GAME

A. Area Canvas Game

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border: 1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

function startGame() {
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}

</script>

<p>Membuat Canvas Kosong</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

canvas {

border: 1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

</head>

function startGame() {

myGameArea.start();

}

var myGameArea = {

canvas : document.createElement("canvas"),

start : function() {

this.canvas.width = 480;

this.canvas.height = 270;

this.context = this.canvas.getContext("2d");

document.body.insertBefore(this.canvas, document.body.childNodes[0]);

}

</script>

<p>Membuat Canvas Kosong</p>

</body>

</html>

B. Menambahkan Komponen

<!DOCTYPE html>
<html>

<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
<body onload="startGame()">
<script>

var myGamePiece;

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red", 10, 120);
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;    
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

</script>

</html>

<!DOCTYPE html>

<html>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

var myGamePiece;

function startGame() {

myGameArea.start();

myGamePiece = new component(30, 30, "red", 10, 120);

}

var myGameArea = {

canvas : document.createElement("canvas"),

start : function() {

this.canvas.width = 480;

this.canvas.height = 270;

this.context = this.canvas.getContext("2d");

document.body.insertBefore(this.canvas, document.body.childNodes[0]);

}

function component(width, height, color, x, y) {

this.width = width;

this.height = height;

this.x = x;

this.y = y;

ctx = myGameArea.context;

ctx.fillStyle = color;

ctx.fillRect(this.x, this.y, this.width, this.height);

}

</script>

</html>

C. Membuat Controler/pengandali/pengaturan

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }    
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();    
    myGamePiece.update();
}

function moveup() {
    myGamePiece.speedY -= 1; 
}

function movedown() {
    myGamePiece.speedY += 1; 
}

function moveleft() {
    myGamePiece.speedX -= 1; 
}

function moveright() {
    myGamePiece.speedX += 1; 
}
</script>
<div style="text-align:center;width:480px;">
  <button onclick="moveup()">UP</button><br><br>
  <button onclick="moveleft()">LEFT</button>
  <button onclick="moveright()">RIGHT</button><br><br>
  <button onclick="movedown()">DOWN</button>
</div>

<p>Jika Anda mengklik tombol, kotak merah akan mulai bergerak. Klik tombol yang sama berkali-kali, akan bergerak semakin cepat.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

</head>

var myGamePiece;

function startGame() {

myGamePiece = new component(30, 30, "red", 10, 120);

myGameArea.start();

}

var myGameArea = {

canvas : document.createElement("canvas"),

start : function() {

this.canvas.width = 480;

this.canvas.height = 270;

this.context = this.canvas.getContext("2d");

document.body.insertBefore(this.canvas, document.body.childNodes[0]);

this.interval = setInterval(updateGameArea, 20);

clear : function() {

this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

}

function component(width, height, color, x, y) {

this.width = width;

this.height = height;

this.speedX = 0;

this.speedY = 0;

this.x = x;

this.y = y;

this.update = function() {

ctx = myGameArea.context;

ctx.fillStyle = color;

ctx.fillRect(this.x, this.y, this.width, this.height);

}

this.newPos = function() {

this.x += this.speedX;

this.y += this.speedY;

}

function updateGameArea() {

myGameArea.clear();

myGamePiece.newPos();

myGamePiece.update();

}

function moveup() {

myGamePiece.speedY -= 1;

}

function movedown() {

myGamePiece.speedY += 1;

}

function moveleft() {

myGamePiece.speedX -= 1;

}

function moveright() {

myGamePiece.speedX += 1;

}

</script>

<button onclick="moveright()">RIGHT</button><br><br>

</div>

<p>Jika Anda mengklik tombol, kotak merah akan mulai bergerak. Klik tombol yang sama berkali-kali, akan bergerak semakin cepat.</p>

</body>

</html>

D. Membuat Objek Game

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myObstacle;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myObstacle  = new component(10, 200, "green", 300, 120);    
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }    
}

function updateGameArea() {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.newPos();    
    myGamePiece.update();
}

function moveup() {
    myGamePiece.speedY = -1; 
}

function movedown() {
    myGamePiece.speedY = 1; 
}

function moveleft() {
    myGamePiece.speedX = -1; 
}

function moveright() {
    myGamePiece.speedX = 1; 
}

function clearmove() {
    myGamePiece.speedX = 0; 
    myGamePiece.speedY = 0; 
}
</script>
<div style="text-align:center;width:480px;">
  <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
  <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
  <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>
  <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
</div>
<p>Sekarang ada kendala di area permainan kita, tapi tetap tidak terjadi apa-apa saat kotak merah menghantamnya.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

</head>

var myGamePiece;

var myObstacle;

function startGame() {

myGamePiece = new component(30, 30, "red", 10, 120);

myObstacle = new component(10, 200, "green", 300, 120);

myGameArea.start();

}

var myGameArea = {

canvas : document.createElement("canvas"),

start : function() {

this.canvas.width = 480;

this.canvas.height = 270;

this.context = this.canvas.getContext("2d");

document.body.insertBefore(this.canvas, document.body.childNodes[0]);

this.interval = setInterval(updateGameArea, 20);

clear : function() {

this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

}

function component(width, height, color, x, y) {

this.width = width;

this.height = height;

this.speedX = 0;

this.speedY = 0;

this.x = x;

this.y = y;

this.update = function() {

ctx = myGameArea.context;

ctx.fillStyle = color;

ctx.fillRect(this.x, this.y, this.width, this.height);

}

this.newPos = function() {

this.x += this.speedX;

this.y += this.speedY;

}

function updateGameArea() {

myGameArea.clear();

myObstacle.update();

myGamePiece.newPos();

myGamePiece.update();

}

function moveup() {

myGamePiece.speedY = -1;

}

function movedown() {

myGamePiece.speedY = 1;

}

function moveleft() {

myGamePiece.speedX = -1;

}

function moveright() {

myGamePiece.speedX = 1;

}

function clearmove() {

myGamePiece.speedX = 0;

myGamePiece.speedY = 0;

}

</script>

<button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>

</div>

<p>Sekarang ada kendala di area permainan kita, tapi tetap tidak terjadi apa-apa saat kotak merah menghantamnya.</p>

</body>

</html>

E. Membuat Score/Penilaian

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            myGameArea.stop();
            return;
        } 
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].speedX = -1;
        myObstacles[i].newPos();
        myObstacles[i].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();    
    myGamePiece.update();
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

function moveup() {
    myGamePiece.speedY = -1; 
}

function movedown() {
    myGamePiece.speedY = 1; 
}

function moveleft() {
    myGamePiece.speedX = -1; 
}

function moveright() {
    myGamePiece.speedX = 1; 
}

function clearmove() {
    myGamePiece.speedX = 0; 
    myGamePiece.speedY = 0; 
}
</script>
<div style="text-align:center;width:480px;">
  <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">UP</button><br><br>
  <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">LEFT</button>
  <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>
  <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">DOWN</button>
</div>

<p>Skor akan menghitung satu poin untuk setiap frame yang Anda berhasil "tetap hidup".</p>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

<!DOCTYPE html>

<html>

<head>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

</head>

var myGamePiece;

var myObstacles = [];

var myScore;

function startGame() {

myGamePiece = new component(30, 30, "red", 10, 120);

myScore = new component("30px", "Consolas", "black", 280, 40, "text");

myGameArea.start();

}

var myGameArea = {

canvas : document.createElement("canvas"),

start : function() {

this.canvas.width = 480;

this.canvas.height = 270;

this.context = this.canvas.getContext("2d");

document.body.insertBefore(this.canvas, document.body.childNodes[0]);

this.frameNo = 0;

this.interval = setInterval(updateGameArea, 20);

clear : function() {

this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

stop : function() {

clearInterval(this.interval);

}

function component(width, height, color, x, y, type) {

this.type = type;

this.width = width;

this.height = height;

this.speedX = 0;

this.speedY = 0;

this.x = x;

this.y = y;

this.update = function() {

ctx = myGameArea.context;

if (this.type == "text") {

ctx.font = this.width + " " + this.height;

ctx.fillStyle = color;

ctx.fillText(this.text, this.x, this.y);

} else {

ctx.fillStyle = color;

ctx.fillRect(this.x, this.y, this.width, this.height);

}

this.newPos = function() {

this.x += this.speedX;

this.y += this.speedY;

}

this.crashWith = function(otherobj) {

var myleft = this.x;

var myright = this.x + (this.width);

var mytop = this.y;

var mybottom = this.y + (this.height);

var otherleft = otherobj.x;

var otherright = otherobj.x + (otherobj.width);

var othertop = otherobj.y;

var otherbottom = otherobj.y + (otherobj.height);

var crash = true;

if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {

crash = false;

}

return crash;

}

function updateGameArea() {

var x, height, gap, minHeight, maxHeight, minGap, maxGap;

for (i = 0; i < myObstacles.length; i += 1) {

if (myGamePiece.crashWith(myObstacles[i])) {

myGameArea.stop();

return;

}

myGameArea.clear();

myGameArea.frameNo += 1;

if (myGameArea.frameNo == 1 || everyinterval(150)) {

x = myGameArea.canvas.width;

minHeight = 20;

maxHeight = 200;

height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);

minGap = 50;

maxGap = 200;

gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);

myObstacles.push(new component(10, height, "green", x, 0));

myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));

}

for (i = 0; i < myObstacles.length; i += 1) {

myObstacles[i].speedX = -1;

myObstacles[i].newPos();

myObstacles[i].update();

}

myScore.text="SCORE: " + myGameArea.frameNo;

myScore.update();

myGamePiece.newPos();

myGamePiece.update();

}

function everyinterval(n) {

if ((myGameArea.frameNo / n) % 1 == 0) {return true;}

return false;

}

function moveup() {

myGamePiece.speedY = -1;

}

function movedown() {

myGamePiece.speedY = 1;

}

function moveleft() {

myGamePiece.speedX = -1;

}

function moveright() {

myGamePiece.speedX = 1;

}

function clearmove() {

myGamePiece.speedX = 0;

myGamePiece.speedY = 0;

}

</script>

<button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>

</div>

<p>Skor akan menghitung satu poin untuk setiap frame yang Anda berhasil "tetap hidup".</p>

</body>

</html>

F. Membuat Image/Gambar

function startGame() {
  myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
  myGameArea.start();
}
function component(width, height, color, x, y, type) {
  this.type = type;
  if (type == "image") {
    this.image = new Image();
    this.image.src = color;
  }
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    if (type == "image") {
      ctx.drawImage(this.image,
        this.x,
        this.y,
        this.width, this.height);
    } else {
      ctx.fillStyle = color;
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }
}

function startGame() {

myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");

myGameArea.start();

}

function component(width, height, color, x, y, type) {

this.type = type;

if (type == "image") {

this.image = new Image();

this.image.src = color;

}

this.width = width;

this.height = height;

this.speedX = 0;

this.speedY = 0;

this.x = x;

this.y = y;

this.update = function() {

ctx = myGameArea.context;

if (type == "image") {

ctx.drawImage(this.image,

this.x,

this.y,

this.width, this.height);

} else {

ctx.fillStyle = color;

ctx.fillRect(this.x, this.y, this.width, this.height);

}

G. Membuat Sound/Suara

H. Membuat Grafity/gaya Berat

I. Membuat Boucing/memantul

J. Membuat Putaran

K. Membuat Pergerakan

L. Hasil Akhir Game

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
            this.gravitySpeed = 0;
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            return;
        } 
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].x += -1;
        myObstacles[i].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();
    myGamePiece.update();
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

function accelerate(n) {
    myGamePiece.gravity = n;
}
</script>
<br>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">TEKAN GAS</button>
<hr>
<p>Gunakan tombol TEKAN GAS untuk tetap berada di udara</p>

<p>Berapa lama Anda bisa bertahan hidup?</p>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

<!DOCTYPE html>

<html>

<head>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

</head>

var myGamePiece;

var myObstacles = [];

var myScore;

function startGame() {

myGamePiece = new component(30, 30, "red", 10, 120);

myGamePiece.gravity = 0.05;

myScore = new component("30px", "Consolas", "black", 280, 40, "text");

myGameArea.start();

}

var myGameArea = {

canvas : document.createElement("canvas"),

start : function() {

this.canvas.width = 480;

this.canvas.height = 270;

this.context = this.canvas.getContext("2d");

document.body.insertBefore(this.canvas, document.body.childNodes[0]);

this.frameNo = 0;

this.interval = setInterval(updateGameArea, 20);

clear : function() {

this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

}

function component(width, height, color, x, y, type) {

this.type = type;

this.score = 0;

this.width = width;

this.height = height;

this.speedX = 0;

this.speedY = 0;

this.x = x;

this.y = y;

this.gravity = 0;

this.gravitySpeed = 0;

this.update = function() {

ctx = myGameArea.context;

if (this.type == "text") {

ctx.font = this.width + " " + this.height;

ctx.fillStyle = color;

ctx.fillText(this.text, this.x, this.y);

} else {

ctx.fillStyle = color;

ctx.fillRect(this.x, this.y, this.width, this.height);

}

this.newPos = function() {

this.gravitySpeed += this.gravity;

this.x += this.speedX;

this.y += this.speedY + this.gravitySpeed;

this.hitBottom();

}

this.hitBottom = function() {

var rockbottom = myGameArea.canvas.height - this.height;

if (this.y > rockbottom) {

this.y = rockbottom;

this.gravitySpeed = 0;

}

this.crashWith = function(otherobj) {

var myleft = this.x;

var myright = this.x + (this.width);

var mytop = this.y;

var mybottom = this.y + (this.height);

var otherleft = otherobj.x;

var otherright = otherobj.x + (otherobj.width);

var othertop = otherobj.y;

var otherbottom = otherobj.y + (otherobj.height);

var crash = true;

if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {

crash = false;

}

return crash;

}

function updateGameArea() {

var x, height, gap, minHeight, maxHeight, minGap, maxGap;

for (i = 0; i < myObstacles.length; i += 1) {

if (myGamePiece.crashWith(myObstacles[i])) {

return;

}

myGameArea.clear();

myGameArea.frameNo += 1;

if (myGameArea.frameNo == 1 || everyinterval(150)) {

x = myGameArea.canvas.width;

minHeight = 20;

maxHeight = 200;

height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);

minGap = 50;

maxGap = 200;

gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);

myObstacles.push(new component(10, height, "green", x, 0));

myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));

}

for (i = 0; i < myObstacles.length; i += 1) {

myObstacles[i].x += -1;

myObstacles[i].update();

}

myScore.text="SCORE: " + myGameArea.frameNo;

myScore.update();

myGamePiece.newPos();

myGamePiece.update();

}

function everyinterval(n) {

if ((myGameArea.frameNo / n) % 1 == 0) {return true;}

return false;

}

function accelerate(n) {

myGamePiece.gravity = n;

}

</script>

<br>

<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">TEKAN GAS</button>

<hr>

<p>Gunakan tombol TEKAN GAS untuk tetap berada di udara</p>

<p>Berapa lama Anda bisa bertahan hidup?</p>

</body>

</html>

LANGKAH PEMBUATAN CODING GAME

A. Area Canvas Game

B. Menambahkan Komponen

C. Membuat Controler/pengandali/pengaturan

D. Membuat Objek Game

E. Membuat Score/Penilaian

F. Membuat Image/Gambar

G. Membuat Sound/Suara

H. Membuat Grafity/gaya Berat

I. Membuat Boucing/memantul

J. Membuat Putaran

K. Membuat Pergerakan

L. Hasil Akhir Game

Be the first to comment

Leave a Reply Cancel reply