前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【开源游戏/动作】太难过关了,Vex 4/火柴人4HTML5/小程序游戏

【开源游戏/动作】太难过关了,Vex 4/火柴人4HTML5/小程序游戏

作者头像
用户5997198
发布2019-12-05 16:34:55
6030
发布2019-12-05 16:34:55
举报
文章被收录于专栏:蚂蚁开源社区蚂蚁开源社区

火柴人试炼地第四部,全新的关卡等你来挑战!在这异世界里到处都充满了危险,玩家的任务就是控制火柴人躲避这些危险,完成异世界的挑战任务,要处处小心随时随地出现的危险和障碍,到达终点即可进入下一个异世界的空间进行挑战。

如何开始:游戏加载完毕点击播放按钮 - 然后点击Play game即可开始游戏。

游戏目标:控制火柴人移动,用最快速度到达目标区域。

图片演示:

游戏视频:

代码摘要:

HTML:

代码语言:javascript
复制
<div id="content"></div>
<div id="loader">Loading...</div>

CSS:

代码语言:javascript
复制
body, html {
  width: 100 % ;
  height: 100 %
}
body {
  -webkit - tap - highlight - color: transparent; - webkit - touch - callout: none; - webkit - text - size - adjust: none; - webkit - user - select: none;
  margin: 0;
  padding: 0;
  font - family: Arial,
  Verdana,
  sans - serif;
  font - size: 12px;
  font - weight: 400;
  color: # ccc;
  background: #00517d;position:relative;overflow:hidden}# content {
    height: 100 %
  }
  # loader,
  # loader: after {
    border - radius: 50 % ;
    width: 10em;
    height: 10em
  }
  # loader {
    margin: 60px auto;
    font - size: 10px;
    position: absolute;
    z - index: 99;
    left: 50 % ;
    top: 50 % ;
    margin - left: -5em;
    margin - top: -5em;
    text - indent: -9999em;
    border - top: 1.1em solid rgba(255, 255, 255, .2);
    border - right: 1.1em solid rgba(255, 255, 255, .2);
    border - bottom: 1.1em solid rgba(255, 255, 255, .2);
    border - left: 1.1em solid # fff; - webkit - transform: translateZ(0); - ms - transform: translateZ(0);
    transform: translateZ(0); - webkit - animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear
  }
  # selectmode {
    margin: 60px auto;
    font - size: 10px;
    position: absolute;
    z - index: 100;
    left: 50 % ;
    top: 50 %
  }@ - webkit - keyframes load8 {
    0 % {
      -webkit - transform: rotate(0deg);
      transform: rotate(0deg)
    }
    100 % {
      -webkit - transform: rotate(360deg);
      transform: rotate(360deg)
    }
  }@keyframes load8 {
    0 % {
      -webkit - transform: rotate(0deg);
      transform: rotate(0deg)
    }
    100 % {
      -webkit - transform: rotate(360deg);
      transform: rotate(360deg)
    }
  }

JS:

代码语言:javascript
复制
<script>
window.addEventListener("keydown", function(e) {
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);
</script>
<script type="text/javascript">
        var gameName = "vex-4.min.js";

        //This all here is for cache busting;
        function addScript(src, buster, callback) {
            var s = document.createElement('script');
            s.setAttribute('src', src + '?v=' + buster);
            if (typeof callback === 'function') {
                s.onload = callback;
            }
            document.body.appendChild(s);
        }

        addScript('version.js', Date.now(), function() {
            addScript(gameName, version, function() {
                var game = new Vex4.Game();
            });

        });
</script>
代码语言:javascript
复制
<script>
  // 页面聚焦
  document.getElementById("gamebody").onclick = function () {
    window.focus();
    // setTimeout(window.focus(), 100);
  }
  this.onclick = function () {
    window.focus();
    // setTimeout(window.focus(), 100);
  }
</script>
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-12-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 蚂蚁大喇叭 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档