<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>勇闯独木桥</title>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border: 1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
// 定时器
var timer;
// 游戏结束控制开关
var iStop = false;
// 得分
var score = 1;
// 起点
var start = {x:0,y:300,w:100,h:100};
// 终点
var end = {x:200,y:300,w:100,h:100};
// 过桥人的位置
var manX = 90;
// 过桥速率
var manStep = 0;
// 桥的宽度
var loadWidth = 0;
// 桥变长的速率
var loadStep = 0;
// 桥倒下控制开关
var loadRun = false;
// 桥倒下的速率
var loadDeg = 0;
// 过桥是否成功
var isSuccess = false;
// 是否正在过桥
var isOn = false;
// 画布移动速率
var canvasMove = 0;
// 终点的位置列表
var intervals = [];
for(var i=0; i<400; i+=10){
intervals.push(i);
}
// 终点的宽度列表
var blocks = [];
for(var i=30; i<100; i+=10){
blocks.push(i);
}
// 桥变长
function pave(){
loadWidth += loadStep;
}
// 人过桥
function step(){
manX += manStep;
}
// 绘制图形
function draw(){
cxt.save();
cxt.fillRect(start.x, start.y, start.w, start.h);
cxt.fillRect(end.x, end.y, end.w, end.h);
cxt.restore();
cxt.save();
cxt.fillStyle = 'gray';
cxt.translate(start.w, 300);
cxt.rotate(loadDeg*Math.PI/180);
cxt.fillRect(0, 0, 10, -loadWidth);
cxt.restore();
cxt.save();
cxt.fillStyle = '#FF4500';
cxt.fillRect(manX, 290, 10, 10);
cxt.restore();
}
// 清除画布
function erase() {
cxt.clearRect(0, 0, canvas.width, canvas.height)
}
// 随机终点
function initEnd(){
var interval = intervals[Math.floor(Math.random()*intervals.length)];
var block = blocks[Math.floor(Math.random()*blocks.length)];
if(interval > start.w && interval + block < 400){
end.x = interval;
end.w = block;
}else{
initEnd();
}
}
// 画得分
function drawScore() {
cxt.save();
cxt.font="40px Verdana";
cxt.fillStyle = 'black';
cxt.fillText('第' + score +'关', 130, 50);
cxt.restore();
}
// 画结束
function drawEnd() {
cxt.save();
cxt.font="40px Verdana";
cxt.fillStyle = 'red';
cxt.fillText('游戏失败，继续努力！', 10, 150);
cxt.restore();
}
// 控制桥的长度-空格键(space)
document.onkeydown = function(ev){
if(ev.keyCode == 32 && !isOn){
loadStep = 2;
isOn = true;
}else{
return;
}
document.onkeyup = function(ev){
if(ev.keyCode == 32 && loadDeg == 0){
loadStep = 0;
loadRun = true;
if(loadWidth + start.w > end.x && loadWidth + start.w < end.x + end.w){
isSuccess = true;
}
}
}
};
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
window.cancelRequestAnimationFrame =
window.cancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame;
function animate() {
erase();
pave();
step();
draw();
drawScore();
// 桥开始倒下
if(loadRun){
loadDeg += 2;
}
// 桥倒下后，人开始过桥
if(loadDeg == 90){
loadRun = false;
manStep = 5;
}
// 过桥是否能成功
if(isSuccess){
// 到达目的地
if(manX >= (end.x + end.w - 10)){
canvasMove = 5;
manStep = 0;
loadWidth = 0;
}
// 初始化，开始下一关过桥
if(end.x == 0){
loadDeg = 0;
isSuccess = false;
isOn = false;
canvasMove = 0;
start.x = 0;
start.w = end.w;
manX = start.w - 10;
initEnd();
score ++;
}else{
start.x -= canvasMove;
end.x -= canvasMove;
manX -= canvasMove;
}
}else{
// 过桥失败，游戏结束
if(manX >= start.w + loadWidth){
manStep = 0;
drawEnd();
iStop = true;
}
}
if(iStop){
cancelRequestAnimationFrame(timer);
}else{
timer = requestAnimationFrame(animate);
}
}
animate();
</script>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-10-05 04:19:31