Canvas 帧动画吃苹果小游戏


Posted in HTML / CSS onAugust 05, 2020

先看页面效果。下面四个按钮分别表示开始、结束、暂停、继续

Canvas 帧动画吃苹果小游戏

下面是帧动画图片素材:

Canvas 帧动画吃苹果小游戏

帧动画的实现,关键是Canvas API ctx.drawImage() (9个参数)和 setInterval 定时器。
设置图片的视图窗口,每次执行定时任务,位移展示下一帧图片。

直接上代码,Ctrl+C/V 即插即用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>帧动画</title>
    </head>
    <body>
        <canvas id="canvas" width="400" height="300"></canvas>
        <div class="">
            <button class="start-btn" type="button">重新吃</button>
            <button class="end-btn" type="button">不吃了</button>
            <button class="pause-btn" type="button">歇一歇</button>
            <button class="continue-btn" type="button">继续吃</button>
        </div>
        <script type="text/javascript">
            const canvas = document.getElementById("canvas")
            canvas.style.border = "1px solid black"
            const ctx = canvas.getContext("2d")

            const img = new Image() // 创建图片对象
            let timer // 定时器标识符
            let millisec = 300 // 执行时间间隔
            let colIndex = 0 // 列数
            let rowIndex = 0 // 行数
            const timerFun = () => { // 声明定时器执行函数
                console.log("设置定时器");
                ctx.clearRect(0, 0, canvas.style.width, canvas.style.height) // 清除画布

                if (rowIndex < 3) { // 如果是前5帧
                    ctx.drawImage(img, colIndex * 240, rowIndex * 240, 200, 200, 50, 50, 200, 200) // 图片对象,x坐标,y坐标(注:图片上定位的坐标),width,height(图片上截取的大小),x坐标,y坐标(注:图片在画布上的起点,即左上角),width,height(缩放,不是裁剪)
                    colIndex++ // 下一帧

                    if (colIndex > 4) {
                        colIndex = 0
                        rowIndex++
                    }
                } else {
                    colIndex = 0
                    rowIndex = 0
                }
            }

            img.onload = () => {
                timer = setInterval(timerFun, millisec)
            }
            img.src = "image/apple.jpg"

            const startBtn = document.getElementsByClassName('start-btn')[0]
            const endBtn = document.getElementsByClassName('end-btn')[0]
            const pauseBtn = document.getElementsByClassName('pause-btn')[0]
            const continueBtn = document.getElementsByClassName('continue-btn')[0]

            startBtn.addEventListener('click', () => {
                console.log("点击开始", timer)
                clearInterval(timer)
                colIndex = 0 // 列数
                rowIndex = 0 // 行数
                timer = setInterval(timerFun, millisec)
            })
            endBtn.addEventListener('click', () => {
                console.log("点击结束", timer)
                clearInterval(timer)
                colIndex = 0
                rowIndex = 0
                ctx.drawImage(img, colIndex * 240, rowIndex * 240, 200, 200, 50, 50, 200, 200)
                timer = 0
            })
            pauseBtn.addEventListener('click', () => {
                console.log("点击暂停", timer)
                clearInterval(timer)
                timer = 0
            })
            continueBtn.addEventListener('click', () => {
                if (timer) {
                    alert('吃着呢,别催')
                    return
                }
                console.log("点击继续", timer)
                timer = setInterval(timerFun, millisec)
            })
        </script>
    </body>
</html>

到此这篇关于Canvas 帧动画吃苹果小游戏的文章就介绍到这了,更多相关Canvas 帧动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 #HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 #HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 #HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 #HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 #HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 #HTML / CSS
HTML5 背景的显示区域实现
Jul 09 #HTML / CSS
You might like
php输入数据统一类实例
2015/02/23 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
php获取系统变量方法小结
2015/05/29 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
js实现表格字段排序
2014/02/19 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
详解flask表单提交的两种方式
2018/07/21 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
酒店管理自荐信
2013/10/23 职场文书
赡养老人协议书
2014/04/21 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
Python合并pdf文件的工具
2021/07/01 Python
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android