基于鸿蒙js框架实现的wearable五子棋软件

最新推荐文章于 2024-07-21 00:04:59 发布

钱渊铭

最新推荐文章于 2024-07-21 00:04:59 发布

阅读量672

点赞数

分类专栏：鸿蒙文章标签：操作系统 js html

本文链接：https://blog.csdn.net/qym2005723/article/details/117892114

版权

鸿蒙专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我基于鸿蒙js框架开发了一个运行于wearable设备的五子棋软件。主要供大家交流学习使用。软件主要由三个page组成，主要逻辑在index中，其余用来显示输赢。
鸿蒙os每个page都由一个css，一个js，一个hml组成。hml编程方式与html极为相似。学过html的可以快速上手。
hml文件展示如下：

<div>
    <image class="backcolor"></image>
    <text class="title">
        鸿蒙手表五子棋
    </text>
    <image src="common/pan.png" class="css_back"></image>
    <image src="{{image_qi00}}" id="qi00"class="button" style="left: 15%;top: 15%;" onclick="js_change_qi1"/>
    <image src="{{image_qi01}}" id="qi01"class="button" style="left: 15%;top: 23.75%;" onclick="js_change_qi2"/>
    <image src="{{image_qi02}}" id="qi02"class="button" style="left: 15%;top: 32.5%;" onclick="js_change_qi3"/>
    <image src="{{image_qi03}}" id="qi03"class="button" style="left: 15%;top: 41.25%;" onclick="js_change_qi4"/>
    <image src="{{image_qi04}}" id="qi04"class="button" style="left: 15%;top: 50%;" onclick="js_change_qi5"/>
    <image src="{{image_qi05}}" id="qi05"class="button" style="left: 15%;top: 58.75%;" onclick="js_change_qi6"/>
    <image src="{{image_qi06}}" id="qi06"class="button" style="left: 15%;top: 67.5%;" onclick="js_change_qi7"/>
    <image src="{{image_qi07}}" id="qi07"class="button" style="left: 15%;top: 76.25%;" onclick="js_change_qi8"/>
    <image src="{{image_qi10}}" id="qi10"class="button" style="left: 23.75%;top: 15%;" onclick="js_change_qi9"/>
    <image src="{{image_qi11}}" id="qi11"class="button" style="left: 23.75%;top: 23.75%;" onclick="js_change_qi10"/>
    <image src="{{image_qi12}}" id="qi12"class="button" style="left: 23.75%;top: 32.5%;" onclick="js_change_qi11"/>
    <image src="{{image_qi13}}" id="qi13"class="button" style="left: 23.75%;top: 41.25%;" onclick="js_change_qi12"/>
    <image src="{{image_qi14}}" id="qi14"class="button" style="left: 23.75%;top: 50%;" onclick="js_change_qi13"/>
    <image src="{{image_qi15}}" id="qi15"class="button" style="left: 23.75%;top: 58.75%;" onclick="js_change_qi14"/>
    <image src="{{image_qi16}}" id="qi16"class="button" style="left: 23.75%;top: 67.5%;" onclick="js_change_qi15"/>
    <image src="{{image_qi17}}" id="qi17"class="button" style="left: 23.75%;top: 76.25%;" onclick="js_change_qi16"/>
    <image src="{{image_qi20}}" id="qi20"class="button" style="left: 32.5%;top: 15%;" onclick="js_change_qi17"/>
    <image src="{{image_qi21}}" id="qi21"class="button" style="left: 32.5%;top: 23.75%;" onclick="js_change_qi18"/>
    <image src="{{image_qi22}}" id="qi22"class="button" style="left: 32.5%;top: 32.5%;" onclick="js_change_qi19"/>
    <image src="{{image_qi23}}" id="qi23"class="button" style="left: 32.5%;top: 41.25%;" onclick="js_change_qi20"/>
    <image src="{{image_qi24}}" id="qi24"class="button" style="left: 32.5%;top: 50%;" onclick="js_change_qi21"/>
    <image src="{{image_qi25}}" id="qi25"class="button" style="left: 32.5%;top: 58.75%;" onclick="js_change_qi22"/>
    <image src="{{image_qi26}}" id="qi26"class="button" style="left: 32.5%;top: 67.5%;" onclick="js_change_qi23"/>
    <image src="{{image_qi27}}" id="qi27"class="button" style="left: 32.5%;top: 76.25%;" onclick="js_change_qi24"/>
    <image src="{{image_qi30}}" id="qi30"class="button" style="left: 41.25%;top: 15%;" onclick="js_change_qi25"/>
    <image src="{{image_qi31}}" id="qi31"class="button" style="left: 41.25%;top: 23.75%;" onclick="js_change_qi26"/>
    <image src="{{image_qi32}}" id="qi32"class="button" style="left: 41.25%;top: 32.5%;" onclick="js_change_qi27"/>
    <image src="{{image_qi33}}" id="qi33"class="button" style="left: 41.25%;top: 41.25%;" onclick="js_change_qi28"/>
    <image src="{{image_qi34}}" id="qi34"class="button" style="left: 41.25%;top: 50%;" onclick="js_change_qi29"/>
    <image src="{{image_qi35}}" id="qi35"class="button" style="left: 41.25%;top: 58.75%;" onclick="js_change_qi30"/>
    <image src="{{image_qi36}}" id="qi36"class="button" style="left: 41.25%;top: 67.5%;" onclick="js_change_qi31"/>
    <image src="{{image_qi37}}" id="qi37"class="button" style="left: 41.25%;top: 76.25%;" onclick="js_change_qi32"/>
    <image src="{{image_qi40}}" id="qi40"class="button" style="left: 50%;top: 15%;" onclick="js_change_qi33"/>
    <image src="{{image_qi41}}" id="qi41"class="button" style="left: 50%;top: 23.75%;" onclick="js_change_qi34"/>
    <image src="{{image_qi42}}" id="qi42"class="button" style="left: 50%;top: 32.5%;" onclick="js_change_qi35"/>
    <image src="{{image_qi43}}" id="qi43"class="button" style="left: 50%;top: 41.25%;" onclick="js_change_qi36"/>
    <image src="{{image_qi44}}" id="qi44"class="button" style="left: 50%;top: 50%;" onclick="js_change_qi37"/>
    <image src="{{image_qi45}}" id="qi45"class="button" style="left: 50%;top: 58.75%;" onclick="js_change_qi38"/>
    <image src="{{image_qi46}}" id="qi46"class="button" style="left: 50%;top: 67.5%;" onclick="js_change_qi39"/>
    <image src="{{image_qi47}}" id="qi47"class="button" style="left: 50%;top: 76.25%;" onclick="js_change_qi40"/>
    <image src="{{image_qi50}}" id="qi50"class="button" style="left: 58.75%;top: 15%;" onclick="js_change_qi41"/>
    <image src="{{image_qi51}}" id="qi51"class="button" style="left: 58.75%;top: 23.75%;" onclick="js_change_qi42"/>
    <image src="{{image_qi52}}" id="qi52"class="button" style="left: 58.75%;top: 32.5%;" onclick="js_change_qi43"/>
    <image src="{{image_qi53}}" id="qi53"class="button" style="left: 58.75%;top: 41.25%;" onclick="js_change_qi44"/>
    <image src="{{image_qi54}}" id="qi54"class="button" style="left: 58.75%;top: 50%;" onclick="js_change_qi45"/>
    <image src="{{image_qi55}}" id="qi55"class="button" style="left: 58.75%;top: 58.75%;" onclick="js_change_qi46"/>
    <image src="{{image_qi56}}" id="qi56"class="button" style="left: 58.75%;top: 67.5%;" onclick="js_change_qi47"/>
    <image src="{{image_qi57}}" id="qi57"class="button" style="left: 58.75%;top: 76.25%;" onclick="js_change_qi48"/>
    <image src="{{image_qi60}}" id="qi60"class="button" style="left: 67.5%;top: 15%;" onclick="js_change_qi49"/>
    <image src="{{image_qi61}}" id="qi61"class="button" style="left: 67.5%;top: 23.75%;" onclick="js_change_qi50"/>
    <image src="{{image_qi62}}" id="qi62"class="button" style="left: 67.5%;top: 32.5%;" onclick="js_change_qi51"/>
    <image src="{{image_qi63}}" id="qi63"class="button" style="left: 67.5%;top: 41.25%;" onclick="js_change_qi52"/>
    <image src="{{image_qi64}}" id="qi64"class="button" style="left: 67.5%;top: 50%;" onclick="js_change_qi53"/>
    <image src="{{image_qi65}}" id="qi65"class="button" style="left: 67.5%;top: 58.75%;" onclick="js_change_qi54"/>
    <image src="{{image_qi66}}" id="qi66"class="button" style="left: 67.5%;top: 67.5%;" onclick="js_change_qi55"/>
    <image src="{{image_qi67}}" id="qi67"class="button" style="left: 67.5%;top: 76.25%;" onclick="js_change_qi56"/>
    <image src="{{image_qi70}}" id="qi70"class="button" style="left: 76.25%;top: 15%;" onclick="js_change_qi57"/>
    <image src="{{image_qi71}}" id="qi71"class="button" style="left: 76.25%;top: 23.75%;" onclick="js_change_qi58"/>
    <image src="{{image_qi72}}" id="qi72"class="button" style="left: 76.25%;top: 32.5%;" onclick="js_change_qi59"/>
    <image src="{{image_qi73}}" id="qi73"class="button" style="left: 76.25%;top: 41.25%;" onclick="js_change_qi60"/>
    <image src="{{image_qi74}}" id="qi74"class="button" style="left: 76.25%;top: 50%;" onclick="js_change_qi61"/>
    <image src="{{image_qi75}}" id="qi75"class="button" style="left: 76.25%;top: 58.75%;" onclick="js_change_qi62"/>
    <image src="{{image_qi76}}" id="qi76"class="button" style="left: 76.25%;top: 67.5%;" onclick="js_change_qi63"/>
    <image src="{{image_qi77}}" id="qi77"class="button" style="left: 76.25%;top: 76.25%;" onclick="js_change_qi64"/>
    <text class="progess_by_qym">
        made by
        Goldgom
        (qym)
    </text>
    <button value="restart" class="css_restart" onclick="js_restart"></button>

</div>