chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Created canvas pong game in game.html

Browse Source
This commit is contained in:
Chuck Dries 2017-03-20 21:46:44 -07:00
parent cbcb2050a8
commit f5f78ab290
1 changed files with 101 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
game.html Normal file
View File

@ -0,0 +1,101 @@
<!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">
<title>Test Canvas Game</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="gc">
</canvas>
<script>
//setup
c = document.getElementById("gc");
cc = c.getContext('2d');
c.height = window.innerHeight;
c.width = window.innerWidth;
setInterval(update, 1000 / 30);
c.addEventListener('mousemove', function(e) {
p1y = e.clientY - ph / 2;
})
//game setup
p1y = p2y = 40;
pt = 10;
ph = 100;
bx = by = xv = yv = 10;
reset();
bd = 6;
score1 = score2 = 0;
ais = 5;
function reset() {
bx = c.width / 2;
by = c.height / 2;
xv = -xv;
yv = 4;
}
function update() {
//move ball
bx += xv;
by += yv;
if (by < 0 && yv < 0) {
yv = -yv;
}
if (by > c.height && yv > 0) {
yv = -yv;
}
//check collision with sides for scoring
if (bx > c.width) {
if (by > p2y && by < p2y + ph) {
xv = -xv;
dy = by - (p2y + ph / 2);
yv = dy * .3;
} else {
score1++;
reset();
}
}
if (bx < 0) {
if (by > p1y && by < p1y + ph) {
xv = -xv;
dy = by - (p1y + ph / 2);
yv = dy * .3;
} else {
score2++
reset();
}
}
//ai
if (p2y + ph / 2 < by) {
p2y += ais;
} else {
p2y -= ais;
}
//draw background
cc.fillStyle = 'black';
cc.fillRect(0, 0, c.width, c.height);
//draw paddles
cc.fillStyle = 'white';
cc.fillRect(0, p1y, pt, ph);
cc.fillRect(c.width - pt, p2y, pt, ph);
//draw ball
cc.fillRect(bx - bd / 2, by - bd / 2, bd, bd);
cc.fillText(score1, 100, 100);
cc.fillText(score2, c.width - 100, 100);
}
</script>
</body>
</html>