Web前端---HTML+CSS+JS实现的圣诞抓礼物小游戏

目录

 

代码目录:

主要代码实现:

源码获取


效果演示: 文末获取源码

代码目录:

主要代码实现:

CSS样式:

body {
    background: rgb(8, 8, 58);
    margin: 0;
}

#wrapper {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

JavaScript代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Elf Gift Catch</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div id="wrapper">

        <canvas id="canvas" width="450" height="540"></canvas>

    </div>

    <div style="display:none">
        <img id="elf" width="200" height="200" src='data:image/png;base64,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
  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值