JavaScript-贪吃蛇

最新推荐文章于 2024-05-17 00:45:12 发布

梧桐下的四叶草

最新推荐文章于 2024-05-17 00:45:12 发布

阅读量603

点赞数 1

分类专栏： JavaScript 文章标签： javascript canvas html 游戏源代码

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/51627522

版权

学了JS有段时间了，感觉还是对于JS相当的陌生，感觉好多东西都是不懂的，但是经过了写贪吃蛇游戏后感觉对于JS有了更深的理解。感觉看了再多的JS知识，如果不动手去做的话，那就纸上谈兵。所以学习还是应该多动手才行，不能懒啊。

源代码：

<html>
    <head>
    <title>Keyboard input</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
        <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var width = canvas.width;
        var height = canvas.height;
        //将画布划分为块
        var blockSize = 10;
        var widthInBlocks = width / blockSize;
        var heightInBlocks = height / blockSize;
        //定义score分数变量
        var score = 0;
        //接下来绘制边框
        var drawBorder = function(){
            //边框颜色
            ctx.fillStyle = "Gray";
            //顶部矩形
            ctx.fillRect(0,0,width,blockSize);
            //底部矩形
            ctx.fillRect(0,height-blockSize,width,blockSize);
            //左边矩形
            ctx.fillRect(0,0,blockSize,height);
            //右边矩形
            ctx.fillRect(width-blockSize,0,blockSize,height);
        };
        //定制文本在&

最低0.47元/天解锁文章

梧桐下的四叶草

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-贪吃蛇

学了JS有段时间了，感觉还是对于JS相当的陌生，感觉好多东西都是不懂的，但是经过了写贪吃蛇游戏后感觉对于JS有了更深的理解。感觉看了再多的JS知识，如果不动手去做的话，那就纸上谈兵。所以学习还是应该多动手才行，不能懒啊。源代码： Keyboard input
复制链接

扫一扫