<html>
<body>
<h1>Tower Game</h1>
<canvas id="myCanvas" width="800" height="600" style="border:1px SOLID #000; background-color:#87CEEB;"></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!', 180, 350);
}
function animate() {
if (mode != 'gameOver') {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillText('Score: ' + (current - 1).toString(), 10, 30);
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>
没有合适的资源?快使用搜索试试~ 我知道了~
JavaScript 中的塔游戏源代码
共1个文件
html:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 2 浏览量
2024-02-29
22:41:01
上传
评论
收藏 1KB ZIP 举报
温馨提示
Tower Game 是使用 JavaScript 编程语言构建的。这是一个用户友好的应用程序,可以自由定制以满足您的需求。玩家仅使用鼠标与游戏互动;您只需使用鼠标左键即可进行交互。游戏机制非常简单:目标是成功堆叠方块。每次你完美地堆叠,你都会获得一个分数。堆叠时需要准确。当你堆叠得不够近时,你仍然会得到分数,但你的塔会变得更薄。 JavaScript 中的塔游戏安装指南 下载此站点的源代码。 找到并解压缩 zip 文件。 打开解压缩的文件夹 查找并找到文件“index.html”。 在网络浏览器(Chrome、Firefox 等)中打开文件。
资源推荐
资源详情
资源评论
收起资源包目录
TowerGameinJavaScript.zip (1个子文件)
TowerGameinJavaScript
index.html 3KB
共 1 条
- 1
资源评论
新华
- 粉丝: 1w+
- 资源: 629
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功