집 >웹 프론트엔드 >JS 튜토리얼 >월병 먹기 게임을 만들기 위한 HTML5 튜토리얼

월병 먹기 게임을 만들기 위한 HTML5 튜토리얼

php中世界最好的语言원래의: 2017-12-02 11:50:012594검색

이번에는 HTML5 추석 월병 먹기 대회라는 작은 게임을 소개해드리겠습니다. 이 게임은 마우스를 클릭하여 일정 시간 내에 누가 더 많이 먹을 수 있는지 알아보는 게임입니다. 아래는 전체 소스코드입니다. 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
         <meta name="screen-orientation" content="portrait">
    <title>HTML5制作吃月饼小游戏 </title>
         <meta name="keywords" content=" HTML5制作吃月饼小游戏" />
         <meta name="description" content=" HTML5制作吃月饼小游戏" />
    <link rel="stylesheet" type="text/css" href="static/css/index.css">
    <script src="static/js/zepto.min.js"></script>
 
</head>
<body>
<div id="container">
         <div id="guidePanel"></div>
         <div id="gamepanel">
                   <div>
            <div></div>
            <span id="score">0</span>
        </div>
                   <canvas id="stage" width="320" height="568"></canvas>
         </div>
         <div id="gameoverPanel"></div>
         <div id="resultPanel">
        <div></div>
        <a href="javascript:void(0)"></a>
        <div id="fenghao"></div>
        <div id="scorecontent">
                 您在<span id="stime">2378</span>秒内抢到了<span id="sscore">21341</span>个月饼<br>超过了<span id="suser">31%</span>的用户！
        </div>
        <div>
                 <span class="btn1 share">请小伙伴吃月饼</span>
        </div>
         </div>
</div>
 
<script src="static/js/index.js"></script>
</body>
</html>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트Other 관련 기사를 주목하세요!