120 lines
3.1 KiB
HTML
120 lines
3.1 KiB
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" />
|
|
<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;
|
|
c.addEventListener("mousemove", function (e) {
|
|
p1y = e.clientY - ph / 2;
|
|
});
|
|
|
|
lastTime = Date.now();
|
|
deltaTime = 0;
|
|
fps = 0;
|
|
|
|
//gameplay variables
|
|
p1y = p2y = 40;
|
|
pt = 10;
|
|
ph = 100;
|
|
bx = by = xv = yv = 500; //just making sure bx and by exist, they'll be reset when the game first starts
|
|
bd = 12;
|
|
score1 = score2 = 0;
|
|
ais = 5;
|
|
|
|
function reset() {
|
|
bx = c.width / 2;
|
|
by = c.height / 2;
|
|
xv = -xv;
|
|
yv = 4;
|
|
}
|
|
|
|
function update() {
|
|
//measure timing
|
|
now = Date.now();
|
|
deltaTime = (now - lastTime) / 1000;
|
|
lastTime = now;
|
|
fps = 1 / deltaTime;
|
|
//move ball
|
|
bx += xv * deltaTime;
|
|
by += yv * deltaTime;
|
|
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 * 10;
|
|
} else {
|
|
score1++;
|
|
reset();
|
|
}
|
|
}
|
|
if (bx < 0) {
|
|
if (by > p1y && by < p1y + ph) {
|
|
xv = -xv;
|
|
dy = by - (p1y + ph / 2);
|
|
yv = dy * 10; //.3
|
|
} else {
|
|
score2++;
|
|
reset();
|
|
}
|
|
}
|
|
//ai
|
|
if (p2y + ph / 2 < by) {
|
|
p2y += ais;
|
|
} else {
|
|
p2y -= ais;
|
|
}
|
|
//draw background
|
|
var gradient = cc.createLinearGradient(0, 0, c.width, c.height);
|
|
gradient.addColorStop("0", "#ff146e");
|
|
gradient.addColorStop("1", "#145aff");
|
|
cc.fillStyle = gradient;
|
|
// cc.fillStyle="white";
|
|
cc.fillRect(0, 0, c.width, c.height);
|
|
//draw paddles
|
|
cc.fillStyle = "cyan";
|
|
cc.fillRect(0, p1y, pt, ph);
|
|
cc.fillStyle = "red";
|
|
cc.fillRect(c.width - pt, p2y, pt, ph);
|
|
//draw ball
|
|
cc.fillStyle = "lightgreen";
|
|
cc.fillRect(bx - bd / 2, by - bd / 2, bd, bd);
|
|
//draw scores
|
|
cc.fillStyle = "white";
|
|
cc.font = "20px Times";
|
|
cc.fillText(score1, 100, 100);
|
|
cc.fillText(score2, c.width - 100, 100);
|
|
//draw framerate
|
|
cc.fillText("framerate: " + fps, c.width / 2 - 100, 100);
|
|
|
|
window.requestAnimationFrame(update); //Keep the game running
|
|
}
|
|
reset(); //prepare the game
|
|
update(); //start the game
|
|
</script>
|
|
</body>
|
|
</html>
|