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. P6222-「P6156 简单题」加强版【莫比乌斯反演】

    正题 题目链接:https://www.luogu.com.cn/problem/P6222 题目大意 给出\(k\),\(T\)组询问给出\(n\)求 \[\sum_{i=1}^n\sum_{j=1 ...

  2. 启用 Spring-Cloud-OpenFeign 配置可刷新,项目无法启动,我 TM 人傻了(上)

    本篇文章涉及底层设计以及原理,以及问题定位,比较深入,篇幅较长,所以拆分成上下两篇: 上:问题简单描述以及 Spring Cloud RefreshScope 的原理 下:当前 spring-clou ...

  3. c++ class里面成员和分配内存问题

    慢慢开始学c++啦,记录学习的大体过程 class中神奇的内存(sizeof) 1.内存补齐 便于管理类(生成的对象)的内存,类总内存总是为最大成员字节大小的倍数,不足的会进行内存补齐 类的整体内存就 ...

  4. nodejs安装 及环境变量配置教程 超详细版

    ------------恢复内容开始------------ ------------恢复内容开始------------ 上篇文件 写到  遇到了两个棘手问题  : @终端进程启动失败: shell ...

  5. SpringCloud升级之路2020.0.x版-26.OpenFeign的组件

    本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 首先,我们给出官方文档中的组件结构图: 官方文档中的组件,是以实现功能为维度的,我们这里是 ...

  6. 基于Hyperledger Fabric实现ERC721

    介绍 超级账本(Hyperledger)项目是首个面向企业应用场景的开源分布式账本平台.由linux基金会牵头,包括 IBM 等 30家初始企业成员共同成立的. 区块链网络主要有三种类型:公共区块链. ...

  7. print spooler LPF 打印机漏洞

    打印机漏洞 该漏洞可以通过创建打印机驱动和端口,实现任意文件写入,用于提权或者写入后门. 打印机调用流程:client通过RPC调用server的spoolsv.exe,spoolsv.exe是sys ...

  8. 如何查找一个目录中所有c文件的总行数

    如何查找一个目录中所有c文件的行数 面试题问到了一题,如何统计wc文件夹下所有文件的行数,包括了子目录. 最后在 https://blog.csdn.net/a_ran/article/details ...

  9. 【实验向】问题:假设计算机A和计算机B通信,计算机A给计算机B发送一串16个字节的二进制字节串,以数组形式表示:

    问题: 假设计算机A和计算机B通信,计算机A给计算机B发送一串16个字节的二进制字节串,以数组形式表示: unsigned char[16] = {0x3f, 0xa0, 0x00, 0x00, 0x ...

  10. repartition导致的广播失败,关于错误Failed to get broadcast_544_piece0 of broadcast_544

    今天一个生产环境任务出现了性能问题,,经过仔细检查发现是在一个join操作时,原设定广播右表数据广播失败,导致后续步骤进行缓慢,,报错信息 java.io.IOException: org.apach ...