利用HTML5实现Canvas激流勇进小游戏代码



14 55 19



特效描述:利用HTML5实现 Canvas 激流勇进 小游戏代码,利用HTML5实现Canvas激流勇进小游戏代码

代码结构

1. 引入JS

<script src="game.js"></script>

2. HTML代码

<div class="kbBox" id="kbBox"></div>
<div class="startGame" id="startGame">
    <a href="javascript:void(0)" id="enterGame">进入游戏</a>
</div>
<div class="gameId" id="gameId" style="display: none;">
    <canvas id="canvas"></canvas>
    <p>游戏玩法:使用左键、右键和上箭头键移动。</p>
</div>
<script>
    window.onload = function () {
        var height = document.documentElement.clientHeight;
        var kbBox = document.getElementById("kbBox");
        var top = height - 400;
        console.log(top);
        kbBox.setAttribute("style","height:"+top/2+"px");
        var startGameId = document.getElementById("startGame");
        var enterGameId = document.getElementById("enterGame");
        var gameId = document.getElementById("gameId");
        enterGameId.onclick = function () {
            gameId.setAttribute("style","display:block");
            startGameId.setAttribute("style","display:none");
            Loop();
        }
    }
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 小游戏 H5游戏 游戏源码 手机游戏 微信游戏 网页游戏 其他游戏 其他h5游戏 其他h5源码游戏

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到