<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
<title>无标题文档</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
var box = $("#box");
box.css("width", window.innerWidth);
box.css("height", window.innerHeight);
});
</script>
</head>
<body>
<div id="box" style="border: 0;margin: 0;padding: 0;overflow: hidden;background-color: #000000;">
<canvas id="canvas" style="display: block;">
<script type="text/javascript">
var B = 0.56;
var canvasW = window.innerWidth;
var canvasH = canvasW / B;
if (canvasH > window.innerHeight) canvasH = window.innerHeight;
var canvasObj = $("#canvas");
canvasObj.css("margin-top", (window.innerHeight - canvasH) / 2);
canvasObj.attr("width", canvasW);
canvasObj.attr("height", canvasH);
var ca = document.getElementById("canvas");
var ctx = ca.getContext("2d");
var bj1 = new Image();
var player = new Image();
var tu = new Array();
bj1.src = "images/bj.jpg";
player.src = "images/ren.png";
var playerWidth = 123 * B;
var playerHeight = 213 * B;
var h = 20;
var gk = 1;
var sudu = 10;
var zl = 100;
var chi = 0;
var shi = 0;
var fs = 0;
var sm = 1;
var bj = bj1;
function object() {
this.x = 0;
this.y = 0;
this.l = 11;
this.image = new Image();
}
var sprite = new object();
//sprite.x=(canvasW - playerWidth)/2;
sprite.x = 0;
sprite.y = canvasH - playerHeight;
//sprite.y=canvasH-playerHeight;
sprite.image = player;
addListener(ca, "mousemove", m);
var beginTime = new Date();
var gameTime = 15;
var remainTime;
function checkTime() {
var nowTime = new Date();
remainTime = gameTime - parseInt((nowTime.getTime() - beginTime.getTime()) / 1000);
document.getElementById("m").innerHTML = remainTime;
}
var range = canvasW - 60 * B;
function chansheng() {
if (shi % h == 0) {
for (var j = 2 * chi; j < 2 * (chi + 1); j++) {
tu[j] = new object();
var i = Math.round(Math.random() * range);
if (j == 2 * chi + 1) {
while (Math.abs(i - tu[2 * chi].x) < 30) {
i = Math.round(Math.random() * range);
}
}
var k = Math.round(Math.random() * zl);
if (k < 90) {
tu[j].image.src = "images/1.png";
tu[j].q = 1;
} else if (k < 97) {
tu[j].image.src = "images/2.png";
tu[j].q = 2;
} else {
tu[j].image.src = "images/3.png";
tu[j].q = 3;
}
tu[j].x = i;
tu[j].y = -Math.round(Math.random() * 300);
}
chi++;
if (chi == 10) chi = 0;
}
shi++;
}
function sudukongzhi() {
if (remainTime > 10) {
h = 5;
sudu = 30;
} else if (remainTime > 5) {
h = 5;
sudu = 50;
} else {
h = 5;
sudu = 60;
}
}
function draw() {
sudukongzhi();
chansheng();
for (var i = 0; i < tu.length; i++) {
if (jianche(sprite, tu[i])) {
if (tu[i].q == 1) {
fs += 1;
} else if (tu[i].q == 2) {
fs += 5;
} else {
fs += 10;
}
tu[i].y += 200;
} else if (!jianche(sprite, tu[i])) {
//ctx.drawImage(tu[i].image,tu[i].x,tu[i].y,60*B,60*B);
tu[i].y += sudu;
}
ctx.drawImage(tu[i].image, tu[i].x, tu[i].y, 60 * B, 60 * B);
}
}
function jianche(a, b) {
var c = a.x - b.x;
var d = a.y - b.y;
if (c < b.image.width * B && c > -a.image.width * B && d < b.image.height * B && d > -a.image.height * B) {
return true;
} else {
return false;
}
}
function addListener(element, e, fn) {
if (element.addEventListener) {
element.addEventListener(e, fn, false);
} else {
element.attachEvent("on" + e, fn);
}
}
function m(event) {
sprite.x = event.clientX - playerWidth / 2;
if (sprite.x + playerWidth >= canvasW) sprite.x = canvasW - playerWidth;
else if (sprite.x <= playerWidth / 2) sprite.x = 0;
}
// function m(event){
// var last=event.clientX-playerWidth/2;
//
// if(last+playerWidth>=canvasW) last=canvasW-playerWidth;
// else if(last<=playerWidth/2) last=0;
// if(last < sprite.x){
// for(var i=sprite.x;i>last;i--){
// sprite.x = i;
// ctx.drawImage(sprite.image,sprite.x,sprite.y,playerWidth,playerHeight);
// }
// }else{
// for(var j=0;j<last;j+10){
// sprite.x = j;
// ctx.drawImage(sprite.image,sprite.x,sprite.y,playerWidth,playerHeight);
// }
// }
// }
function stop() {
clearInterval(interval);
}
interval = setInterval(function () {
ctx.clearRect(0, 0, canvasW, canvasH);
ctx.drawImage(bj, 0, 0, canvasW, canvasH);
ctx.drawImage(sprite.image, sprite.x, sprite.y, playerWidth, playerHeight);
draw();
document.getElementById("f").innerHTML = fs;
checkTime();
if (remainTime == 0) {
stop();
}
}, 100);
</script>
</canvas>
<div id="f"
s
类似接红包小游戏-canvas、js.zip
需积分: 19 71 浏览量
2019-10-14
11:11:20
上传
评论
收藏 120KB ZIP 举报
类似接红包小游戏-canvas、js.zip （12个子文件） 
类似接红包小游戏-canvas、js .idea 
workspace.xml 10KB misc.xml 174B modules.xml 298B inspectionProfiles HTML5接金币小游戏.iml 458B images 
3.png 3KB ren.png 16KB timeMoney.png 13KB
bj.jpg 45KB 1.png 3KB 2.png 2KB jquery.js 94KB
index.html 8KB
qq_20654147
- 粉丝: 0
- 资源: 2
最新资源
- kernel-lt-5.4.109-1.el7.elrepo.x86-64.rpm
- 2323235534634634636
- kernel-3.10.0-1160.105.1.el7.x86-64.rpm
- C++读写文本文件和二进制文件（源代码）
- kernel-3.10.0-123.6.3.el7.x86-64.rpm
- AUTOSAR_AP_SWS_IntrusionDetectionSystemManager.pdf
- 基于Java的学生在线考试系统 .docx
- kernel-3.10.0-123.4.4.el7.x86-64.rpm
- YOLO 数据集：LOL小地图上的英雄检测【包含划分好的数据集（10类别）、检测类别文本、数据可视化脚本】
- AUTOSAR_FO_RS_IntrusionDetectionSystem.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0