HTML5+Javascript制作的接金币游戏代码

最新推荐文章于 2021-05-30 21:15:22 发布
tianpeiwen
最新推荐文章于 2021-05-30 21:15:22 发布
阅读量1.6w
点赞数
本文链接：https://blog.csdn.net/tianpeiwen/article/details/8307446
版权
001<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
 
 002<html>
 
 003<head>
 
 004<title> new document </title>
 
 005<meta name="generator" content="editplus">
 
 006<meta name="author" content="">
 
 007<meta name="keywords" content="">
 
 008<meta name="description" content="">
 
 009</head>
 
 010<style type="text/css">
 
 011    *{
 
 012        padding:0;
 
 013        margin:0;
 
 014    }
 
 015    body{
 
 016        text-align:center;
 
 017    }
 
 018    #canvas{
 
 019        margin:0 auto;
 
 020    }
 
 021</style>
 
 022<SCRIPT LANGUAGE="JavaScript">
 
 023<!--
 
 024    // 金币对像
 
 025    var five = new  Image();
 
 026    five.src = "anchor.gif";
 
 027    five.value = 5;
 
 028    five.speed = 5;
 
 029    var ten = new  Image();
 
 030    ten.src = "flash.gif";
 
 031    ten.value = 10;
 
 032    ten.speed = 10;
 
 033    var twenty = new  Image();
 
 034    twenty.src = "rm.gif";
 
 035    twenty.value = 20;
 
 036    twenty.speed = 20;
 
 037     
 
 038    var heroImg = new  Image();
 
 039    heroImg.src = "smiley.png";
 
 040     
 
 041    var bg = new  Image();
 
 042    bg.src =  "bg.jpg";
 
 043     
 
 044    // 金币类;
 
 045    function Money(x,y,speed,img){
 
 046        // 没次循环增加的像素数
 
 047        this.speed = speed;
 
 048        this.x = x;
 
 049        this.y = y;
 
 050        this.width = img.width;
 
 051        this.height = img.height;
 
 052        this.img = img;
 
 053        this.value = img.value;
 
 054    }
 
 055    Money.prototype = {
 
 056        draw:function(ctx){
 
 057            ctx.drawImage(this.img,this.x,this.y);
 
 058        },
 
 059        move:function(){
 
 060            this.y += this.speed;
 
 061        }
 
 062    }
 
 063    // 娃娃脸
 
 064    function Hero(x,y,img){
 
 065        this.grade = 0;
 
 066        this.life = 5;
 
 067        this.x = x;
 
 068        this.y = y;
 
 069        this.img = img;
 
 070        this.width = img.width;
 
 071        this.height = img.height;
 
 072    }
 
 073    Hero.prototype = {
 
 074        draw:function(ctx){
 
 075            ctx.drawImage(this.img,this.x,this.y);
 
 076        },
 
 077        touch:function(other){
 
 078            if( this.x + this.width > other.x && this.x < other.x + other.width && 
 
 079                this.y + this.height > other.y &&  this.y < other.y + other.height ){
 
 080                this.grade += other.value;
 
 081                return true;
 
 082            }
 
 083            return false;
 
 084        }
 
 085    }
 
 086    var App = {
 
 087        // 对象
 
 088        elements:[],
 
 089        backImg:bg,
 
 090        imgs:[five,ten,twenty],
 
 091        hero:null,
 
 092        // 画布
 
 093        canvas:null,
 
 094        // 绘制工具
 
 095        context:null,
 
 096        // 定时器
 
 097        timer:null,
 
 098        // 速度（更新间隔speed * 10）
 
 099        speed:0,
 
 100        pause:false,
 
 101        // 绘制对象
 
 102        draw:function(){
 
 103            // 清屏
 
 104            this.context.clearRect(0,0,this.canvas.width,canvas.height);
 
 105            // 绘制背景
 
 106            this.context.drawImage(this.backImg,0,0);
 
 107            // 绘制娃娃脸
 
 108            this.hero.draw(this.context);
 
 109            // 绘制金币
 
 110            for(var i=0;i<this.elements.length;i++){
 
 111                var o = this.elements[i];
 
 112                // 清理屏幕外的对象
 
 113                if(o.x > this.canvas.width || o.x < 0 || o.y > this.canvas.height || o.y < 0){
 
 114                    this.elements.splice(i,1);
 
 115                    this.hero.life--;
 
 116                }else if(this.hero.touch(o)){
 
 117                    this.elements.splice(i,1);
 
 118                }else{
 
 119                    o.draw(this.context);
 
 120                }
 
 121            }
 
 122            // 绘制生命值及得分
 
 123            this.context.textAlign = "left";
 
 124            this.context.font = 'normal 10px Arial';
 
 125            this.context.fillStyle = "#fff";
 
 126            this.context.fillText("Life:" + this.hero.life,5,15);
 
 127            this.context.fillText("Grade:" + this.hero.grade,5,35);
 
 128        },
 
 129        // 循环处理
 
 130        loop:function(){
 
 131            var me = App;
 
 132            if(me.pause){
 
 133                return;
 
 134            }
 
 135            for(var i=0;i<me.elements.length;i++){
 
 136                me.elements[i].move();
 
 137            }
 
 138            var chance = Math.random() * 1000;
 
 139            // 1/10的对象添加概率
 
 140            if(chance < 100){
 
 141                var img = me.imgs[parseInt(chance%me.imgs.length)];
 
 142                var x = Math.random()*(me.canvas.width - me.imgs[parseInt(chance%me.imgs.length)].width);
 
 143                var y = 0;
 
 144                var speed = img.speed;
 
 145                var money = new  Money(x,y,speed,img);
 
 146                me.addElement(money);
 
 147            }
 
 148            me.draw();
 
 149            if(me.hero.life == 0){
 
 150                me.gameOver();
 
 151            }
 
 152        },
 
 153        // 开始游戏
 
 154        gameStart:function(id,speed){
 
 155            var me = this;
 
 156            me.canvas = document.getElementById(id);
 
 157            me.context = me.canvas.getContext("2d");
 
 158            me.speed = speed;
 
 159            me.hero = new Hero((me.canvas.width - heroImg.width)/2,me.canvas.height - heroImg.height,heroImg);
 
 160            if(this.timer != null) me.gameOver();
 
 161            me.canvas.onmousemove = function(e){
 
 162                e = window.event || e;
 
 163                var x = e.clientX - me.canvas.offsetLeft - me.hero.width/2;
 
 164                 
 
 165                if(x > 0 && x < me.canvas.width - me.hero.width){
 
 166                    me.hero.x = x;
 
 167                }
 
 168            }
 
 169            me.timer = setInterval(me.loop,me.speed * 10);
 
 170        },
 
 171        // 暂停游戏
 
 172        gamePause:function(){
 
 173            this.pause = true;
 
 174            this.context.textAlign = "center";
 
 175            this.context.fillStyle = "#f00";
 
 176            this.context.font = 'bold 50px Arial';
 
 177            this.context.fillText("Pause!",this.canvas.width/2,this.canvas.height/2);
 
 178            this.context.font = 'bold 20px Arial';
 
 179            this.context.fillText("Press space key to continue...",this.canvas.width/2,this.canvas.height/2 + 40);
 
 180        },
 
 181        // 结束游戏
 
 182        gameOver:function(){
 
 183            clearInterval(this.timer);
 
 184            this.elements = [];
 
 185            this.pause = false;
 
 186            this.timer = null;
 
 187            this.context.textAlign = "center";
 
 188            this.context.fillStyle = "#f00";
 
 189            this.context.font = 'bold 40px Arial';
 
 190            this.context.fillText("Game Over!",this.canvas.width/2,this.canvas.height/2);
 
 191        },
 
 192        // 添加对象
 
 193        addElement:function(o){
 
 194            this.elements.push(o);
 
 195        }
 
 196    }
 
 197     
 
 198    window.onload = function (){
 
 199        var can = $("canvas");
 
 200        var ctx = $("canvas").getContext("2d");
 
 201        ctx.drawImage(bg,0,0);
 
 202        ctx.drawImage(heroImg,(can.width - heroImg.width)/2,can.height - heroImg.height);
 
 203        ctx.textAlign = "center";
 
 204        ctx.fillStyle = "#f00";
 
 205        ctx.font = 'bold 20px Arial';
 
 206        ctx.fillText("Press space key to start...",can.width/2,can.height/2);
 
 207        document.onkeyup = function(e){
 
 208            if(e.keyCode != 32){
 
 209                return;
 
 210            }
 
 211            if(App.timer == null){
 
 212                App.gameStart("canvas",6);
 
 213            }else if(App.pause){
 
 214                App.pause = false;
 
 215            }else{
 
 216                App.gamePause("canvas",6);
 
 217            }
 
 218        }
 
 219    }
 
 220    function $(id){
 
 221        return document.getElementById(id);
 
 222    }
 
 223//-->
 
 224</SCRIPT>
 
 225<body>
 
 226<canvas width=300 height=450 id="canvas" style="border:1px solid #ccc;background：url('bg.jpg')">
 
 227</canvas>
 
 228</body>
 
229</html>
tianpeiwen
关注
0
点赞
踩
11

收藏

觉得还不错? 一键收藏
7
评论
HTML5+Javascript制作的接金币游戏代码

001"-//w3c//dtd html 4.0 transitional//en">002003004 newdocument 005"generator"content="editplus">
复制链接

扫一扫