見縫插針 一個canvas小遊戲
阿新 • • 發佈:2019-01-08
var canvas=document.querySelector("#canvas");
var ctx=canvas.getContext("2d");
var centerX = 400;//大圓X軸座標
var centerY = 200;//大圓Y軸座標
var bigRadius = 50;// 大圓半徑
var smallRadius = 10;//小球半徑
var line = 100;//線條的長度
var balls = [];//定義一個用於儲存轉動小球陣列 = {'angle':120,numStr:''}
var waitBalls = [];//定義一個用於儲存等待小球陣列
//遊戲模擬資料
var level;//定義遊戲關卡
//重置關卡
var re=document.querySelector("#reset");
re.onclick=function(){
window.location.href = "index.html#"+0;
};
if(parseInt(window.location.href.split("#")[1])){
level = parseInt(window.location.href.split("#")[1]);
console.log(level);
}else{
level = 0;
}
var levelArr=[ //設定關卡 ballNum轉動小球 waitNum等待小球 speed速度
{"ballNum":3, "waitNum":5, "speed":1},
{"ballNum":4, "waitNum":8, "speed":1},
{"ballNum":5, "waitNum":5, "speed":1},
{"ballNum":6, "waitNum":8, "speed":1},
{"ballNum":7, "waitNum":10, "speed":1},
{"ballNum":8, "waitNum":12, "speed":1},
{"ballNum":9, "waitNum":15, "speed":1},
{"ballNum":10, "waitNum":18, "speed":1},
{"ballNum":5, "waitNum":8, "speed":2},
{"ballNum":6, "waitNum":10, "speed":2},
{"ballNum":7, "waitNum":12, "speed":2},
{"ballNum":6, "waitNum":8, "speed":3},
{"ballNum":7, "waitNum":10, "speed":3},
{"ballNum":8, "waitNum":12, "speed":3},
{"ballNum":9, "waitNum":14, "speed":3}
];
var ballNum = levelArr[level].ballNum;//定義轉動小球數量
var waitNum = levelArr[level].waitNum;//定義等待小球數量
var speed=levelArr[level].speed;//定義旋轉速度 用以控制遊戲難度
//定義全域性的畫筆樣式
ctx.textAlign="center";//水平居中
ctx.textBaseline="middle";//垂直居中
function drawBig(){
//繪製大圓
ctx.beginPath();
ctx.arc(centerX,centerY,bigRadius,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle="#000";
ctx.fill();
//繪製關卡數
ctx.fillStyle="#fff";
ctx.font = "50px 微軟雅黑";
ctx.fillText(level+1,centerX,centerY);
}
//小球轉動資料
for(var i=0;i<ballNum;i++){
var angle=360/ballNum*i;
balls.push({
angle:angle,
numStr:''
})
}
//整體旋轉
function drawBalls(){
ctx.save();
ctx.clearRect(200,20,400,350);
drawBig();
ctx.translate(centerX,centerY);//設定圓心位置
//繪製轉動小球
balls.forEach(function(item){//通過迴圈遍歷繪製小球,item 為陣列每次遍歷的元素
ctx.save();//儲存
//旋轉
ctx.rotate(Math.PI/180*item.angle);
item.angle+=speed;//增加角度 用以控制遊戲難度
if(item.angle>=360)item.angle=item.angle-360;//角度恢復
//繪製小球線條
ctx.beginPath();
ctx.moveTo(0,-bigRadius);
ctx.lineTo(0,-(bigRadius+line));
ctx.stroke();
ctx.closePath();
//繪製小球
ctx.beginPath();
ctx.fillStyle="#000";
ctx.arc(0,-(bigRadius+line),smallRadius,0,Math.PI*2);
ctx.fill();
ctx.closePath();
//繪製數字
if(item.numStr!=''){
ctx.fillStyle="#fff";
ctx.font="12px 微軟雅黑";
ctx.fillText(item.numStr,0,-(bigRadius+line));
}
ctx.restore();//恢復
});
ctx.restore();
window.requestAnimationFrame(drawBalls);
}
drawBalls();
//小球儲存資訊
for(var i=waitNum;i>0;i--){
waitBalls.push({
angle:'',
numStr:i
})
}
//繪製等待小球
function drawWaitBalls(){
//清空等待小球區域位置
ctx.clearRect(390,350,20,450);
//等待的小球
waitBalls.forEach(function(item,index){//通過迴圈遍歷繪製小球,item 為陣列每次遍歷的元素 index是索引值
ctx.save();//儲存
//位移
ctx.translate(0,30*index);
//繪製等待小球
ctx.beginPath();
ctx.fillStyle="#000";
ctx.arc(centerX,centerY+200,smallRadius,0,Math.PI*2);
ctx.fill();
ctx.closePath();
ctx.fillStyle="#fff";
ctx.font = "12px 微軟雅黑";
ctx.fillText(item.numStr,centerX,centerY+200);
ctx.restore();
});
}
drawWaitBalls();
//canvas 點選事件
var gameOver=false;
canvas.onclick=function(){
//刪除等待小球,並且把刪除的小球插入到轉動小球的末尾處
var obj = waitBalls.shift();
//更改小球的角度
obj.angle=180;
//通過迴圈判斷小球是否被撞
for(var i=0;i<balls.length;i++){
//console.log(balls[i].angle);
if(balls[i].angle>=172.4&&balls[i].angle<=187.6){
gameOver=true;
break;
}
}
//如果等待小球撞到旋轉小球,遊戲就結束
if(gameOver){
alert('闖關失敗');
//重置當前關卡
window.location.href = "index.html#"+level;
gameOver=false;
}else if(waitBalls.length==0){
alert('成功過關');
level++;
if(level>=levelArr.length)alert('通關');
window.location.href = "index.html#"+level;
//drawBalls();
//drawWaitBalls();
//location.reload();//重新載入頁面 重新整理
}
//將刪除的小球插入
balls.push(obj);
//重新繪製等待小球區域
drawWaitBalls();
};
var ctx=canvas.getContext("2d");
var centerX = 400;//大圓X軸座標
var centerY = 200;//大圓Y軸座標
var bigRadius = 50;// 大圓半徑
var smallRadius = 10;//小球半徑
var line = 100;//線條的長度
var balls = [];//定義一個用於儲存轉動小球陣列 = {'angle':120,numStr:''}
var waitBalls = [];//定義一個用於儲存等待小球陣列
//遊戲模擬資料
var level;//定義遊戲關卡
//重置關卡
var re=document.querySelector("#reset");
re.onclick=function(){
window.location.href = "index.html#"+0;
};
if(parseInt(window.location.href.split("#")[1])){
level = parseInt(window.location.href.split("#")[1]);
console.log(level);
}else{
level = 0;
}
var levelArr=[ //設定關卡 ballNum轉動小球 waitNum等待小球 speed速度
{"ballNum":3, "waitNum":5, "speed":1},
{"ballNum":4, "waitNum":8, "speed":1},
{"ballNum":5, "waitNum":5, "speed":1},
{"ballNum":6, "waitNum":8, "speed":1},
{"ballNum":7, "waitNum":10, "speed":1},
{"ballNum":8, "waitNum":12, "speed":1},
{"ballNum":9, "waitNum":15, "speed":1},
{"ballNum":10, "waitNum":18, "speed":1},
{"ballNum":5, "waitNum":8, "speed":2},
{"ballNum":6, "waitNum":10, "speed":2},
{"ballNum":7, "waitNum":12, "speed":2},
{"ballNum":6, "waitNum":8, "speed":3},
{"ballNum":7, "waitNum":10, "speed":3},
{"ballNum":8, "waitNum":12, "speed":3},
{"ballNum":9, "waitNum":14, "speed":3}
];
var ballNum = levelArr[level].ballNum;//定義轉動小球數量
var waitNum = levelArr[level].waitNum;//定義等待小球數量
var speed=levelArr[level].speed;//定義旋轉速度 用以控制遊戲難度
//定義全域性的畫筆樣式
ctx.textAlign="center";//水平居中
ctx.textBaseline="middle";//垂直居中
function drawBig(){
//繪製大圓
ctx.beginPath();
ctx.arc(centerX,centerY,bigRadius,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle="#000";
ctx.fill();
//繪製關卡數
ctx.fillStyle="#fff";
ctx.font = "50px 微軟雅黑";
ctx.fillText(level+1,centerX,centerY);
}
//小球轉動資料
for(var i=0;i<ballNum;i++){
var angle=360/ballNum*i;
balls.push({
angle:angle,
numStr:''
})
}
//整體旋轉
function drawBalls(){
ctx.save();
ctx.clearRect(200,20,400,350);
drawBig();
ctx.translate(centerX,centerY);//設定圓心位置
//繪製轉動小球
balls.forEach(function(item){//通過迴圈遍歷繪製小球,item 為陣列每次遍歷的元素
ctx.save();//儲存
//旋轉
ctx.rotate(Math.PI/180*item.angle);
item.angle+=speed;//增加角度 用以控制遊戲難度
if(item.angle>=360)item.angle=item.angle-360;//角度恢復
//繪製小球線條
ctx.beginPath();
ctx.moveTo(0,-bigRadius);
ctx.lineTo(0,-(bigRadius+line));
ctx.stroke();
ctx.closePath();
//繪製小球
ctx.beginPath();
ctx.fillStyle="#000";
ctx.arc(0,-(bigRadius+line),smallRadius,0,Math.PI*2);
ctx.fill();
ctx.closePath();
//繪製數字
if(item.numStr!=''){
ctx.fillStyle="#fff";
ctx.font="12px 微軟雅黑";
ctx.fillText(item.numStr,0,-(bigRadius+line));
}
ctx.restore();//恢復
});
ctx.restore();
window.requestAnimationFrame(drawBalls);
}
drawBalls();
//小球儲存資訊
for(var i=waitNum;i>0;i--){
waitBalls.push({
angle:'',
numStr:i
})
}
//繪製等待小球
function drawWaitBalls(){
//清空等待小球區域位置
ctx.clearRect(390,350,20,450);
//等待的小球
waitBalls.forEach(function(item,index){//通過迴圈遍歷繪製小球,item 為陣列每次遍歷的元素 index是索引值
ctx.save();//儲存
//位移
ctx.translate(0,30*index);
//繪製等待小球
ctx.beginPath();
ctx.fillStyle="#000";
ctx.arc(centerX,centerY+200,smallRadius,0,Math.PI*2);
ctx.fill();
ctx.closePath();
ctx.fillStyle="#fff";
ctx.font = "12px 微軟雅黑";
ctx.fillText(item.numStr,centerX,centerY+200);
ctx.restore();
});
}
drawWaitBalls();
//canvas 點選事件
var gameOver=false;
canvas.onclick=function(){
//刪除等待小球,並且把刪除的小球插入到轉動小球的末尾處
var obj = waitBalls.shift();
//更改小球的角度
obj.angle=180;
//通過迴圈判斷小球是否被撞
for(var i=0;i<balls.length;i++){
//console.log(balls[i].angle);
if(balls[i].angle>=172.4&&balls[i].angle<=187.6){
gameOver=true;
break;
}
}
//如果等待小球撞到旋轉小球,遊戲就結束
if(gameOver){
alert('闖關失敗');
//重置當前關卡
window.location.href = "index.html#"+level;
gameOver=false;
}else if(waitBalls.length==0){
alert('成功過關');
level++;
if(level>=levelArr.length)alert('通關');
window.location.href = "index.html#"+level;
//drawBalls();
//drawWaitBalls();
//location.reload();//重新載入頁面 重新整理
}
//將刪除的小球插入
balls.push(obj);
//重新繪製等待小球區域
drawWaitBalls();
};