最近学习了下Canvas绘图。。。突发奇想就有了下面这款简单的小游戏，纯属娱乐~

废话不多说，直接上代码：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>小怪兽吃豆豆</title>

    <style>

        #canvas { border: 1px solid #aaaaaa; display: block; margin: 20px auto; }

        #score {text-align: center;position: relative;left: -565px;font-size: 24px;color: green; }

        #title { display: block; margin: 10px auto; }

    </style>

</head>

<body>

<div id="canvas-warp">

    <canvas id="title"></canvas>

    <div id="score">得分: 0</div>

    <canvas id="canvas">

        你的浏览器居然不支持Canvas？！赶快换一个吧！！

    </canvas>

</div>

<script>

    setTitle();

    var width = 1200, height = 600, //画布大小

        x = 400, y = 300, //小怪兽圆心坐标

        r = 30, //小怪兽半径

        r1 = 10, //豆豆半径

        speed = 5, //小怪兽移动速度(px)

        direction = 'right', //小怪兽当前移动方向

        ddList = [], //存储画布当前所有豆豆

        score = 0; //分数

    window.onload = function(){

        var canvas = document.getElementById("canvas");

        canvas.width = width;

        canvas.height = height;

        var context = canvas.getContext("2d");

        //绘制背景画布

        drawCanvas(context);

        //随机生成5个豆豆

        randomCircle();

        drawCircle(context);

        //生成小怪兽

        drawRole(context);

        //定时生成豆豆

        var timer = setInterval(function(){

            if(ddList.length > 100) {

                clearInterval(timer);

                alert('Game over!!!');

                return;

            }

            clearCanvas(context);

            drawCanvas(context);

            randomCircle();

            drawCircle(context);

            drawRole(context);

        }, 10000)

        //定义键盘方向键事件

        document.onkeydown = function(e) {

            if(ddList.length > 100) {

                clearInterval(timer);

                alert('Game over!!!');

                return;

            }

            e = e || window.event;

            e.preventDefault();

            switch(e.keyCode) {

                case 37: //左

                    direction = 'left';

                    if(x > r) { x = x - speed; }

                    break;

                case 38: //上

                    direction = 'up';

                    if(y > r) { y = y - speed; }

                    break;

                case 39: //右

                    direction = 'right';

                    if(x < width - r) { x = x + speed; }

                    break;

                case 40: //下

                    direction = 'down';

                    if(y < height - r) { y = y + speed; }

                    break;

            }

            //吃掉豆豆简单算法

            for(var i = 0; i < ddList.length; i++) {

                if((Math.abs(ddList[i].y - y) <= 2*r1 && Math.abs(ddList[i].x - x) <= r1)

                    || (Math.abs(ddList[i].x - x) <= 2*r1 && Math.abs(ddList[i].y - y) <= r1)) {

                    ddList.splice(i, 1);

                    score++;

                    break;

                }

            }

            clearCanvas(context);

            drawCanvas(context);

            drawCircle(context);

            drawRole(context);

            //刷新得分

            document.getElementById('score').innerText = '得分: ' + score;

        }

    };

    //绘制画布

    function drawCanvas(context) {

        context.fillStyle = "#000";

        context.fillRect(0, 0, width, height);

    }

    //清除画布

    function clearCanvas(context) {

        context.clearRect(0, 0, width, height);

    }

    //一次随机生成5个豆豆

    function randomCircle() {

        for(var i = 0; i < 5; i++) {

            var x0 = Math.floor(Math.random()*(width - r1));

            x0 = x0 - x0%speed;

            if(x0 < r1) { x0 = r1;}

            var y0 = Math.floor(Math.random()*(height - r1));

            y0 = y0 - y0%speed;

            if(y0 < r1) { y0 = r1;}

            ddList.push({x: x0, y: y0});

        }

    }

    //重新绘制豆豆

    function drawCircle(context) {

        context.beginPath();

        context.fillStyle = "yellow";

        for(var i = 0; i < ddList.length; i++) {

            context.moveTo(ddList[i].x, ddList[i].y);

            context.arc(ddList[i].x, ddList[i].y, r1, 0*Math.PI, 2*Math.PI);

        }

        context.fill();

    }

    //绘制小怪兽

    function drawRole(context) {

        if(direction == 'right') {

            drawRightRole(context);

        }else if(direction == 'left') {

            drawLeftRole(context);

        }else if(direction == 'up') {

            drawUpRole(context);

        }else {

            drawDownRole(context);

        }

    }

    //向右走小怪兽

    function drawRightRole(context) {

        context.lineWidth = 2;

        context.strokeStyle = "red";

        context.beginPath();

        context.arc(x, y, r, 0.2*Math.PI, 1.8*Math.PI);

        context.lineTo(x, y);

        var x0 = x + parseFloat(r * Math.cos(0.2*Math.PI).toFixed(2));

        var y0 = y + parseFloat(r * Math.sin(0.2*Math.PI).toFixed(2));

        context.lineTo(x0, y0);

        context.stroke();

        context.beginPath();

        var offsetx = parseFloat(0.5*r * Math.cos(0.2*Math.PI).toFixed(2));

        var offsety = parseFloat(0.5*r * Math.sin(0.2*Math.PI).toFixed(2));

        context.moveTo(x + offsetx, y + offsety);

        context.quadraticCurveTo(x, y + 0.6*r, x - offsetx, y + offsety);

        context.stroke();

        context.beginPath();

        context.arc(x, y - 0.5*r, 5, 0*Math.PI, 2*Math.PI);

        context.stroke();

    }

    //向左走小怪兽

    function drawLeftRole(context) {

        context.lineWidth = 2;

        context.strokeStyle = "red";

        context.beginPath();

        context.arc(x, y, r, 1.2*Math.PI, 0.8*Math.PI);

        context.lineTo(x, y);

        var x0 = x - parseFloat(r * Math.cos(0.2*Math.PI).toFixed(2));

        var y0 = y - parseFloat(r * Math.sin(0.2*Math.PI).toFixed(2));

        context.lineTo(x0, y0);

        context.stroke();

        context.beginPath();

        var offsetx = parseFloat(0.5*r * Math.cos(0.2*Math.PI).toFixed(2));

        var offsety = parseFloat(0.5*r * Math.sin(0.2*Math.PI).toFixed(2));

        context.moveTo(x + offsetx, y + offsety);

        context.quadraticCurveTo(x, y + 0.6*r, x - offsetx, y + offsety);

        context.stroke();

        context.beginPath();

        context.arc(x, y - 0.5*r, 5, 0*Math.PI, 2*Math.PI);

        context.stroke();

    }

    //向上走小怪兽

    function drawUpRole(context) {

        context.lineWidth = 2;

        context.strokeStyle = "red";

        context.beginPath();

        context.arc(x, y, r, 1.7*Math.PI, 1.3*Math.PI);

        context.lineTo(x, y);

        var x0 = x + parseFloat(r * Math.sin(0.2*Math.PI).toFixed(2));

        var y0 = y - parseFloat(r * Math.cos(0.2*Math.PI).toFixed(2));

        context.lineTo(x0, y0);

        context.stroke();

        context.beginPath();

        var offsetx = parseFloat(0.5*r * Math.sin(0.2*Math.PI).toFixed(2));

        var offsety = parseFloat(0.5*r * Math.cos(0.2*Math.PI).toFixed(2));

        context.moveTo(x + offsetx, y + offsety);

        context.quadraticCurveTo(x + 0.6*r, y, x + offsetx, y - offsety);

        context.stroke();

        context.beginPath();

        context.arc(x - 0.5*r, y, 5, 0*Math.PI, 2*Math.PI);

        context.stroke();

    }

    //向下走小怪兽

    function drawDownRole(context) {

        context.lineWidth = 2;

        context.strokeStyle = "red";

        context.beginPath();

        context.arc(x, y, r, 0.7*Math.PI, 0.3*Math.PI);

        context.lineTo(x, y);

        var x0 = x - parseFloat(r * Math.sin(0.2*Math.PI).toFixed(2));

        var y0 = y + parseFloat(r * Math.cos(0.2*Math.PI).toFixed(2));

        context.lineTo(x0, y0);

        context.stroke();

        context.beginPath();

        var offsetx = parseFloat(0.5*r * Math.sin(0.2*Math.PI).toFixed(2));

        var offsety = parseFloat(0.5*r * Math.cos(0.2*Math.PI).toFixed(2));

        context.moveTo(x - offsetx, y + offsety);

        context.quadraticCurveTo(x - 0.6*r, y, x - offsetx, y - offsety);

        context.stroke();

        context.beginPath();

        context.arc(x + 0.5*r, y, 5, 0*Math.PI, 2*Math.PI);

        context.stroke();

    }

    //设置标题

    function setTitle() {

        var canvas = document.getElementById("title");

        canvas.width = 600;

        canvas.height = 100;

        var context = canvas.getContext("2d");

        //绘制背景画布

        context.fillStyle = "#fff";

        context.fillRect(0,0,600,100);

        context.font = "italic bolder 50px serif"; //设置字体

        //设置渐变色

        var grd = context.createLinearGradient(150,50,450,50);

        grd.addColorStop(0,"green");

        grd.addColorStop(0.8,"red");

        context.fillStyle = grd;

        context.textAlign = "center"; //文本的中心被放置在指定的位置。

        context.textBaseline="middle"; //文本基线是 em 方框的正中。

        context.globalAlpha = 0.5; //透明度

        context.fillText("小怪兽吃豆豆",300,50); //显示填充文本

        context.strokeText("小怪兽吃豆豆",300,50); //显示描边文本

    }

</script>

</body>

</html>

复制代码到.html文件，直接浏览器打开，用键盘方向键控制移动，游戏界面如下图所示：

学习资料：

1、https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

2、http://caibaojian.com/canvas/

最新文章

  1. 手Q兴趣号的价值在哪里
  2. LeetCode:Word Break II（DP）
  3. HttpRuntime应用程序的运行时
  4. Python学习（2）基本语法
  5. [quote ]ffmpeg, gstreamer, Raspberry Pi, Windows Desktop streaming
  6. sql 分割字符串 存储过程
  7. hadoop 学习入门 一 云计算之旅
  8. javascript---jquery (1事件)
  9. java学习(二)多态中成员变量详解
  10. 201521123014 《Java程序设计》第4周学习总结
  11. oracle入门之对表数据查询（二）
  12. springboot的三种启动方式
  13. BZOJ3070 : [Pa2011]Prime prime power 质数的质数次方
  14. getOutputStream() has already been called for this response解释以及解决方法
  15. 【原】关于AdaBoost的一些再思考
  16. vue cli 配置信息说明
  17. android开发：全屏和退出全屏
  18. Docker未启动错误:Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
  19. Lintcode: Find Peak Element
  20. 计算几何误差修正cmp

热门文章

  1. linux下清除tomcat缓存
  2. docker查看运行容器详细信息
  3. Java面向对象----String对象的声明和创建
  4. 关于使用JavaMail发送邮件
  5. 2018-7-5-dotnet-设计规范-·-抽象定义
  6. 卸载ROS命令
  7. Redis源码解析：08对象
  8. HZOJ Tree
  9. part10.3-字符驱动访问揭秘
  10. shell 并发执行任务