HTML5 + javascript: how to make a sprite stay in the middle of the screen?
Question
I'm trying to draw a sprite in the middle of the screen in a HTML5/JS application. I have a large background image (larger than the screen) and I need to scroll through it but the sprite must always be drawn at the center of the current view. So I created a div with the background and I'm trying to draw the sprite but when I try to handle the scroll event the draw does not happens.
One thing I did was that I set up the canvas size to the size of the image (very large). Is this correct? How can I setup this properly?
Thank you.
Here is my Code:
var bgCanvas, bgCanvasContext; var carImg; var cineImg; var dstXRightLane = 547; var dstXLeftLane = 450; var maxPoints = 1499999; var currentPoints = 500000; var firstPrizeHeigth = 17430; var firstPrizeDstX = 150; var firstPrizeDstY = 16800; function getHeightFromPoints( points ) { var height = 0; console.log( "points is ", points ); height = Math.round(18897 - 0.012598 * points); console.log( "height is ", height ); return height; } function drawSprite(ctx, img, dstX, dstY) { console.log("about to draw sprite..."); ctx.drawImage(img, dstX, dstY); console.log("draw returned..."); } function drawCar( dstX, dstY ) { drawSprite( bgCanvasContext, carImg, dstX, dstY ); } function drawCarOnLeftLane( dstY ) { drawCar( dstXLeftLane, dstY ); } function drawCarOnRightLane( dstY ) { drawCar( dstXRightLane, dstY ); } function gotoBotton() { // cross browser solution window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); } var lastScrollYPosition = 0; function scrollEventHandler(e) { console.log( "handling scroll event.."); lastScrollYPosition = window.scrollY; console.log( "current scroll y-position is ", lastScrollYPosition ); console.log( "current scroll top is ", window.scrollTop ); console.log( "current scroll bottom is ", window.scrollBotton ); console.log( "scroll event handler finished" ); } function isToWinPrize( currentHeight, prizeHeight ) { return( currentHeight < prizeHeight ); } // on load function (function() { var dstY = 18430; console.log("main program entry point"); console.log("about to call gotoBotton"); gotoBotton(); console.log("gotoBotton returned"); bgCanvas = document.getElementById("bgPrizes"); bgCanvas.width = 1080; bgCanvas.height = 18898; bgCanvasContext = bgCanvas.getContext("2d"); carImg = document.getElementById("car"); cineImg = document.getElementById("cine"); window.addEventListener( 'scroll', scrollEventHandler ); currentPointsHeight = getHeightFromPoints( currentPoints ); if( isToWinPrize(currentPointsHeight, firstPrizeHeigth) ) { console.log("drawing prize..." ); drawSprite( bgCanvasContext, cineImg, firstPrizeDstX, firstPrizeDstY ); } else { console.log("still need ", firstPrizeHeigth - currentPointsHeight, " points to win" ); } drawCarOnLeftLane( dstY ); drawCarOnRightLane( dstY ); } ());
<html> <head> <title>Progress Bar</title> </head> <body> <div style="background-image: url(./img/bg.jpg); height: 18898px; width: 1080px;"> <canvas id="bgPrizes"></canvas> <div style="display:none"> <img id="car" src="./img/car.png" width="82" height="162"> </div> <div style="display:none"> <img id="cine" src="./img/cine.png" width="199" height="262"> </div> <script src="progressBar.js"></script> </div> </body> </html>
1 answers
solution1
0 2017-04-12 06:52:09
I think you want to do something like game, the character at the middle and the background move, make it like moving.
You should make a 1920*1080 one, put sprite at the middle and move the background, I think this solution may suit for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.