Author | Li Xuejing
Produced | coder_life
Tower stacking mini game gameplay
I think everyone is familiar with this little game. The point of this game is to stack as many boxes together as possible. When you tap the screen, the moving box at the top will drop down. If you want the moving box to fall on the bottom box, you need to tap the screen at the right time. If you don't click when the two boxes are perfectly aligned, the protruding part of the box will be cut off ("fragments"), and the floor space of the next box will be smaller, making it harder to bounce than the previous one.
Game code
<html>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
context.font = 'bold 30px sans-serif';
let scrollCounter, cameraY, current, mode, xSpeed;
let ySpeed = 5;
let height = 50;
let boxes = [];
boxes[0] = {
x: 300,
y: 300,
width: 200
};
let debris = {
x: 0,
width: 0
};
function newBox() {
boxes[current] = {
x: 0,
y: (current + 10) * height,
width: boxes[current - 1].width
};
}
function gameOver() {
mode = 'gameOver';
context.fillText('Game over. Click to play again!', 50, 50);
}
function animate() {
if (mode != 'gameOver') {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillText('Score: ' + (current - 1).toString(), 100, 200);
for (let n = 0; n < boxes.length; n++) {
let box = boxes[n];
context.fillStyle = 'rgb(' + n * 16 + ',' + n * 16 + ',' + n * 16 + ')';
context.fillRect(box.x, 600 - box.y + cameraY, box.width, height);
}
context.fillStyle = 'red';
context.fillRect(debris.x, 600 - debris.y + cameraY, debris.width, height);
if (mode == 'bounce') {
boxes[current].x = boxes[current].x + xSpeed;
if (xSpeed > 0 && boxes[current].x + boxes[current].width > canvas.width)
xSpeed = -xSpeed;
if (xSpeed < 0 && boxes[current].x < 0)
xSpeed = -xSpeed;
}
if (mode == 'fall') {
boxes[current].y = boxes[current].y - ySpeed;
if (boxes[current].y == boxes[current - 1].y + height) {
mode = 'bounce';
let difference = boxes[current].x - boxes[current - 1].x;
if (Math.abs(difference) >= boxes[current].width) {
gameOver();
}
debris = {
y: boxes[current].y,
width: difference
};
if (boxes[current].x > boxes[current - 1].x) {
boxes[current].width = boxes[current].width - difference;
debris.x = boxes[current].x + boxes[current].width;
} else {
debris.x = boxes[current].x - difference;
boxes[current].width = boxes[current].width + difference;
boxes[current].x = boxes[current - 1].x;
}
if (xSpeed > 0)
xSpeed++;
else
xSpeed--;
current++;
scrollCounter = height;
newBox();
}
}
debris.y = debris.y - ySpeed;
if (scrollCounter) {
cameraY++;
scrollCounter--;
}
}
window.requestAnimationFrame(animate);
}
function restart() {
boxes.splice(1, boxes.length - 1);
mode = 'bounce';
cameraY = 0;
scrollCounter = 0;
xSpeed = 2;
current = 1;
newBox();
debris.y = 0;
}
canvas.onpointerdown = function() {
if (mode == 'gameOver')
restart();
else {
if (mode == 'bounce')
mode = 'fall';
}
};
restart();
animate();
</script>
</body>
</html>
Reference link: https://slicker.me/javascript/tower.htm
#Welcome to leave a message#
The top two with the most comments
Program Life Hand in Hand【Peking University Press】Sent
"Reading Quantum Mechanics from Zero"
As of 14:00 on September 18