WhatAreYou小游戏

最新推荐文章于 2024-09-25 09:44:53 发布

安静嘚一颗心

最新推荐文章于 2024-09-25 09:44:53 发布

阅读量525

点赞数

分类专栏： Game 文章标签：游戏

本文链接：https://blog.csdn.net/weixin_35783350/article/details/52765819

版权

Game 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="Shape.js"></script>
<script src="Rectangle.js"></script>
<script src="main.js"></script>
</body>
</html>

(function () {

    var CANVAS_WIDTH = 500, CANVAS_HEIGHT = 500;

    /**
     * @type {HTMLCanvasElement}
     */
    var canvas;
    /**
     * @type {CanvasRenderingContext2D}
     */
    var context;

    var rect;

    var rect2;

    function createCanvas() {
        canvas = document.createElement("canvas");
        canvas.width = CANVAS_WIDTH;
        canvas.height = CANVAS_HEIGHT;
        document.body.appendChild(canvas);
        context = canvas.getContext("2d");
        canvas.οnclick=canvasClickedHandler;
        canvas.οnmοusemοve=canvasClickedHandler1;
    }
    function canvasClickedHandler(e) {/*判断rect2是不是在画布内*/
        if(e.layerX>rect2.x&&
            e.layerY>rect2.y&&
            e.layerY<rect2.y+rect2.height&&
            e.layerX<rect2.x+rect2.width){
            alert("你终于承认你是猪");
            alert("你终于承认你是猪");
            alert("你终于承认你是猪");
            alert("重要的事情说三遍");

        }
    }
    function canvasClickedHandler1(e) {/*判断rect2是不是在画布内*/
        if(e.layerX>rect.x&&
            e.layerY>rect.y&&
            e.layerY<rect.y+rect.height&&
            e.layerX<rect.x+rect.width){
            clearCanvas();
            createRectangle();/*随机矩形*/
            render_wen();

        }
    }



    function clearCanvas() {/*清除画布*/
        context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
        Maxwrite();
    }
    function Maxwrite() {
        context.fillStyle='black';
        context.font = "20pt 宋体";
        context.fillText("告诉我你是什么？",55,25);
    }

    function createRectangle() {/*矩形1的随机数  当鼠标移入事件时触发*/
        rect = new ucai.Rectangle(80, 40);/*相当于传参*/
        rect.x =Math.random()*420;
        rect.y =Math.random()*300;
        rect.font="我是人";
        rect.color = "red";
        rect.color2="yellow"
    }

    function createRectangle1() {/*初始化的第一个矩形*/
        rect = new ucai.Rectangle(80, 40);
        rect.x =20;
        rect.y =100;
        rect.font="我是人";
        rect.color = "red";
        rect.color2="yellow"/*字体颜色*/
    }


    function createRectangle2() {/*初始化的第二个矩形*/
        rect2 = new ucai.Rectangle(80, 40);
        rect2.x = 200;
        rect2.y = 100;
        rect2.font="你是猪";<pre name="code" class="javascript">window.ucai = window.ucai || {};

(function () {

    /**
     * @class Shape
     * @constructor Shape
     */
    function Shape() {
        this._x = 0;
        this._y = 0;
    }

    var p = Shape.prototype;/*这个对象的原型*/

    Object.defineProperties(p, {
        x: {
            set: function (value) {
                this._x = value;
            },
            get: function () {
                return this._x;
            }
        },
        y: {
            set: function (value) {
                this._y = value;
            },
            get: function () {
                return this._y;
            }
        },
        color: {
            set: function (value) {
                this._color = value;
            },
            get: function () {
                return this._color;
            }
        },
    });

    /**
     *
     * @param {CanvasRenderingContext2D} context
     */
    p.render = function (context) {/*根据最初始化的位置  先保存下最原始的画布 放置画第二个的时候被覆盖*/
        context.save();
        context.translate(this.x, this.y);/*因为每次绘制形状的时候要改变他的位置*/
        context.fillStyle = this.color;

        this.onDraw(context);
        
        context.restore();
    };

    /**
     * @protected
     * @abstract
     * @param context
     */
    p.onDraw = function (context) {/*重绘*/
    };

    /**
     * @abstract
     */
    ucai.Shape = Shape;
})();

window.ucai = window.ucai || {};

(function () {


    /**
     * @class Rectangle
     * @extends Shape
     * @param width
     * @param height
     * @constructor
     */
    function Rectangle(width, height) {
        this._width = width;
        this._height = height;

    }

    var p = Rectangle.prototype = new ucai.Shape();/*Rectangle继承了Shape*/
                                                     //继承Shape中的坐标和颜色

    /**
     *
     * @param {CanvasRenderingContext2D} context
     */
    p.onDraw = function (context) {/*继承*/
        context.fillRect(0, 0, this.width, this.height);/*给矩形宽和高定义方法*/
        context.fillStyle=this.color2;
        context.font = "20pt 宋体";
        context.fillText(this.font,0,30);/*字也是定义的一个方法*/
    };

    Object.defineProperties(p, {
        width: {
            set: function (value) {
                this._width = value;
            },
            get: function () {
                return this._width;
            }
        },
        height: {
            set: function (value) {
                this._height = value;
            },
            get: function () {
                return this._height;
            }
        },
        font:{
            set: function (value) {
                this._font = value;
            },
            get: function () {
                return this._font;
            }
        },
        color2: {
            set: function (value) {
                this._color2 = value;
            },
            get: function () {
                return this._color2;
            }
        },
        
    });

    ucai.Rectangle = Rectangle;
})();

rect2.color = "blue"; rect2.color2="#eee"/*字体颜色*/ } function render_wen() { rect.render(context);/*画出两个矩形*/ rect2.render(context); } function init() { createCanvas();/*创建画布*/ createRectangle1();/*第一个矩形因为在别处定义了方法*/ createRectangle2();/*第二个矩形*/ clearCanvas();/*清空画布*/ Maxwrite(); render_wen(); // ucai.PropertyAnimation(rect, "x", 100, 200, 200); } init();})();