h5小球走迷宫小游戏源码

无意中找到的一个挺有意思的小游戏，关键是用h5写的，下面就分享给大家源码

还是先来看小游戏的截图

可以用键盘的三个键去控制它，然后通关

下面是源代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

* {

  margin: 0;

  padding: 0;

}

body {

  background: #f2f2f2;

}

canvas {

  display:block;

  margin: 40px auto 20px;

  border: 1px solid #333;

  box-shadow: 0 0 16px 2px rgba(0,0,0,0.8);

}

p, a {

  font-family: Helvetica, Arial, sans-serif;

  font-size: 19px;

  color: #777;

  display: block;

  width: 400px;

  margin: 0 auto;

  text-align: center;

  text-decoration:none;

}

.info {

  margin:14px auto;

  text-align: justify;

  font-size: 18px;

  color: #999;

}

a {

  color:#3377ee;

}

</style>

</head>

<body>

<canvas id="canvas"></canvas>

<p>使用左键、右键和上箭头键移动。</p>

<script>

/* Customisable map data */

var map = {

    tile_size: 16,

    /*

    Key vairables:

    id       [required] - an integer that corresponds with a tile in the data array.

    colour   [required] - any javascript compatible colour variable.

    solid    [optional] - whether the tile is solid or not, defaults to false.

    bounce   [optional] - how much velocity is preserved upon hitting the tile, 0.5 is half.

    jump     [optional] - whether the player can jump while over the tile, defaults to false.

    friction [optional] - friction of the tile, must have X and Y values (e.g {x:0.5, y:0.5}).

    gravity  [optional] - gravity of the tile, must have X and Y values (e.g {x:0.5, y:0.5}).

    fore     [optional] - whether the tile is drawn in front of the player, defaults to false.

    script   [optional] - refers to a script in the scripts section, executed if it is touched.

    */

    keys: [

        {id: 0, colour: '#333', solid: 0},

        {id: 1, colour: '#888', solid: 0},

        {id: 2,colour: '#555',solid: 1,bounce: 0.35},

        {id: 3,colour: 'rgba(121, 220, 242, 0.4)',friction: {x: 0.9,y: 0.9},gravity: {x: 0,y: 0.1},jump: 1,fore: 1},

        {id: 4,colour: '#777',jump: 1},

        {id: 5,colour: '#E373FA',solid: 1,bounce: 1.1},

        {id: 6,colour: '#666',solid: 1,bounce: 0},

        {id: 7,colour: '#73C6FA',solid: 0,script: 'change_colour'},

        {id: 8,colour: '#FADF73',solid: 0,script: 'next_level'},

        {id: 9,colour: '#C93232',solid: 0,script: 'death'},

        {id: 10,colour: '#555',solid: 1},

        {id: 11,colour: '#0FF',solid: 0,script: 'unlock'}

    ],

    /* An array representing the map tiles. Each number corresponds to a key */

    data: [

        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 6, 6, 6, 6, 6, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 1, 1, 1, 1, 1, 2, 2, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 7, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 4, 2, 2, 2, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2, 2, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 2],

        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],

        [2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2],

        [2, 1, 2, 2, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2],

        [2, 1, 2, 2, 2, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2],

        [2, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 8, 1, 1, 1, 2],

        [2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2],

        [2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 9, 9, 9, 2, 10, 10, 10, 10, 10, 10, 1, 1, 1, 1, 1, 1, 1, 11, 2, 2, 2, 2, 4, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 10, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 2, 2, 2, 2, 2, 2, 2],

        [2, 6, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 2, 1, 1, 1, 1, 1, 1, 2],

        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 4, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 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, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2],

        [2, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 6, 6, 6, 2, 2, 2, 2, 2, 2, 6, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 2, 2, 2, 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, 2, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],

        [2, 1, 1, 2, 2, 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, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 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, 2, 2, 2, 1, 1, 1, 1, 2, 5, 5, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 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, 2, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 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, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 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, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 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, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 2],

        [2, 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, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],

        [2, 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, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],

        [2, 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, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],

        [2, 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, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 2],

        [2, 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, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2],

        [2, 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, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2],

        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 5, 5, 5, 1, 1, 1, 1, 1, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2],

        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]

    ],

    /* Default gravity of the map */

    gravity: {

        x: 0,

        y: 0.3

    },

    /* Velocity limits */

    vel_limit: {

        x: 2,

        y: 16

    },

    /* Movement speed when the key is pressed */

    movement_speed: {

        jump: 6,

        left: 0.3,

        right: 0.3

    },

    /* The coordinates at which the player spawns and the colour of the player */

    player: {

        x: 2,

        y: 2,

        colour: '#FF9900'

    },

    /* scripts refered to by the "script" variable in the tile keys */

    scripts: {

        /* you can just use "this" instead of your engine variable ("game"), but Codepen doesn't like it */

        change_colour: 'game.player.colour = "#"+(Math.random()*0xFFFFFF<<0).toString(16);',

        /* you could load a new map variable here */

        next_level: 'alert("Yay! You won! Reloading map.");game.load_map(map);',

        death: 'alert("You died!");game.load_map(map);',

        unlock: 'game.current_map.keys[10].solid = 0;game.current_map.keys[10].colour = "#888";'

    }

};

/* Clarity engine */

var Clarity = function () {

    this.alert_errors   = false;

    this.log_info       = true;

    this.tile_size      = 16;

    this.limit_viewport = false;

    this.jump_switch    = 0;

    this.viewport = {

        x: 200,

        y: 200

    };

    this.camera = {

        x: 0,

        y: 0

    };

    this.key = {

        left: false,

        right: false,

        up: false

    };

    this.player = {

        loc: {

            x: 0,

            y: 0

        },

        vel: {

            x: 0,

            y: 0

        },

        can_jump: true

    };

    window.onkeydown = this.keydown.bind(this);

    window.onkeyup   = this.keyup.bind(this);

};

Clarity.prototype.error = function (message) {

    if (this.alert_errors) alert(message);

    if (this.log_info) console.log(message);

};

Clarity.prototype.log = function (message) {

    if (this.log_info) console.log(message);

};

Clarity.prototype.set_viewport = function (x, y) {

    this.viewport.x = x;

    this.viewport.y = y;

};

Clarity.prototype.keydown = function (e) {

    var _this = this;

    switch (e.keyCode) {

    case 37:

        _this.key.left = true;

        break;

    case 38:

        _this.key.up = true;

        break;

    case 39:

        _this.key.right = true;

        break;

    }

};

Clarity.prototype.keyup = function (e) {

    var _this = this;

    switch (e.keyCode) {

    case 37:

        _this.key.left = false;

        break;

    case 38:

        _this.key.up = false;

        break;

    case 39:

        _this.key.right = false;

        break;

    }

};

Clarity.prototype.load_map = function (map) {

    if (typeof map      === 'undefined'

     || typeof map.data === 'undefined'

     || typeof map.keys === 'undefined') {

        this.error('Error: Invalid map data!');

        return false;

    }

    this.current_map = map;

    this.current_map.background = map.background || '#333';

    this.current_map.gravity = map.gravity || {x: 0, y: 0.3};

    this.tile_size = map.tile_size || 16;

    var _this = this;

    this.current_map.width = 0;

    this.current_map.height = 0;

    map.keys.forEach(function (key) {

        map.data.forEach(function (row, y) {

            _this.current_map.height = Math.max(_this.current_map.height, y);

            row.forEach(function (tile, x) {

                _this.current_map.width = Math.max(_this.current_map.width, x);

                if (tile == key.id)

                    _this.current_map.data[y][x] = key;

            });

        });

    });

    this.current_map.width_p = this.current_map.width * this.tile_size;

    this.current_map.height_p = this.current_map.height * this.tile_size;

    this.player.loc.x = map.player.x * this.tile_size || 0;

    this.player.loc.y = map.player.y * this.tile_size || 0;

    this.player.colour = map.player.colour || '#000';

    this.key.left  = false;

    this.key.up    = false;

    this.key.right = false;

    this.camera = {

        x: 0,

        y: 0

    };

    this.player.vel = {

        x: 0,

        y: 0

    };

    this.log('Successfully loaded map data.');

    return true;

};

Clarity.prototype.get_tile = function (x, y) {

    return (this.current_map.data[y] && this.current_map.data[y][x]) ? this.current_map.data[y][x] : 0;

};

Clarity.prototype.draw_tile = function (x, y, tile, context) {

    if (!tile || !tile.colour) return;

    context.fillStyle = tile.colour;

    context.fillRect(

        x,

        y,

        this.tile_size,

        this.tile_size

    );

};

Clarity.prototype.draw_map = function (context, fore) {

    for (var y = 0; y < this.current_map.data.length; y++) {

        for (var x = 0; x < this.current_map.data[y].length; x++) {

            if ((!fore && !this.current_map.data[y][x].fore) || (fore && this.current_map.data[y][x].fore)) {

                var t_x = (x * this.tile_size) - this.camera.x;

                var t_y = (y * this.tile_size) - this.camera.y;

                if(t_x < -this.tile_size

                || t_y < -this.tile_size

                || t_x > this.viewport.x

                || t_y > this.viewport.y) continue;

                this.draw_tile(

                    t_x,

                    t_y,

                    this.current_map.data[y][x],

                    context

                );

            }

        }

    }

    if (!fore) this.draw_map(context, true);

};

Clarity.prototype.move_player = function () {

    var tX = this.player.loc.x + this.player.vel.x;

    var tY = this.player.loc.y + this.player.vel.y;

    var offset = Math.round((this.tile_size / 2) - 1);

    var tile = this.get_tile(

        Math.round(this.player.loc.x / this.tile_size),

        Math.round(this.player.loc.y / this.tile_size)

    );

    if(tile.gravity) {

        this.player.vel.x += tile.gravity.x;

        this.player.vel.y += tile.gravity.y;

    } else {

        this.player.vel.x += this.current_map.gravity.x;

        this.player.vel.y += this.current_map.gravity.y;

    }

    if (tile.friction) {

        this.player.vel.x *= tile.friction.x;

        this.player.vel.y *= tile.friction.y;

    }

    var t_y_up   = Math.floor(tY / this.tile_size);

    var t_y_down = Math.ceil(tY / this.tile_size);

    var y_near1  = Math.round((this.player.loc.y - offset) / this.tile_size);

    var y_near2  = Math.round((this.player.loc.y + offset) / this.tile_size);

    var t_x_left  = Math.floor(tX / this.tile_size);

    var t_x_right = Math.ceil(tX / this.tile_size);

    var x_near1   = Math.round((this.player.loc.x - offset) / this.tile_size);

    var x_near2   = Math.round((this.player.loc.x + offset) / this.tile_size);

    var top1    = this.get_tile(x_near1, t_y_up);

    var top2    = this.get_tile(x_near2, t_y_up);

    var bottom1 = this.get_tile(x_near1, t_y_down);

    var bottom2 = this.get_tile(x_near2, t_y_down);

    var left1   = this.get_tile(t_x_left, y_near1);

    var left2   = this.get_tile(t_x_left, y_near2);

    var right1  = this.get_tile(t_x_right, y_near1);

    var right2  = this.get_tile(t_x_right, y_near2);

    if (tile.jump && this.jump_switch > 15) {

        this.player.can_jump = true;

        this.jump_switch = 0;

    } else this.jump_switch++;

    this.player.vel.x = Math.min(Math.max(this.player.vel.x, -this.current_map.vel_limit.x), this.current_map.vel_limit.x);

    this.player.vel.y = Math.min(Math.max(this.player.vel.y, -this.current_map.vel_limit.y), this.current_map.vel_limit.y);

    this.player.loc.x += this.player.vel.x;

    this.player.loc.y += this.player.vel.y;

    this.player.vel.x *= .9;

    if (left1.solid || left2.solid || right1.solid || right2.solid) {

        /* fix overlap */

        while (this.get_tile(Math.floor(this.player.loc.x / this.tile_size), y_near1).solid

            || this.get_tile(Math.floor(this.player.loc.x / this.tile_size), y_near2).solid)

            this.player.loc.x += 0.1;

        while (this.get_tile(Math.ceil(this.player.loc.x / this.tile_size), y_near1).solid

            || this.get_tile(Math.ceil(this.player.loc.x / this.tile_size), y_near2).solid)

            this.player.loc.x -= 0.1;

        /* tile bounce */

        var bounce = 0;

        if (left1.solid && left1.bounce > bounce) bounce = left1.bounce;

        if (left2.solid && left2.bounce > bounce) bounce = left2.bounce;

        if (right1.solid && right1.bounce > bounce) bounce = right1.bounce;

        if (right2.solid && right2.bounce > bounce) bounce = right2.bounce;

        this.player.vel.x *= -bounce || 0;

    }

    if (top1.solid || top2.solid || bottom1.solid || bottom2.solid) {

        /* fix overlap */

        while (this.get_tile(x_near1, Math.floor(this.player.loc.y / this.tile_size)).solid

            || this.get_tile(x_near2, Math.floor(this.player.loc.y / this.tile_size)).solid)

            this.player.loc.y += 0.1;

        while (this.get_tile(x_near1, Math.ceil(this.player.loc.y / this.tile_size)).solid

            || this.get_tile(x_near2, Math.ceil(this.player.loc.y / this.tile_size)).solid)

            this.player.loc.y -= 0.1;

        /* tile bounce */

        var bounce = 0;

        if (top1.solid && top1.bounce > bounce) bounce = top1.bounce;

        if (top2.solid && top2.bounce > bounce) bounce = top2.bounce;

        if (bottom1.solid && bottom1.bounce > bounce) bounce = bottom1.bounce;

        if (bottom2.solid && bottom2.bounce > bounce) bounce = bottom2.bounce;

        this.player.vel.y *= -bounce || 0;

        if ((bottom1.solid || bottom2.solid) && !tile.jump) {

            this.player.on_floor = true;

            this.player.can_jump = true;

        }

    }

    // adjust camera

    var c_x = Math.round(this.player.loc.x - this.viewport.x/2);

    var c_y = Math.round(this.player.loc.y - this.viewport.y/2);

    var x_dif = Math.abs(c_x - this.camera.x);

    var y_dif = Math.abs(c_y - this.camera.y);

    if(x_dif > 5) {

        var mag = Math.round(Math.max(1, x_dif * 0.1));

        if(c_x != this.camera.x) {

            this.camera.x += c_x > this.camera.x ? mag : -mag;

            if(this.limit_viewport) {

                this.camera.x =

                    Math.min(

                        this.current_map.width_p - this.viewport.x + this.tile_size,

                        this.camera.x

                    );

                this.camera.x =

                    Math.max(

                        0,

                        this.camera.x

                    );

            }

        }

    }

    if(y_dif > 5) {

        var mag = Math.round(Math.max(1, y_dif * 0.1));

        if(c_y != this.camera.y) {

            this.camera.y += c_y > this.camera.y ? mag : -mag;

            if(this.limit_viewport) {

                this.camera.y =

                    Math.min(

                        this.current_map.height_p - this.viewport.y + this.tile_size,

                        this.camera.y

                    );

                this.camera.y =

                    Math.max(

                        0,

                        this.camera.y

                    );

            }

        }

    }

    if(this.last_tile != tile.id && tile.script) {

        eval(this.current_map.scripts[tile.script]);

    }

    this.last_tile = tile.id;

};

Clarity.prototype.update_player = function () {

    if (this.key.left) {

        if (this.player.vel.x > -this.current_map.vel_limit.x)

            this.player.vel.x -= this.current_map.movement_speed.left;

    }

    if (this.key.up) {

        if (this.player.can_jump && this.player.vel.y > -this.current_map.vel_limit.y) {

            this.player.vel.y -= this.current_map.movement_speed.jump;

            this.player.can_jump = false;

        }

    }

    if (this.key.right) {

        if (this.player.vel.x < this.current_map.vel_limit.x)

            this.player.vel.x += this.current_map.movement_speed.left;

    }

    this.move_player();

};

Clarity.prototype.draw_player = function (context) {

    context.fillStyle = this.player.colour;

    context.beginPath();

    context.arc(

        this.player.loc.x + this.tile_size / 2 - this.camera.x,

        this.player.loc.y + this.tile_size / 2 - this.camera.y,

        this.tile_size / 2 - 1,

        0,

        Math.PI * 2

    );

    context.fill();

};

Clarity.prototype.update = function () {

    this.update_player();

};

Clarity.prototype.draw = function (context) {

    this.draw_map(context, false);

    this.draw_player(context);

};

/* Setup of the engine */

window.requestAnimFrame =

  window.requestAnimationFrame ||

  window.webkitRequestAnimationFrame ||

  window.mozRequestAnimationFrame ||

  window.oRequestAnimationFrame ||

  window.msRequestAnimationFrame ||

  function(callback) {

    return window.setTimeout(callback, 1000 / 60);

  };

var canvas = document.getElementById('canvas'),

    ctx = canvas.getContext('2d');

canvas.width = 400;

canvas.height = 400;

var game = new Clarity();

    game.set_viewport(canvas.width, canvas.height);

    game.load_map(map);

    /* Limit the viewport to the confines of the map */

    game.limit_viewport = true;

var Loop = function() {

  ctx.fillStyle = '#333';

  ctx.fillRect(0, 0, canvas.width, canvas.height);

  game.update();

  game.draw(ctx);

  window.requestAnimFrame(Loop);

};

Loop();

</script>

</body>

</html>

感兴趣的也来试一下吧，不定时发布一些有意思的源代码，喜欢可以关注一下哟

h5小球走迷宫小游戏源码的更多相关文章

HTML5小游戏源码收藏
html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...
Creator仿超级玛丽小游戏源码分享
Creator仿超级玛丽小游戏源码分享之前用Cocos Creator 做的一款仿超级玛丽的游戏,使用的版本为14.2 ,可以直接打包为APK,现在毕设已经完成,游戏分享出来,大家一起学习进步.特别 ...
我用数据结构花了一夜给女朋友写了个h5走迷宫小游戏
目录起因分析画线(棋盘) 画迷宫方块移动结语 @(文章目录) 先看效果图(在线电脑尝试地址http://biggsai.com/maze.html): 起因又到深夜了,我按照以往在公众号写 ...
flappy pig小游戏源码分析(1)——主程序初探
闲逛github发现一个javascript原生实现的小游戏,源码写的很清晰,适合想提高水平的同学观摩学习.读通源码后,我决定写一系列的博客来分析源码,从整体架构到具体实现细节来帮助一些想提高水平的朋 ...
flappy pig小游戏源码分析(4)——核心pig模块(未完待续)
热身之后,我们要动点真格的了,游戏叫flappy pig,我们的pig终于要出场了. 老规矩,看看目录结构,读者对着目录结构好好回想我们已经讲解的几个模块: 其中game.js是游戏主程序,optio ...
flappy pig小游戏源码分析(3)——解剖util
这一节我们继续高歌猛进,如果对源码中有无论无何都理解不通的问题,欢迎和我交流,让我也学习一下,我的qq是372402487. 还是按照惯例看看我们的目录结构. 我们在前两节中已经分析了game.js, ...
flappy pig小游戏源码分析(2)——解剖option
今天继续分析flappy bird的源码.重温一下源码的目录结构. 在本系列第一篇中我们分析了game.js文件,也就是整个程序的架构.这一篇我们来看看option.js文件,这个文件的内容很简单,主 ...
C\C++ 1A2B小游戏源码
学了一段时间,心血来潮写了一个1A2B小游戏,很多人应该玩过,是一个挺有意思的益智小游戏,之前用易语言写过,现在又用C++重写了一下. 编译运行无错,整体程序设计思路为:进入循环,初始化游戏,读入一个 ...
2d命令行小游戏源码
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

随机推荐

Windows下Git使用报错：warning：LF will be replaced by CRLF in ××××.××
Windows下Git使用报错: warning:LF will be replaced by CRLF in ××××.××(文件名) The file will have its original ...
Lonely（非洲NANA作品）
Lonely(非洲NANA作品) 编辑 Lonely NANA,出生于1968年10月5日的非洲加纳.来自于加纳的NANA出身于一个富有的家庭,但是父亲在他小时候离他们而去,母亲带着年幼的NANA定居 ...
bin/hdfs dfs命令
appendToFile Usage: hdfs dfs -appendToFile <localsrc> ... <dst> 追加一个或者多个文件到hdfs制定文件中.也可以 ...
Hibernate入门步骤及概念
1.什么是Hibernate Hibernate是一个开发源代码的对象关系映射框架,它对JDBC进行非常轻量级的对象封装,使得程序员可以随心所欲地使用对象编程思维来操纵数据库.Hibernate可以应 ...
ubuntu 12.04 eclipse增加桌面快捷方式
1.创建桌面启动器(编辑/usr/share/applications/eclipse.desktop) [Desktop Entry] Encoding=UTF-8 Name=eclipse Com ...
jQuery事件处理
浏览器的事件模型 DOM第0级事件模型 Event实例他的属性提供了关于当前正被处理的已触发事件的大量信息.这包括一些细节,比如在哪个元素上触发的事件.鼠标事件的坐标以及键盘事件中单击了哪个键. 事 ...
ubuntu18.04 mariadb start失败
在Ubuntu 安装mariadb 再restart 后出现错误 journalctl -xe 发现 apparmor权限问题 AppArmor 是一款与SeLinux类似的安全框架/工具,其主要作用 ...
【MySQL】一道MySQL综合题
题:下表是一张商品出售统计表,写一段简单的sql查询,查询出每种商品类型每个月的出售总额,其中类型1为实体商品,类型2为虚拟商品.表名goods_count. id(自增id) sold_time(出 ...
JVM（一）Java内存模型
前言对于从事C.C++程序开发的开发人员来说,在开始使用对象之前,他们都需要使用new关键字为对象申请内存空间,在使用完对象之后,也需要使用delete关键字来释放对象占用的内存空间.对于Java程 ...
HDU变形课
变形课 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total Submis ...

h5小球走迷宫小游戏源码

h5小球走迷宫小游戏源码的更多相关文章

随机推荐

热门专题