HTML小游戏—打灰机

最新推荐文章于 2023-12-03 11:00:22 发布
最新推荐文章于 2023-12-03 11:00:22 发布
阅读量1.4k 收藏 20
点赞数 6
分类专栏： Html+Css+Javascript 文章标签： html 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maobenben_nan/article/details/53490159
版权

这里为大家带了一款小游戏~~打灰机========
话不多说，上代码：
HTML部分：

    <meta charset="UTF-8">
    <title>打灰机</title>
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <style type="text/css">
        #canvas{margin: 0 auto;}
    </style>
</head>
<body>
    <div class="htmleaf-container">
        <header class="htmleaf-header">
            <h1>打灰机~~~~~~~~~~</h1>
        </header>
        <canvas id="canvas" width="800" height="600"></canvas>
    </div>
    <script src="js/BlockBlaster.js"></script>

default.css里面的内容：

body{
    background: #f9f7f6;
    color: #404d5b;
    font-weight: 500;
    font-size: 1.05em;
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
}
.htmleaf-container{
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

css里面没啥重要的东西，主要就是定个位之类的~~~
下面是核心代码了！！！JS
BlockBlaster.js内容：


    var fps = 30;
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");          
    var bgColor = "rgb(40,40,40)"
    var ready;
    var enemyScore;
    var renderTimer = setInterval(render,1/fps*100);
    var difficultyTimer;
    var spawnTimer;
    var spawntime;
    var gameTime;
    var difficulty;
    var score;
    var highScore=0;
    var gameOver;
    var entities = [];
    var player;
    var fader;

    function reset(){
        if (score > highScore) highScore = score;
        ready = true;
        enemyScore = 0;
        gameTime = 0;
        difficulty = 1;
        score = 0;
        spawntime = 1500;
        gameOver = false;
        fader = 0;
        entities = [];
        player = null;
        clearTimers()
    }

    //清除所有的定时器
    function clearTimers(){
        clearInterval(difficultyTimer);
        clearInterval(spawnTimer);
    }
    //初始化所有定时器 
    function initializeTimers(){
        difficultyTimer = setInterval(increaseDifficulty,2000);
        spawnTimer = setInterval(spawnEnemy,spawntime);
    }
    //初始化/开始游戏 
    function init(){
        ready = false;
        clearTimers();
        initializeTimers();

        //Spawn player
        player = new Player();
        player.position.set(canvas.width/2,canvas.height-player.size);
        player.render();
        entities.push(player);

    }
    //更新的实体 
    function updateEntities(){
        entities.forEach(function(e){
            if (e.position.y > canvas.height + 20){
                if (e.name == "Enemy"){
                    enemyScore += 1;
                }
                removeEntity(e);
            }
            e.update(1/fps);
        })
    }
    //绘制背景
    function drawBG(){
        ctx.fillStyle = bgColor;
        ctx.fillRect(0,0,canvas.width,canvas.height);
    }
    //绘制成绩显示器 
    function drawScore(){
        ctx.fillStyle = "#CCFF99";
        ctx.font = "24px sans-serif";
        ctx.fillText("成绩: " + score,10,24);
        ctx.font = "16px sans-serif";
        ctx.fillText("最高成绩: " + highScore,10,48);
        var enemyScoreString = "";
        for (var i = 0; i < enemyScore; i++){
            enemyScoreString += "X";
        }
        ctx.font = "24px sans-serif";
        ctx.fillStyle = "#FF6666";
        ctx.fillText(enemyScoreString,canvas.width - 75,24);
        ctx.font = "16px sans-serif";
        ctx.fillText("难度: " + difficulty,canvas.width/2 - 50,24);
    }
    //绘制一些静态
    function drawStatic(alpha){
        var s = 15 ;
        for (var x = 0; x < canvas.width; x+=s){
            for (var y = 0; y < canvas.width; y+=s){
                var n = Math.floor(Math.random() * 60);
                ctx.fillStyle = "rgba(" + n + "," + n + "," + n + "," + (Math.random() * alpha) + ")";
                ctx.fillRect(x,y,s,s);
            }
        }
    }
    //“准备好了吗？”屏幕 
    function drawReadyScreen(){
        drawBG();
        //drawStatic(.25);
        drawScore();
        fader += .1 * 1/fps;
        ctx.fillStyle = "rgba(255,255,255," + fader + ")";
        ctx.font = "72px sans-serif";
        ctx.fillText("准备好了?",canvas.width/2 - 140,canvas.height/2);
        drawScore();
    }
    //所有实体的绘制
    function drawEntities(){
        entities.forEach(function(e){e.render();});
    }   
    //游戏结束界面
    function drawGameOver(){
        ctx.fillStyle = "rgba(0,0,0,"+fader +")";
        ctx.fillRect(0,0,canvas.width,canvas.height);
        drawStatic(fader/2);
        drawScore();
        fader += .1 * 1/fps
        ctx.fillStyle = "rgba(255,255,255," + fader + ")";
        ctx.font = "72px sans-serif";
        ctx.fillText("游戏结束",canvas.width/2 - 220,canvas.height/2);
    }   
    //Render 事件
    function render(){
        drawBG();
        drawEntities();
        drawScore();
        if (gameOver){drawGameOver(); return;}
        else if (ready){drawReadyScreen(); return;}
        updateEntities();
        gameTime += 1/fps;
        if (enemyScore >= 3) {
            clearTimers();
            gameOver = true;
            fader = 0;
        }
    }
    //返回相对于画布的鼠标位置
    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return new Vector2(evt.clientX - rect.left,
                            evt.clientY - rect.top)
    }           
    //鼠标点击
    function canvasClick(){
        if (gameOver){ if (fader > .5) reset();return;}
        if (ready)      {init(); return;}
        var bullet = new Bullet();
        bullet.position.set(player.position.x + player.size / 2 - bullet.size/2,player.position.y - player.size/2 - bullet.size /2);
        bullet.velocity.y = -30;
        entities.push(bullet);
        if (score > 0) score -= 1;
    }   
    //增加难度
    function increaseDifficulty(){
        difficulty += 1;
        if (spawntime > 20) spawntime -= 20;
        clearInterval(spawnTimer);
        spawnTimer = setInterval(spawnEnemy,spawntime);
    }   
    //改变方块颜色
    function setAlpha(color,alpha){
        if (color.indexOf('a') == -1){
            return color.replace(")",","+alpha+")").replace("rgb","rgba");
        }
    }   
    //方块的消灭
    function death(entity){
        if (entity.name == "Enemy") {
            var particleCount = Math.floor((Math.random() * 6) + 3);
            for (var i = 0; i < particleCount; i++){
                var p = new Particle();
                p.color = entity.color;
                p.size = Math.floor((Math.random() * entity.size/2) + 5);
                p.position.set(entity.position.x+entity.size/2,entity.position.y+entity.size/2);
                entities.push(p);
            }
            score += 25;
        }
        removeEntity(entity);
    }   
    //消除方块
    function removeEntity(entity){
        var idx = entities.indexOf(entity);
        if (idx > -1) entities.splice(idx,1);
    }   
    //检查两个实体是否重叠
    function overlaps(entityA,entityB){
        var sa = entityA.size;
        var x1a = entityA.position.x;
        var x2a = entityA.position.x + sa;
        var y1a = entityA.position.y;
        var y2a = entityA.position.y + sa;
        var sb = entityB.size;
        var x1b = entityB.position.x;
        var x2b = entityB.position.x + sb;
        var y1b = entityB.position.y;
        var y2b = entityB.position.y + sb;
        return (x1a < x2b && x2a > x1b && y1a < y2b && y2a > y1b);
    }   
    //滋生新的方块
    function spawnEnemy(){
        var e = new Enemy();
        var px = Math.floor((Math.random() * canvas.width));
        var py = -e.size;
        var v = difficulty;
        var a = Math.floor((Math.random() * (v + 15)) + v);
        var f = Math.floor((Math.random() * (v + 15)) + v);
        e.position.set(px,py);
        var r = Math.random();
        if (r > .5){
            straightDownMotion(e,v);
        }
        else if (r > .3){
            sineMotion(e,a,f,v);
        }
        else if (r > .1){
            triangularMotion(e,a,f,v);
        }
        else{
            sawtoothMotion(e,a,f,v);
        }
        entities.push(e);
    }   
    //直向下运动 
    function straightDownMotion(entity,speed){
        entity.update = function(deltatime){
            this.velocity.x = 0;
            this.velocity.y = speed;
            Entity.prototype.update.call(this,deltatime);
        }
    }   
    //定义正弦波运动
    function sineMotion(entity,amplitude,freq,speed){
        entity.update = function(deltatime){
            this.velocity.x = amplitude * Math.cos(this.position.y/freq);
            this.velocity.y = speed;
            Entity.prototype.update.call(this,deltatime);
        }
    }
    //定义锯波运动
    function sawtoothMotion(entity, amplitude,freq,speed){
        var modifier = 1;
        if (Math.random() > .5) modifier = -1;
        entity.update = function(deltatime){
            this.velocity.x = modifier * ((-2*amplitude)/Math.PI)*Math.atan(1/Math.tan(this.position.y / freq));
            this.velocity.y = speed;
            Entity.prototype.update.call(this,deltatime);
        }
    }
    //定义三角运动（）
    function triangularMotion(entity, amplitude,freq,speed){
        entity.update = function(deltatime){
            this.velocity.x = ((2*amplitude)/Math.PI)*Math.asin(Math.sin(this.position.y / freq));
            this.velocity.y = speed;
            Entity.prototype.update.call(this,deltatime);
        }
    }   
    //定义颜色
    function randomColor(min,max){
        var r = Math.floor((Math.random() * max) + min);
        var g = Math.floor((Math.random() * max) + min);
        var b = Math.floor((Math.random() * max) + min);
        var col = "rgb(" + r + "," + g + "," + b + ")";
        return col;
    }   
    //向量
    var Vector2 = function(x1,y1){
        this.x = x1;
        this.y = y1;
    }
    Vector2.prototype.set = function(a,b){
        this.x = a;
        this.y = b;
    }   
    //实体（基类） 
    var Entity = function(){
        this.name = "Entity";
        this.size = 25;
        this.position = new Vector2(0,0);
        this.velocity = new Vector2(0,0);
        this.color = "#FFFFFF";
    }
    Entity.prototype.sayName = function(){
        console.log(this.name);
    }
    Entity.prototype.update = function(deltaTime){
        this.position.x += this.velocity.x * deltaTime;
        this.position.y += this.velocity.y * deltaTime;
        //Keep in bounds
        if (this.position.x - this.size < 0) {this.position.x = this.size;}
        if (this.position.x + this.size > canvas.width) {this.position.x = canvas.width - this.size;}
    }
    Entity.prototype.render = function(){
        ctx.fillStyle = this.color;
        ctx.fillRect(this.position.x,this.position.y,this.size,this.size);
    }   
    //敌人的单位
    var Enemy = function(){
        Entity.call(this);
        this.name = "Enemy";
        this.size = Math.floor((Math.random() * 50)+20);
        this.color = randomColor(90,150);
    }
    Enemy.prototype = Object.create(Entity.prototype);
    Enemy.prototype.constructor = Entity;
    //玩家单位
    var Player = function(){
        Entity.call(this);
        this.name = "Player";
        this.color = "#4747FF"
    }
    Player.prototype = Object.create(Entity.prototype);
    Player.prototype.constructor = Entity;
    //方块的实体 
    var Particle = function(){
        Entity.call(this);
        this.name = "Particle";
        this.size = 10;
        this.time = 0;
        this.maxTime = Math.floor((Math.random() * 10) + 3);
        this.velocity.x = Math.floor((Math.random() * 20) - 10);
        this.velocity.y = Math.floor((Math.random() * 20) - 10);
    }
    Particle.prototype = Object.create(Entity.prototype);
    Particle.prototype.constructor = Entity;
    Particle.prototype.update = function(deltatime){
        Entity.prototype.update.call(this,deltatime);
        this.time += deltatime;
        if (this.time >= this.maxTime) removeEntity(this);
    }
    //子弹的实体
    var Bullet = function(){
        Entity.call(this);
        this.name = "Bullet";
        this.size = 10;
        this.time = 0;
        this.color = "rgba(200,200,200,1)";
        this.particlesDelay = .5;
    }
    Bullet.prototype = Object.create(Entity.prototype);
    Bullet.prototype.constructor = Entity;
    Bullet.prototype.update = function(deltatime){
        Entity.prototype.update.call(this,deltatime);
        //检查碰撞
        var me = this;
        entities.forEach(function(e){
            if (e !== me && e.name != "Particle"){
                if (overlaps(me,e)){
                    death(e);
                    removeEntity(me);
                }
            }
        })
        //从游戏中删除如果外部界限
        if (this.position.y < 0) removeEntity(this);    
        //创建粒子
        this.time += deltatime;
        if (this.time >= this.particlesDelay){
            this.time = 0;
            var p = new Particle();
            p.size = Math.floor((Math.random() * 5)+2);
            p.color = setAlpha("rgb(125,125,125)",Math.random());
            //p.color = setAlpha(randomColor(100,255),Math.random()); //彩色颗粒
            p.velocity.x /=2;
            p.position.x = this.position.x + this.size /2 - p.size/2;
            p.position.y = this.position.y - p.size/2;
            entities.push(p);
        }
    }
    //HTML加载事件
    document.addEventListener('DOMContentLoaded', reset());
    canvas.addEventListener("click",canvasClick);
    //鼠标移动事件
    canvas.addEventListener('mousemove', function(evt) {
            var mousePos = getMousePos(canvas, evt);
            if (player && !gameOver) player.position.x = mousePos.x;
    }, false);

游戏截图

哈哈，这就是打灰机小游戏，也可以叫打豆豆吧=-=，这游戏很魔性哦！！

Melody_Lan
关注
  • 6
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+canvas+javascript开发打灰机游戏
03-29
html5+canvas+javascript开发打灰机游戏
HTML做一个贪吃蛇小游戏
ZTLJQ的博客
06-06 8796
☄️爬虫JS逆向系列专栏 -☄️python系列专栏 -
几款有意思的html游戏推荐(在线云玩+源码)
m0_44950309的博客
07-28 7297
作者小时候曾一度沉迷网页小游戏,一直都是7k7k,4399的老熟客了,常玩的像洛克王国、赛尔号、创世兵魂这呀，现在flash浏览器都基本不支持了,无聊时候想玩玩都得先找个合适的浏览器,少了很多乐趣。现在是H5游戏的时代了,H5小游戏因其休闲性受到广大用户喜爱，同样也受到企业的欢迎，成为互动休闲娱乐的重要形式之一。...
共226款Html5小游戏源码分享
蒙双眼看世界
08-22 1万+
【代码】共226款Html5小游戏源码分享。
41个html5小游戏
qq_20146529的博客
07-13 1628
有大量的动画和交互功能，完全可以用来完成一些游戏类的操作，今天收集分享：41个用HTML5制作完成的游戏作品，希望其中有你喜欢和需要的，或者可以给你带来灵感的。
盘点25个Html游戏Game源码网页爱好者不容错过
最新发布
adendean的博客
12-03 1345
盘点25个Html游戏Game源码网页爱好者不容错过
climbUp:向上爬HTML5小游戏
05-05
climbUp爬楼梯（html5游戏）操作：电脑：键盘向左，向右键;手机：（点击模式）点击左区域，点击有区域；（遥控模式）重力感应左右摆动手机。游戏逻辑：黑色背景为正向操作（点击左边跳左边，点击右边跳右边）;灰色...
2048. html+css+js实现网页版2048小游戏
07-11
2048. html + js + css实现网页版2048小游戏源码，直接下载运行index.html和2048.html即可。对于熟练练习JS和html以及css有很大帮助
狂打灰太狼.zip，HTML小游戏，带你进入前端世界
04-03
HTML小游戏，学习过程中的小项目，完整代码，欢迎大家的交流学习。 刚学了jquery，有看到网上视频的案例，如何下载了素材自己也敲了一遍。然后我自己梳理一遍，算是总结复习吧。 代码的实现。 1、游戏顶部的进度条，...
纯HTML5制作围住神经猫游戏-附源码下载
11-21
去年风靡微信朋友圈的小游戏“围住神经猫”，我也试着做了一下。游戏是用Egret引擎开发的，因为Egret是用Typescript语言构建的，因此这里游戏也是用Typescript来开发的。 游戏规则： 点击画面上的灰色格子，慢慢将...
html小游戏--纯页面html小游戏贪吃蛇（基础版）
nanZhaiXiaoLang的博客
02-24 9199
直接复制到一个页面就行了 代码如下： <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta charset="UTF-8"> <meta name="keywords" content="贪吃蛇"> <meta name="Description" content="这是一个初学者用来学习的小游戏"> <style type="text/cs
html实现经典坦克大战小游戏
xcLeigh
05-11 1635
html实现经典坦克大战小游戏，坦克大战源码，html实现经典坦克大战小游戏源码，这是一款很老的游戏，相信大家都有玩过，基本操作方法：玩家1：W A S D 上左下右，SPACE 射击；玩家2： ↑ ← ↓ → 上左下右，ENTER 射击。N 下一关，P 上一关。基本功能都实现，简单易上手。用 html+js+css+canvas 实现，可以借用上手学习。
html实现五子棋游戏
路在前方
10-31 5216
实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px
用Html做一个石头剪刀布小游戏
freshman的博客
06-03 1254
简单的html制作的石头剪刀布小游戏，让大家回味童真哈哈
10款超炫HTML5游戏 附游戏源码
热门推荐
yanyiping992的博客
06-05 3万+
小编为各位宅在家里的朋友分享10款超炫HTML5游戏，让我们在不仅获得快乐的同时又可以学到新鲜的HTML5知识，一起来看看吧。1、HTML5版切水果游戏 HTML5游戏极品这是一款由百度JS小组提供的HTML5版切水果游戏，记得切水果游戏当年非常火，今天我找到了一款基于HTML5实现的网页版切水果游戏。虽然和原版的切水果游戏相比功能不怎么完善，但是该HTML5切水果游戏也算有声有色，画面也十分华丽...
html网页小游戏
m0_57790713的博客
04-14 255
游戏html代码
HTML小游戏
xtingjie的博客
02-15 9953
游戏截图如下： <!DOCTYPE html> <html> <head></head> <body> <!-- 4个board --> <div id="board1" style="position: absolute; width:80px; height:10px; left:420px; top:555px; background-color: cade
html实现经典打方块小游戏
xcLeigh
05-09 1642
html实现经典打方块小游戏源码，通过控制鼠标移动方块，单击发出子弹， 它可以连发子弹，敌方方块被打碎后会分裂为多个小方块。整个游戏非常流畅，性能非常好。 总共三次机会，当碰到别的方块失去一次机会，有历史总积分和当前分数。
HTML实现怀旧小游戏，超级玛丽、飞机大战…等十余款【完整源码分享】
我要学Java_blog
12-28 1万+
HTML怀旧小游戏 介绍 超级玛丽、飞机大战、赛车、俄罗斯方块、飞翔的鸟、王校长热狗飞机大战、植物大战僵尸、冒险岛、塔块游戏、五子棋、贪吃蛇 怀旧小游戏，简单HTML实现，可下载修改代码调整难度，增加关卡，优化画面等等，学习代码也有欢乐~玩起来！ 软件架构 html、JavaScript、css 使用说明 下载完整源码【文末附下载地址】 点击HTML文件运行即可 游戏操作指南 w a s d 或者 ↑ ↓ ← → 或者 移动鼠标 游戏展示 超级玛丽 飞机大战
html飞机大战小游戏
07-29
如果您想开发一个基于 HTML 的飞机大战小游戏，您可以遵循以下步骤： 1. 创建 HTML 页面：创建一个基本的 HTML 页面结构，包括 `<html>`, `<head>`, `<body>` 等标签。您可以使用一个 `<canvas>` 元素来绘制游戏...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值