js+canvas實現(xiàn)動態(tài)吃豆人效果
更新時間:2017年03月22日 10:30:05 作者:18301695170
本文主要介紹了js+canvas實現(xiàn)動態(tài)吃豆人效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧
效果圖:
代碼如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>吃豆人V01</title> </head> <body> <canvas id="canvas" width="500px" height="500px" style="border: 1px solid black"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //TODO 面向對象方式解析 //TODO 1.創(chuàng)建吃豆人的對象模板 function Pacman(){ //TODO 屬性 this.isOpen = true;//TODO 開關 this.start = 45*Math.PI/180; this.end = 315*Math.PI/180; //TODO 方法 //TODO 1.繪制方法 this.paint = function(){ //TODO 吃豆人的臉 context.beginPath(); context.arc(250,200,100,this.start,this.end); context.lineTo(250,200); context.closePath(); context.fillStyle = "yellow"; context.fill(); context.stroke(); //TODO 吃豆人的眼睛 context.beginPath(); context.arc(250,150,15,0,Math.PI*2); context.fillStyle = "black"; context.fill(); //TODO 吃豆人的眼神 context.beginPath(); context.arc(255,145,5,0,Math.PI*2); context.fillStyle = "white"; context.fill(); } //TODO 2.控制開閉切換 this.open = function(){ if(this.isOpen){//TODO 開口 this.start = 45*Math.PI/180; this.end = 315*Math.PI/180; this.isOpen = false; }else{//TODO 閉口 this.start = 0; this.end = Math.PI*2; this.isOpen = true; } } } //TODO 創(chuàng)建吃豆人的對象 var pacman = new Pacman(); //TODO 核心控制器 setInterval(function(){ context.clearRect(0,0,canvas.width,canvas.height); pacman.paint(); pacman.open(); },200); </script> </body> </html>
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關文章
jquery獲取URL中參數(shù)解決中文亂碼問題的兩種方法
從A頁面通過url傳參到B頁面時,獲取URL中參數(shù)出現(xiàn)中文亂碼問題,解析url參數(shù)的正確方法如下,感興趣的朋友可以參考下2013-12-12JS Object.preventExtensions(),Object.seal()與Object.freeze()用
這篇文章主要介紹了JS Object.preventExtensions(),Object.seal()與Object.freeze()用法,結合實例形式分析了javascript控制對象擴展、密封、凍結等相關函數(shù)與操作技巧,需要的朋友可以參考下2018-08-08JavaScript Perfection kill 測試及答案
近日,在Perfection kill上看到有關javascript quiz。并做了一下,最終錯了2個(#2,#9),但是,這2道題,在Ie和ff下的答案是不一樣的?!2010-03-03JavaScript 上傳文件(psd,壓縮包等),圖片,視頻的實現(xiàn)方法
本文通過實例代碼給大家介紹了JavaScript 上傳文件(psd,壓縮包等),圖片,視頻功能,需要的朋友可以參考下2017-06-06