<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5过关小游戏</title>
<style type="text/css">
* { margin:0; padding:0; }
#canvas { display:block; margin:10px auto; border:1px solid #bbb; outline:none; }
.box { position:relative; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="box">
<canvas id="canvas" tabindex="0"></canvas>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var c = $("#canvas");
var cur = c.css('cursor');
var w = 600, h = 600, dx = 0, dy = 0, x = 0, y = 0;
var x2 = x;
var y2 = y;
var w2 = w/2;
var h2 = h/2;
var mf = [w2,h2];
var fadewh = 0;
var le = 1;
var lea = 30;
var tle = le;
var lv = '';
var mr = 20;
var mr2 = mr/2;
var start = true, fade = false, level1 = false, lev = false, mov = false, choose = false, pause = false;
var kaishisize = '20px';
var tm = 1;
var ya = [];
var chu = [];
var bu = [];
var yd = [];
var bd = [];
var yc = [];
var ly = [];
var yq = [];
var zb = [];
var bc = [];
var lt = [];
var th = [];
var cs = [];
var cd = [];
var ty = [];
var hb = [];
var zz = [];
var v = 0;
var a = .2;
var mxl = 0, mxr = 0;
var xv = 2;
var sv = -7;
var sx = 0;
var sy = 0;
var sx2 = 0;
var sy2 = 0;
var xa = 0;
var xaj = .2;
var bingf = 1;
var pi2 = Math.PI/2;
var jian = false;
var kong = false;
var isStart = true;
var ov = false;
var nanc = false;
var fa = 10;
var yi = true;
var dkong = false;
var choosestyle = '#fff';
var menustyle = '#999';
var restyle = '#999';
var tingstyle = '#999';
var backstyle = '#fff';
var cox = 100, coy = 100, cow = 60, coh = 30, coxk = 85, coyk = 40;
var coy2 = coy;
var cox2 = cox;
var cohang = 0;
var choo = [];
canvas.width = w;
canvas.height = h;
ctx.fillStyle = '#000';
ctx.fillRect(0,0,w,h);
function begin(){
ctx.fillStyle = '#fff';
ctx.fillRect(0,0,w,h);
if(start)toStart();
if(choose)toChoose();
if(level1)toLevel1();
if(lev)toLev();
if(mov)move();
if(ov)over();
if(fade)toFade();
if(pause)toPause();
if(isStart)window.requestAnimationFrame(begin);
}
c.mousemove(function(e){
dx = e.pageX - c.offset().left - parseInt(c.css('border-left-width'));
dy = e.pageY - c.offset().top - parseInt(c.css('border-top-width'));
mm();
});
function mm(){
if(start){
if(dx >= 250 && dx <= 350 && dy >= 288 && dy <= 318){
kaishisize = '22px';
c.css('cursor','pointer');
}else if(dx >= 270 && dx <= 330 && dy >= 362 && dy <= 386){
c.css('cursor','pointer');
choosestyle = '#000';
}
else{
kaishisize = '20px';
choosestyle = '#fff';
c.css('cursor',cur);
}
}
if(choose && choo.length){
if(dx >= 270 && dx <= 330 && dy >= 482 && dy <= 506){
backstyle = '#000';
c.css('cursor','pointer');
}else{
backstyle = "#fff";
for(var i=0;i<lea;i++){
if(dx >= choo[i].x && dx <= choo[i].x+cow && dy >= choo[i].y && dy <= choo[i].y+coh){
choo[i].c = "#000";
c.css('cursor','pointer');
break;
}else{
choo[i].c = "#fff";
c.css('cursor',cur);
}
}
}
}
if(level1){
if(dx >= 560 && dx <= 590 && dy >= 10 && dy <= 35){
menustyle = '#bbb';
c.css('cursor','pointer');
}else if(dx >= 520 && dx <= 540 && dy >= 12 && dy <= 32){
restyle = '#bbb';
c.css('cursor','pointer');
}else if(dx >= 478 && dx <= 502 && dy >= 9 && dy <= 37){
tingstyle = '#bbb';
c.css('cursor','pointer');
}else{
menustyle = '#999';
restyle = '#999';
tingstyle = '#999';
c.css('cursor',cur);
}
}
if(pause){
if(Math.sqrt(Math.pow(dx-300,2)+Math.pow(dy-300,2)) <= 100){
c.css('cursor','pointer');
}else{
c.css('cursor',cur);
}
}
}
c.click(function(){
if(start){
if(dx >= 250 && dx <= 350 && dy >= 288 && dy <= 318){
start = false;
kaishisize = '20px';
c.css('cursor',cur);
fade = true;
}else if(dx >= 270 && dx <= 330 && dy >= 362 && dy <= 386){
start = false;
kaishisize = '20px';
choosestyle = '#fff';
c.css('cursor',cur);
choose = true;
}
}
if(choose && choo.length){
for(var i=0;i<lea;i++){
if(dx >= choo[i].x && dx <= choo[i].x+cow && dy >= choo[i].y && dy <= choo[i].y+coh){
le = i+1;
c.css('cursor',cur);
fade = true;
choose = false;
break;
}
}
if(dx >= 270 && dx <= 330 && dy >= 482 && dy <= 506){
choose = false;
start = true;
}
}
if(level1){
if(dx >= 560 && dx <= 590 && dy >= 10 && dy <= 35){
start = true;
mov = false;
level1 = false;
lev = false;
le = 1;
tle = 1;
}else if(dx >= 520 && dx <= 540 && dy >= 12 && dy <= 32){
xuan();
}else if(dx >= 478 && dx <= 502 && dy >= 9 && dy <= 37){
isStart = false;
pause = true;
}
}
if(pause){
if(Math.sqrt(Math.pow(dx-300,2)+Math.pow(dy-300,2)) <= 100){
isStart = true;
pause = false;
level1 = true;
mov = true;
begin();
}
}
});
function toPause(){
level1 = false;
mov = false;
ctx.fillStyle = 'rgba(0,0,0,.5)';
ctx.fillRect(0,0,w,h);
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(300,300,100,0,4*pi2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(300,300,96,0,4*pi2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.moveTo(370,300);
ctx.lineTo(250,230);
ctx.lineTo(250,370);
ctx.closePath();
ctx.fill();
}
function toChoose(){
ctx.fillStyle = '#999';
ctx.fillRect(0,0,w,h);
for(var i=0;i<lea;i++){
if(!choo[i]){
choo[i] = {};
}
choo[i].x = cox+(cohang*coxk);
choo[i].y = coy;
ctx.beginPath();
ctx.strokeStyle = choo[i].c ||'#fff';
ctx.strokeRect(cox+(cohang*coxk),coy,cow,coh);
ctx.closePath();
ctx.fillStyle = choo[i].c ||'#fff';
ctx.font = '16px 微软雅黑';
ctx.fillText(i+1, cox+(cohang*coxk)+cow/2,coy+coh*2/3);
cohang++;
if((i+1)%5 == 0 && i != 1){
coy+=coyk
cox = cox2;
cohang = 0;
}
}
ctx.fillStyle = backstyle;
ctx.font = '16px 微软雅黑';
ctx.fillText('返回',300,500);
ctx.beginPath();
ctx.strokeStyle = backstyle;
ctx.strokeRect(270,482,60,24);
ctx.closePath();
coy = coy2;
cox = cox2;
cohang = 0;
}
function toStart(){
ctx.fillStyle = '#999';
ctx.fillRect(0,0,w,h);
ctx.font = kaishisize+' 微软雅黑';
ctx.fillStyle = '#fff';
ctx.textAlign = 'center';
ctx.fillText("开始游戏", 300, 310);
ctx.fillStyle = choosestyle;
ctx.font = '16px 微软雅黑';
ctx.fillText("选关", 300, 380);
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.strokeRect(250,288,100,30);
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = choosestyle;
ctx.strokeRect(270,362,60,24);
ctx.closePath();
}
function toFade(){
ctx.fillStyle = '#fff';
ctx.fillRect(0,0,w,h);
if(tle != 1){
if(yi){
fadewh = Math.max.apply(null, mf) - fa;
fa*=-1;
yi = false;
}
if(fadewh <= 0)fa*=-1;
fadewh += fa;
}else{
fadewh += fa;
}
ctx.fillStyle = '#999';
ctx.fillRect(0-fadewh,0-fadewh,w2,h2);
ctx.fillRect(w2+fadewh,0-fadewh,w2,h2);
ctx.fillRect(0-fadewh,h2+fadewh,w2,h2);
ctx.fillRect(w2+fadewh,h2+fadewh,w2,h2);
if(fadewh >= w2 && fadewh >= h2){
yi = true;
fadewh = 0;
xuan();
}
}
function xuan(){
fade = false;
lev = true;
level1 = true;
mov = true;
ya = [];
chu = [];
【前端素材】小游戏-028- 小方块回家.zip
版权申诉
34 浏览量
2024-04-06
16:14:00
上传
评论
收藏 41KB ZIP 举报
【前端素材】小游戏-028- 小方块回家.zip （3个子文件） 
manualType.properties 10B
028- 小方块回家 
index.html 42KB jquery.min.js 91KB资源评论
枫蜜柚子茶
- 粉丝: 6896
- 资源: 5118
最新资源
- vmware workstation pro 17 linux版
- 3479521_1710042575-1.rwmod
- 安装及环境配置UMCM-2023C-ma笔记
- (完整)数据库课程设计餐厅点餐说明书-21ab6d3c8beb172ded630b1c59eef8c75ebf952c.doc
- 2023-04-06-项目笔记 - 第一百五十四阶段 - 4.4.2.152全局变量的作用域-152 -2024.06.04
- 松哥解协议松哥解协议松哥解协议松哥解协议松哥解协议
- 618节日618节日618节日
- tensorflow-gpu-2.9.1-cp37-cp37m-win-amd64.whl
- tensorflow-gpu-2.9.0-cp37-cp37m-win-amd64.whl
- tensorflow-gpu-2.9.0-cp39-cp39-win-amd64.whl
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
