最後一個遊戲是走迷宮的小遊戲,今天呢會先畫出整張迷宮地圖;如果一眼能看到整張地圖的話難度其實不高,所以明天會縮小顯示的畫面,只能看到部分的路,一個地圖迷霧的效果;第三天則會畫出玩家並且以上下左右的案件來控制移動;第四天則是做個收尾.最後一個遊戲的計畫是這樣.
那就先來把地圖畫出來吧.因為之前做過相似的,這邊很快畫一下吧.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Second Game</title>
<meta name="description" content="第三個遊戲">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<canvas id="playground" width="1320" height="880"></canvas>
<script>
// 地圖設定
const MAP_BRICKS = 40;
const BRICK_SPACING = 1;
const BRICK_COLS = 33;
const BRICK_ROWS = 22;
var map = [
0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1,
1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 1, 1,
1, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1,
1, 0, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 1,
1, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1,
1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1,
1, 0, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1,
1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1,
1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1,
1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1,
1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1,
1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1,
1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1,
1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1,
1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1,
1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1,
1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1,
1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 0, 1,
1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
];
window.onload = () => {
canvas = document.getElementById('playground');
canvasContext = canvas.getContext('2d');
//一秒更新幾次畫面
var timesPerSec = 30;
setInterval(drawAll, 1000 / timesPerSec);
}
// 負責更新畫面
drawAll = () => {
move();
draw();
}
// 負責畫畫
draw = () => {
// background
drawRectangle(0, 0, canvas.width, canvas.height, 'black');
// 畫地圖
drawMap();
}
// 負責處理動作
move = () => {
}
// 畫地圖
drawMap = () => {
for (var col = 0; col < BRICK_COLS; col++) {
for (var row = 0; row < BRICK_ROWS; row++) {
if (mapBrick(col, row)) {
var brickX = col * MAP_BRICKS;
var brickY = row * MAP_BRICKS;
drawRectangle(brickX, brickY, MAP_BRICKS - BRICK_SPACING, MAP_BRICKS - BRICK_SPACING, 'gray');
}
}
}
}
brickToIndex = (col, row) => {
return (col + BRICK_COLS * row);
}
mapBrick = (col, row) => {
var index = brickToIndex(col, row);
return (map[index] == 1);
}
// 矩形元件
drawRectangle = (topLeftX, topLeftY, boxWidth, boxHeight, color) => {
canvasContext.fillStyle = color;
canvasContext.fillRect(topLeftX, topLeftY, boxWidth, boxHeight);
}
// 圓形元件
drawCircle = (centerX, centerY, r, color) => {
canvasContext.fillStyle = color;
canvasContext.beginPath();
canvasContext.arc(centerX, centerY, r, 0, Math.PI * 2);
canvasContext.fill();
}
// 畫線
drawLine = (beginX, beginY, endX, endY, color) => {
canvasContext.strokeStyle = color;
canvasContext.beginPath();
canvasContext.moveTo(beginX, beginY);
canvasContext.lineTo(endX, endY);
canvasContext.stroke();
}
// 畫生命
drawLife = (lifeX, lifeY, size, color) => {
canvasContext.fillStyle = color;
canvasContext.beginPath();
canvasContext.arc(lifeX + size / 4, lifeY + size / 4, size / 4, Math.PI * 1, Math.PI * 0);
canvasContext.arc(lifeX + size * 3 / 4, lifeY + size / 4, size / 4, Math.PI * 1, Math.PI * 0);
canvasContext.moveTo(lifeX + size, lifeY + size / 4);
canvasContext.lineTo(lifeX + size / 2, lifeY + size);
canvasContext.lineTo(lifeX, lifeY + size / 4);
canvasContext.fill();
}
// 畫出生命
showLife = (num) => {
for (let life_count = 0; life_count < num; life_count++) {
drawLife(LIFE_SIZE * life_count, 0, LIFE_SIZE, 'red');
}
}
</script>
</body>
</html>
這邊是一次畫出整張地圖.那明天再繼續吧