當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

6.3_精灵对象的行为

發布時間：2024/5/8 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 6.3_精灵对象的行为小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

6.3_精靈對象的行為

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>精靈對象的行為</title><style>body{background: #ddd;}#canvas{position: absolute;top: 30px;left: 10px;background: #FFFFFF;cursor: crosshair;margin-left: 10px;margin-top: 10px;box-shadow: 4px 4px 8px rgba(0,0,0,0.5);-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);}input{margin-left: 15px;}</style></head><body><input id="animateButton" type="button" value="Animate" /><canvas id="canvas" width="462" height="500"></canvas></body><script>var Sprite = function(name,painter,behaviors){if(name !== undefined){ this.name = name; }if(painter !== undefined){ this.painter = painter; }this.top = 0;this.left = 0;this.width = 10;this.height = 10;this.velocityX = 0;this.velocityY = 0;this.visible = true;this.animating = false;this.behaviors = behaviors || [];}Sprite.prototype = {paint:function(context){if(this.painter !== undefined && this.visible){this.painter.paint(this,context);}},update:function(context,time){for(var i=0;i<this.behaviors.length;i++){this.behaviors[i].execute(this,context,time);}}}</script><script>var SpriteSheetPainter = function(cells){this.cells = cells || [];this.cellIndex = 0;}SpriteSheetPainter.prototype = {advance:function(){if(this.cellIndex == (this.cells.length-1)){this.cellIndex = 0;}else{this.cellIndex++;}},paint:function(sprite,context){var cell = this.cells[this.cellIndex];context.drawImage(spritesheet,cell.x,cell.y,cell.w,cell.h,sprite.left,sprite.top,cell.w,cell.h);}}</script><script>var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var animateButton = document.getElementById('animateButton');var spritesheet = new Image();var runnerCells =[{x:0,y:0,w:47,h:64},{x:55,y:0,w:44,h:64},{x:107,y:0,w:39,h:64},{x:150,y:0,w:46,h:64},{x:208,y:0,w:49,h:64},{x:265,y:0,w:46,h:64},{x:320,y:0,w:42,h:64},{x:380,y:0,w:35,h:64},{x:425,y:0,w:35,h:64}];var runInPlace = {lastAdvance :0,pageFlip_interval:100,execute:function(sprite,context,time){if(time - this.lastAdvance >this.pageFlip_interval){sprite.painter.advance();this.lastAdvance = time;}}};var sprite = new Sprite('runner',new SpriteSheetPainter(runnerCells),[runInPlace]);var paused = false;//初始化spritesheet.src = 'img/running-sprite-sheet.png';spritesheet.onload = function(){context.drawImage(spritesheet,0,0);}sprite.left = 200;sprite.top = 100;context.strokeStyle = 'llightgray';context.lineWidth = 0.5;drawBackground();//事件animateButton.onclick = function(){if(animateButton.value === 'Animate'){startAnimation();}else{pauseAnimation();}}function startAnimation(){animateButton.value = 'Pause';paused = false;window.requestAnimationFrame(animate);}function pauseAnimation(){animateButton.value = 'Animate';paused = true;}function animate(time){//這里的time不能用他傳進來的參數//time = +new Date();if(!paused){context.clearRect(0,0,canvas.width,canvas.height);drawBackground();context.drawImage(spritesheet,0,0);sprite.update(context,time);sprite.paint(context);window.requestAnimationFrame(animate);}}//繪制橫隔背景function drawBackground(){context.save();context.shadowColor = undefined;context.shadowOffsetX = 0;context.shadowOffsetY = 0;context.shadowBlur = 0;var step_y = 12;var left_margin = step_y*4;var top_margin = 64;var i = canvas.height;context.strokeStyle = 'lightgray';context.lineWidth = 0.5;while(i>top_margin){context.beginPath();context.moveTo(0,i);context.lineTo(canvas.width,i);context.stroke();i-=step_y;}context.restore();}</script> </html>

總結

以上是生活随笔為你收集整理的6.3_精灵对象的行为的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。