《推箱子小遊戲》

原創

最帅的小伙

2020-02-21 21:09

文件目錄：

index.html
src>assets>inage
src>module

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./src/assets/index.css">
</head>
<body>
    <div id="game">
       
    </div>
    <script src="./src/module/index.js" type="module"></script>
</body>
</html>

module>index.js入口文件

import './game.js'; // 將game中的代碼執行一遍！

module>map.js地圖數據

//僅用於記錄地圖中的內容（箱子、玩家、牆、空白）

export const SPACE = 0;
export const PLAYER = 1;
export const WALL = 2;
export const BOX = 3;


/**
 * 0. 空白
 * 1. 玩家
 * 2. 牆
 * 3. 箱子
 */
export const content = [
    [0, 0, 2, 2, 2, 2, 2, 0, 0],
    [0, 0, 2, 0, 1, 0, 2, 0, 0],
    [0, 0, 2, 0, 3, 0, 2, 0, 0],
    [2, 2, 2, 0, 0, 0, 2, 2, 2],
    [2, 0, 0, 0, 3, 0, 0, 0, 2],
    [2, 0, 3, 3, 3, 3, 3, 0, 2],
    [2, 0, 0, 0, 3, 0, 0, 0, 2],
    [2, 2, 0, 3, 3, 3, 0, 2, 2],
    [0, 2, 0, 0, 0, 0, 0, 2, 0],
    [0, 2, 0, 0, 3, 0, 0, 2, 0],
    [0, 2, 0, 0, 0, 0, 0, 2, 0],
    [0, 2, 2, 2, 2, 2, 2, 2, 0]
];

/**
 * 正確位置
 */
export const correct = [
    { row: 3, col: 4 },
    { row: 4, col: 4 },
    { row: 5, col: 2 },
    { row: 5, col: 3 },
    { row: 5, col: 4 },
    { row: 5, col: 5 },
    { row: 5, col: 6 },
    { row: 6, col: 4 },
    { row: 7, col: 4 },
    { row: 8, col: 4 },
    { row: 9, col: 4 },
    { row: 10, col: 4 }
];

/**
 * 總列數
 */
export const colNumber = content[0].length;
/**
 * 總行數
 */
export const rowNumber = content.length;

module>ui.js界面渲染

import * as map from "./map.js";

let divContainer = document.getElementById("game");

let boxwidth = 45;// 每個box的寬度
let boxheight = 45;// 每個box的高度


// 設置div容器的寬度
function setDivContainer() {
    // 設置父容器的寬高
    divContainer.style.width = map.colNumber * boxwidth + "px";
    divContainer.style.height = map.rowNumber * boxheight + "px";
}

// 判斷當前位置是否正確
function isCorrect(row, col) {
    for (let i = 0; i < map.correct.length; i++) {
        let point = map.correct[i]; // 拿到其中一個真確的位置
        if (point.row === row && point.col === col) {
            return true;
        }
    }
    return false;
}

// 創建box
function setOnePiece(row, col) {
    
    let value = map.content[row][col];
    let divBox = document.createElement("div");
    divBox.style.left = col * boxwidth + "px";
    divBox.style.top = row * boxheight + "px";
    divBox.className = "item";

    // 當前位置是否爲正確的位置
    let correct = isCorrect(row, col);

    if (value === map.WALL) { // 牆
        divBox.classList.add("wall")
    }
    else if (value === map.PLAYER) { // 玩家
        divBox.classList.add("player")
    }
    else if (value === map.BOX) { // 箱子
        if (correct) {
            divBox.classList.add("over_box")
        } else {
            divBox.classList.add('box')
        }
    } else if (value === map.SPACE) { // 空白
        if (correct) {
            divBox.classList.add("correct")
        } else {
            return;
        }
    }

    divContainer.appendChild(divBox);

}


// 顯示地圖的內容
function setContainer() {
    // 清空容器
     divContainer.innerHTML = '';
    for (let row = 0; row < map.rowNumber; row++) {  // 每行
        for (let col = 0; col < map.colNumber; col++) {  // 每列
            setOnePiece(row, col);
        }
    }
}

export default function () {
    // 設置div容器的寬度
    setDivContainer();
    //  顯示地圖的內容
    setContainer();
}

module>play.js人物移動

import * as map from "./map.js"

/**
 * 按照指定的方向，讓玩家走一步
 * @param {*} direction 
 */
export function playMove(direction){
    const playerPoint = getPlayerPoint();// 得到玩家的位置

    // 獲得玩家下一個位置的信息
    const nextInfo = getNextInfo(playerPoint.row, playerPoint.col, direction);

    // 什麼情況下不能移動
    if(nextInfo.value === map.WALL){
        return false ; // 下一個位置時牆
    }

    // 能移動
    if(nextInfo.value === map.SPACE){ // 下一個是空白的
        exchange(playerPoint,nextInfo);
        return true;
    }else{
        // 下一個是箱子
        const nextbox = getNextInfo(nextInfo.row, nextInfo.col, direction);
        if(nextbox.value === map.SPACE){
            // 可以移動
            exchange(nextInfo, nextbox);
            exchange(playerPoint, nextInfo);
            return true;
        }else{
            return false;
        }
    }

}

function exchange(playerPoint, nextInfo){
   const temp = map.content[playerPoint.row][playerPoint.col];
   map.content[playerPoint.row][playerPoint.col] = map.content[nextInfo.row][nextInfo.col];
   map.content[nextInfo.row][nextInfo.col] = temp;
} 

// 得到玩家下一個位置的信息
function getNextInfo(row, col, direction){
    if(direction === "left"){
        return {
            row : row,
            col : col - 1,
            value : map.content[row][col - 1]
        }
    } 
    else if(direction === "right"){
        return {
            row : row,
            col : col + 1,
            value : map.content[row][col + 1]
        }
    }
    else if(direction === "up"){
        return {
            row : row - 1,
            col : col ,
            value : map.content[row - 1][col]
        }
    }
    else if(direction === "down"){
        return {
            row : row + 1,
            col : col,
            value : map.content[row + 1][col]
        }
    }
}

export function isWin(){
    for(var i = 0 ; i < map.correct.length ; i ++ ){
        const point = map.correct[i];
        if(map.content[point.row][point.col] !== map.BOX){
            return false;
        }
    }
    return true;
}

// 得到玩家的位置
function getPlayerPoint(){
    for(let row = 0 ; row < map.rowNumber ; row ++){
        for(let col = 0; col < map.colNumber ; col ++){
            if(map.content[row][col] === map.PLAYER){
                return {
                    row ,
                    col
                }
            }
        }
    }
    throw new Error("地圖上沒有玩家");
}

module>game.js初始化以及事件處理

import ShowUI  from "./ui.js"  ; // 默認導出不需要{}括起來
import { playMove , isWin} from "./play.js";

ShowUI();
let over = false;

window.onkeydown = (e) => {
    if(over){
        return;
    }
    let result = false;
    if(e.key === "ArrowDown"){
        result = playMove("down")
    } else if(e.key === "ArrowUp"){
        result = playMove("up")
    } else if(e.key === "ArrowLeft"){
        result = playMove("left")
    } else if(e.key === "ArrowRight"){
        result = playMove("right")
    }
    
    if(result){
        ShowUI();
        if(isWin()){
            over = true;
            setTimeout(() => {
                alert("遊戲勝利");
            }, 0);
        };
    }
}