master

分支 (1)

管理

管理

master

css3
/
playPlane.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>小游戏</title>
</head>
<style>
    *{
        margin:0;
    }
    canvas{
        box-shadow: 0 0 10px #999;
    }
    #heroCanvas{
        position: absolute;
        top:0;
        left:0;
    }
</style>
<body onload="drawAirplane()" id="bodys">
<canvas id="backgroungCanvas" height="500" width="400"></canvas>
<canvas id="heroCanvas" height="500" width="400"></canvas>
<!--<canvas></canvas>-->
<!--<canvas></canvas>-->
<!--<canvas></canvas>-->
</body>
</html>
<script src="js/background.js"></script>
<script src="./js/hero.js"></script>
<script>
    function drawAirplane(){
        var bgCanvas = document.getElementById("backgroungCanvas")
        if(!bgCanvas.getContext){
            return
        }
        var bgCtxt = bgCanvas.getContext('2d');
        var bgUrl = "./img/timg.jpg"
        drawBgImg(bgUrl,bgCanvas,moveBackground);//背景绘制

        function moveBackground(bgImg){
            document.getElementById("bodys").onclick = playAudio;

            setInterval(function(){//背景移动
                animateBackground(bgCanvas,bgImg)
            },30);

        //    画主角
            var heroCanvas = document.getElementById("heroCanvas")
            var img = 'img/hero.png'
            var hero = createHero(heroCanvas,img,107,107,heroLoaded)
            function heroLoaded(){

            }
        }
        function playAudio(){//播放音乐
            var bgSound = new Audio('img/m1.mp3');
            bgSound.loop = true;
            bgSound.play();
        }
    }
</script>