js实现一个小游戏（飞翔的jj）

源代码+素材图片在我的仓库

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>飞翔的林俊杰</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        #canvas{

            margin-left:100px;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1200px" height="600px"></canvas>

    <div id="res">

        键盘点击↑即可跳跃

        <h2 id="mark">得分：0</h2>

    </div>

    <script>

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

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

        //创建一个图片

        var img = new Image();

        img.src = './img/jj.png';

        //等图片加载结束

        var jjx = 100, jjy = 100;

        img.onload = function () {

            context.drawImage(img, jjx, jjy);

        }

        creatColum();

        //定义一个计算器下落

        var jjtimer = setInterval( function() {

                            jjy++;

                            jjy = jjy > 540 ? 540 : jjy;

                            //把上一张画布清空，确保再次画的时候背景是白纸状态

                            //参数 开始清空的地方(前两个参数)、宽、高

                            context.clearRect(0, 0, 1200, 600);

                            drawColum();

                            context.drawImage(img, jjx, jjy);

                        }, 10)

        document.onkeydown = function(e) {

            if(e.keyCode == 38)

                jjy -=25;

        }

        var columArr = [], colomTimer = null;

        function creatColum () {

            colomTimer = setInterval(function() {

                var colum = {};//柱子容器

                colum.x = 1150;

                colum.y = -Math.round(Math.random()*150 + 150);

                colum.top = new Image();

                colum.bottom = new Image();

                colum.top.src = './img/colom.jpg';

                colum.bottom.src = './img/colom.jpg';

                colum.id = new Date().getTime();

                columArr.push(colum);

            }, 1500);

        }

        var same = null , mark = 0;

        function drawColum() {

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

                columArr[i].x--;

                context.drawImage(columArr[i].top,columArr[i].x,columArr[i].y+50);

                context.drawImage(columArr[i].bottom,columArr[i].x,columArr[i].y+440);

                if (jjx + 37 >= columArr[i].x && jjx - 53 <= columArr[i].x) {

                    // console.log("经过");

                    //加分

                    if (columArr[i].id != same) {

                        mark+=10;

                        same = columArr[i].id;

                        document.getElementById("mark").innerHTML = "得分：" + mark;

                    }

                    //判断碰撞

                    if (jjy < columArr[i].y + 355 || jjy > columArr[i].y+407) {

                        clearInterval( colomTimer);

                        clearInterval( jjtimer);

                        confirm("最终得分："+mark)

                    }

                }

            }

        }

    </script>

</body>

</html>

js实现一个小游戏（飞翔的jj）的更多相关文章

  1. JQuery&原生js ——实现剪刀石头布小游戏

    前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write L ...

  2. 用js实现2048小游戏

    用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...

  3. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  4. 使用PixiJS做一个小游戏

    PixiJS PixiJS使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库. 官方 ...

  5. 使用JS实现2048小游戏

    JS实现2048小游戏源码 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...

  6. Pygame：编写一个小游戏 标签： pythonpygame游戏 2017-06-20 15:06 103人阅读 评论(0)

    大学最后的考试终于结束了,迎来了暑假和大四的漫长的"自由"假期.当然要自己好好"玩玩"了. 我最近在学习Python,本意是在机器学习深度学习上使用Python ...

  7. DirectX游戏开发——从一个小游戏開始

    本系列文章由birdlove1987编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhurui_idea/article/details/26364129 写在前面:自 ...

  8. 用 JS 做一个数独游戏（二）

    用 JS 做一个数独游戏(二) 在 上一篇博客 中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...

  9. 用 JS 做一个数独游戏（一）

    用 JS 做一个数独游戏(一) 数独的棋盘由 9x9 的方格组成,每一行的数字包含 1 ~ 9 九个数字,并且每一列包含 1 ~ 9 这 9 个不重复的数字,另外,整个棋盘分为 9 个 3x3 的块, ...

随机推荐

  1. django class类即视图类添加装饰器的几种方法

    根据别人发布整理,个人爱好收集(原文:https://blog.csdn.net/mydistance/article/details/83958655 ) 第一种:定义函数装饰器,在函数,类中使用函 ...

  2. Win10删除电脑3D对象等7个文件夹

    把下面几个注册表项依次删除掉 "图片"文件夹:［-HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Expl ...

  3. 鸿蒙内核源码分析(重定位篇) | 与国际接轨的对外部发言人 | 百篇博客分析OpenHarmony源码 | v55.01

    百篇博客系列篇.本篇为: v55.xx 鸿蒙内核源码分析(重定位篇) | 与国际接轨的对外部发言人 | 51.c.h.o 加载运行相关篇为: v51.xx 鸿蒙内核源码分析(ELF格式篇) | 应用程 ...

  4. 测试用例 setup 和 和 teardown

    前言 学过unittest的都知道里面用前置和后置setup呾teardown非常好用,在每次用例开始前呾结束后都去执行一次.当然迓有更高级一点的 setupClass 呾 teardownClass ...

  5. Liunx下Mysql，MongoDB性能优化的配置

    场景 这几天在赶十一上线的项目,但是突然发现接口性能不好,高并发支持不住.又不想改代码,就在数据库层面进行优化. Mysql 分区:项目中有对40万条的数据进行时间查询的要求,就算对DateTime建 ...

  6. Jetpack Compose学习(6)——关于Modifier的妙用

    原文: Jetpack Compose学习(6)--关于Modifier的妙用 | Stars-One的杂货小窝 之前学习记录中也是陆陆续续地将常用的Modifier的方法穿插进去了,本期就来详细的讲 ...

  7. SDOI2015 排序

    SDOI2015 排序 今天看到这道题,没有一点思路,暴力都没的打...还是理解错题意了,操作不同位置不是说改不同的区间,而是不同操作的顺序...考场上如果知道这个的话最少暴力拿一半啊,因为正解本来就 ...

  8. CF1082G Petya and Graph（最小割，最大权闭合子图)

    QWQ嘤嘤嘤 感觉是最水的一道\(G\)题了 顺便记录一下第一次在考场上做出来G qwqqq 题目大意就是说: 给你n个点,m条边,让你选出来一些边,最大化边权减点权 \(n\le 1000\) QW ...

  9. 洛谷3233 HNOI2014（虚树+dp）

    膜拜一发\(mts\_246,forever\_shi\) 这两位爷是真的无敌! 首先来看这个题,一看题目的数据范围和"关键点"字眼,我们就能得知这是一道虚树题 那就先一如既往的建 ...

  10. 一个简单的单例模式Demo

    /** * @author :nx014924 * @date :Created in 5/30/2021 1:09 PM * @description: * @modified By: * @ver ...