Canvas frame animation eat apple games

Time:2020-12-3

First look at the page effect. The following four buttons indicate start, end, pause and continue

Here’s a frame of animation:

The key of frame animation is canvas API ctx.drawImage () (9 parameters) and setinterval timer.
Set the view window of the picture, and display the next picture by displacement every time the task is executed.

Code directly, Ctrl + C / V plug and play

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        < title > frame animation
    </head>
    <body>
        <canvas id="canvas" width="400" height="300"></canvas>
        <div class="">
            < button class = "start BTN" type = "button" > eat again < / button >
            < button class = "end BTN" type = "button" > stop eating < / button >
            < button class = "pause BTN" type = "button" > take a break
            < button class = "continue BTN" type = "button" > continue to eat < / 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() // create image object
            Let timer // timer identifier
            Let millisec = 300 // execution interval
            Let COLINDEX = 0 // number of columns
            Let rowindex = 0 // number of rows
            Const timerfun = () = > {// declare timer execution function
                console.log ("set timer");
                ctx.clearRect (0, 0,  canvas.style.width , canvas.style.height )// clear canvas

                If (rowindex < 3) {// if the first 5 frames
                    ctx.drawImage (IMG, COLINDEX * 240, rowindex * 240, 200, 200, 50, 50, 200, 200) // image object, X coordinate, y coordinate, width, height, X coordinate, y coordinate (Note: the starting point of the picture on the canvas, i.e., the upper left corner), width, height (zoom, not clipping)
                    COLINDEX + + // next frame

                    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 (click start, timer)
                clearInterval(timer)
                COLINDEX = 0 // column number
                Rowindex = 0 // number of rows
                timer = setInterval(timerFun, millisec)
            })
            endBtn.addEventListener('click', () => {
                console.log (", click end)
                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 (click pause, timer)
                clearInterval(timer)
                timer = 0
            })
            continueBtn.addEventListener('click', () => {
                if (timer) {
                    Don't rush me when you eat
                    return
                }
                console.log (click continue, timer)
                timer = setInterval(timerFun, millisec)
            })
        </script>
    </body>
</html>

This article about canvas frame animation eat apple game is introduced here, more relevant canvas frame animation content please search the previous articles of developeppaer or continue to browse the related articles below, I hope you will support developeppaer more in the future!