穷人版迷宫游戏

发表于   |   分类于   |  

enter image description here

运行效果

这几天在看canvas,这是用canvas写的”穷人版”迷宫游戏…

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>maze</title>
    <link href="css/maze.css" rel="stylesheet">
</head>
<body>
    <div class = wrapper>
        <canvas id = "canvas" width = "482px" height = "482px"></canvas>
        <div class = "btn">
            <p>PS:  控制方向键移动笑脸走出迷宫,如果键盘失效请点击右边按钮移动!</p>
            <span>请选择游戏模式:</span>
            <button id = "easy">简单</button>
            <button id = "normal">普通</button>
            <button id = "difficult">困难</button>
        </div>
        <img src = "img/face.png" id = "face">
        <img src = "img/maze1.png" id = "maze1">
        <img src = "img/maze2.png" id = "maze2">
        <img src = "img/maze3.png" id = "maze3">
        <button id = "up">上</button>
        <button id = "down">下</button>
        <button id = "left">左</button>
        <button id = "right">右</button>
    </div>
    <script src="js/maze.js"></script>
</body>
</html>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
body {
    /*background: url("../img/bg1.jpg") fixed;*/
    background-color: #000000;
}
.wrapper {
    font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
    width: 100%;
    text-align: center;
}
#canvas {
    border: 1px solid #000000;
}
img {
    display: none;
}
p {
    font-size: 1.1em;
    color: white;
}
span {
    font-size: 1.2em;
    color: white;
    margin: 0;
}
button {
    border-radius: 5px;
    padding: 3px 8px;
    margin: 0 5px;
    border: none;
    background-color: #ffb33b;
    color: #000000;
    font-size: 1em;
    letter-spacing: 2px;
    box-shadow: 1px 1px white;
}
#up {
    position: fixed;
    top: 235px;
    right: 200px;
}
#down {
    position: fixed;
    top: 315px;
    right: 200px;
}
#left {
    position: fixed;
    top: 275px;
    right: 240px;
}
#right {
    position: fixed;
    top: 275px;
    right: 160px;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
var canvas,context;
var x = 0,y = 0,addx = 0,addy = 0;
var t;
window.onload = function() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    var mazeImg1 = document.getElementById("maze1");
    drawMaze(mazeImg1,228,2);
    window.onkeydown = move;
    window.onkeyup = stop;
};
//绘画迷宫图片
function drawMaze(newImg,newX,newY) {
    clearTimeout(t);
    canvas.width = newImg.width;
    canvas.height = newImg.height;
    context.drawImage(newImg,0,0);
    x = newX, y = newY;
    var faceImg = document.getElementById("face");
    context.drawImage(faceImg,x,y);
    t = setTimeout(drawFrame,10);
};
//判断方向键改变方向
function move(e) {
    addx = 0;
    addy = 0;
    if(e.keyCode == 37) {
        addx = -1;
    } else if(e.keyCode == 38) {
        addy = -1;
    } else if(e.keyCode == 39) {
        addx = 1;
    } else if(e.keyCode == 40) {
        addy = 1;
    }
};
//停止移动
function stop() {
    addx = 0;
    addy = 0;
};
//绘画笑脸函数,通过不断调用函数运动
function drawFrame() {
        x += addx;
        y += addy;
        if (check()) {
            x -= addx;
            y -= addy;
            addx = 0;
            addy = 0;
        }
        var faceImg = document.getElementById("face");
        context.drawImage(faceImg, x, y);
        if (y > (canvas.height - 12)) {
            alert("恭喜过关了!");
            return;
        }
    t = setTimeout(drawFrame,20);
};
//检查是否碰墙了
function check() {
    var imgData = context.getImageData(x,y,10,10);
    var pixels = imgData.data;
    for(var i = 0; i < pixels.length; i += 4) {
        var red = pixels[i];
        var green = pixels[i+1];
        var blue = pixels[i+2];
        if(red == 0 && green == 0 && blue == 0) {
            return true;
        }
    }
    return false;
};
//按钮控制运动,起到方向键的作用
document.getElementById("up").onclick = function(){
    addy = -1;
};
document.getElementById("down").onclick = function(){
    addy = 1;
};
document.getElementById("left").onclick = function(){
    addx = -1;
};
document.getElementById("right").onclick = function(){
    addx = 1;
};
var mazeImg1 = document.getElementById("maze1");
var mazeImg2 = document.getElementById("maze2");
var mazeImg3 = document.getElementById("maze3");
var easyBtn = document.getElementById("easy");
var normalBtn = document.getElementById("normal");
var difficultBtn = document.getElementById("difficult");
//改变迷宫难度
easyBtn.onclick = function() {
    drawMaze(mazeImg1,228,2);
};
normalBtn.onclick = function() {
    drawMaze(mazeImg2,308,2);
}
difficultBtn.onclick = function() {
    drawMaze(mazeImg3,436,2);
};

运行链接：http://codepen.io/wzc/full/zZdody

(因为放在codepen上,所以键盘和按钮可能失效了,因为canvas是“tainted”(被污染的，脏的),会报Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

我的解决办法是把文件夹放在服务器上,可以本地搭建服务器,我的解决办法是搭建了appserv,把整个迷宫文件夹放在www文件夹里,然后在浏览器输入http://localhost/maze/maze.html 就可以打开网页然后canvas就可以正常运行了…