<html>
<head>
<title>Build maze & travel maze</title>
<script type="text/javascript">
var cwidth = 900;
var cheight = 350;
var ctx;
var everything = [];
var curwall;
var wallwidth = 5;
var wallstyle = "rgb(200,0,200)";
var walls = [];
var inmotion = false;
var unit = 10;
function Token(sx, sy, rad, stylestring, n){
this.sx = sx;
this.sy = sy;
this.rad = rad;
this.draw = drawtoken;
this.n = n;
this.angle = (2 * Math.PI) / n;
this.moveit = movetoken;
this.fillstyle = stylestring;
}
function drawtoken(){
ctx.fillStyle = this.fillstyle;
var i ;
var rad = this.rad;
ctx.beginPath();
ctx.moveTo(this.sx + rad * Math.cos(-.5 * this.angle), this.sy + rad * Math.sin(-.5 * this.angle));
for(i = 1 ; i < this.n ; i ++){
ctx.lineTo(this.sx + rad * Math.cos((i - .5) * this.angle), this.sy + rad * Math.sin((i - .5) * this.angle));
}
ctx.fill();
}
function movetoken(dx, dy){
this.sx += dx;
this.sy += dy;
var i ;
var wall ;
for(i = 0 ; i < walls.length ; i ++){
wall = walls[i];
if(intersect(wall.sx, wall.sy, wall.fx, wall.fy, this.sx, this.sy, this.rad)){
this.sx -= dx;
this.sy -= dy;
break ;
}
}
}
function Wall(sx, sy, fx, fy, width, stylestring){
this.sx = sx;
this.sy = sy;
this.fx = fx;
this.fy = fy;
this.width = width;
this.draw = drawAline;
this.strokestyle = stylestring;
}
function drawAline(){
ctx.lineWidth = this.width;
ctx.strokeStyle = this.strokestyle;
ctx.beginPath();
ctx.moveTo(this.sx, this.sy);
ctx.lineTo(this.fx, this.fy);
ctx.stroke();
}
var mypent = new Token(100, 100, 20, "rgb(0, 0, 250)", 5)
everything.push(mypent);
function init(){
ctx = document.getElementById("canvas").getContext('2d');
canvas1 = document.getElementById("canvas");
canvas1.addEventListener("mousedown", startwall, false);
canvas1.addEventListener("mousemove", stretchwall, false);
canvas1.addEventListener("mouseup", finish, false);
window.addEventListener("keydown", getkeyAndMove, false);
drawall();
}
function startwall(ev){
var mx;
var my;
if(ev.layerX || ev.layerX == 0){
mx = ev.layerX;
my = ev.layerY;
}else if(ev.offsetX || ev.offsetX == 0){
mx = ev.offsetX;
my = ev.offsetY;
}
curwall = new Wall(mx, my, mx + 1, my + 1, wallwidth, wallstyle);
inmotion = true;
everything.push(curwall);
drawall();
}
function stretchwall(ev){
if(inmotion){
var mx;
var my;
if(ev.layerX || ev.layerX == 0){
mx = ev.layerX;
my = ev.layerY;
}else if(ev.offsetX || ev.offsetX == 0){
mx = ev.offsetX;
my = ev.offsetY;
}
curwall.fx = mx;
curwall.fy = my;
drawall();
}
}
function finish(ev){
inmotion = false;
walls.push(curwall);
}
function drawall(){
ctx.clearRect(0, 0, cwidth, cheight);
var i ;
for(i = 0 ; i < everything.length ; i ++){
everything[i].draw();
}
}
function getkeyAndMove(event){
var keyCode;
if(event == null){
keyCode = window.event.keyCode;
window.event.preventDefault();
}else{
keyCode = event.keyCode;
event.preventDefault();
}
switch(keyCode){
case 37:
mypent.moveit(-unit, 0);
break;
case 38:
mypent.moveit(0, -unit);
break;
case 39:
mypent.moveit(unit, 0);
break;
case 40:
mypent.moveit(0, unit);
break;
default:
window.removeEventListener('keydown', getkeyAndMove, false);
}
drawall();
}
function intersect(sx, sy, fx, fy, cx, cy, rad){
var dx;
var dy;
var t;
var rt;
dx = fx - sx;
dy = fy - sy;
t = 0.0 - ((sx - cx) * dx + (sy - cy) * dy) / ((dx * dx) + (dy * dy));
if(t < 0.0){
t = 0.0;
}else if(t > 1.0){
t = 1.0
}
dx = (sx + t * (fx - sx)) - cx;
dy = (sy + t * (fy - sy)) - cy;
rt = (dx * dx) + (dy * dy);
if(rt < (rad * rad)){
return true;
}else{
return false;
}
}
function savewalls(){
var w = [];
var allw = [];
var sw;
var onewall;
var i;
var lsname = document.sf.slname.value;
for(i = 0 ; i < walls.length ; i ++){
w.push(walls[i].sx);
w.push(walls[i].sy);
w.push(walls[i].fx);
w.push(walls[i].fy);
onewall = w.join("+");
allw.push(onewall);
w = [];
}
sw = allw.join(";");
try{
localStorage.setItem(lsname, sw);
}catch(e){
alert("data not saved, error given : " + e);
}
return false;
}
function getwalls(){
var swalls;
var sw;
var i;
var sx;
var sy;
var fx;
var fy;
var curwall;
var lsname = document.gf.glname.value;
swalls = localStorage.getItem(lsname);
if(swalls != null){
wallstgs = swalls.split(";");
for(i = 0 ; i < wallstgs.length ; i ++){
sw = wallstgs[i].split("+");
sx = Number(sw[0]);
sy = Number(sw[1]);
fx = Number(sw[2]);
fy = Number(sw[3]);
curwall = new Wall(sx, sy, fx, fy, wallwidth, wallstyle);
walls.push(curwall);
everything.push(curwall);
}
drawall();
}else{
alert("No data retrieved.");
}
window.addEventListener('keydown', getkeyAndMove, false);
return false;
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="900" height="350">
Your browser doesn't support the HTML5 element canvas.
</canvas>
<br />
Press mouse button down, drag and release to make a wall.
Use arrow keys to move token.<br />
Pressing any other key will stop key capture and allow you to save the maze locally.
<form name="sf" onSubmit="return savewalls()" >
To save your maze, enter in a name and click on the SAVE WALLS button.<br />
Name:<input name="slname" value="maze_name" type="text"/>
<input type="submit" value="SAVE WALLS" />
</form>
<form name="gf" onSubmit="return getwalls()">
To add old walls, enter in the name and click on the GET SAVED WALLS button.<br />
Name:<input name="glname" value="maze_name" type="text"/>
<input type="submit" value="GET SAVED WALLS" />
</form>
</body>
</html>
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发
1星 需积分: 42 74 浏览量
2017-08-29
17:53:31
上传
评论 5
收藏 11.13MB RAR 举报 
Html5+CSS3+js动画小游戏全部源码，HTML5游戏开发 （113个子文件） 
7-2.html 5KB 10-1.html 5KB 9-1.html 5KB 4-3.html 5KB 5-1.html 4KB 4-2.html 4KB 5-2.html 4KB 7-3.html 4KB 6-2.html 4KB 2-3.html 4KB 8-1.html 3KB 6-1.html 3KB 2-2.html 3KB 4-1.html 3KB 3-2.html 3KB 2-1.html 2KB 3-3.html 2KB 3-1.html 2KB 7-1.html 1KB
7-2.html~ 5KB 10-1.html~ 5KB 9-1.html~ 5KB 4-3.html~ 5KB 5-1.html~ 4KB 4-2.html~ 4KB 5-2.html~ 4KB 7-3.html~ 4KB 6-2.html~ 4KB 2-3.html~ 4KB 8-1.html~ 3KB 6-1.html~ 3KB 2-2.html~ 3KB 4-1.html~ 3KB 3-2.html~ 3KB 2-1.html~ 2KB 3-3.html~ 2KB 3-1.html~ 2KB 7-1.html~ 831B 1-1.html~ 399B
sq.jpg 219KB s9.jpg 210KB d8.jpg 204KB s6.jpg 200KB c4.jpg 198KB d5.jpg 196KB hj.jpg 194KB sk.jpg 193KB ck.jpg 193KB ca.jpg 192KB h10.jpg 192KB h2.jpg 191KB h5.jpg 187KB h3.jpg 186KB c6.jpg 186KB sj.jpg 186KB s5.jpg 184KB d4.jpg 184KB c2.jpg 183KB d10.jpg 182KB da.jpg 180KB s10.jpg 180KB d9.jpg 179KB cj.jpg 178KB s4.jpg 177KB d3.jpg 175KB c5.jpg 174KB dq.jpg 174KB h4.jpg 171KB d2.jpg 169KB c10.jpg 169KB h7.jpg 168KB c8.jpg 166KB sa.jpg 164KB hk.jpg 164KB c7.jpg 164KB d6.jpg 163KB c3.jpg 161KB h8.jpg 161KB dk.jpg 160KB s8.jpg 160KB h9.jpg 159KB c9.jpg 159KB hq.jpg 158KB h6.jpg 158KB dj.jpg 156KB d7.jpg 151KB s7.jpg 149KB ha.jpg 143KB cq.jpg 141KB s3.jpg 138KB s2.jpg 131KB word1.js 52B word1.js~ 0B
sfire3.mp4 2.26MB
back.png 159KB plateau.png 74KB feathers.png 60KB ty1.png 51KB gg1.png 47KB gg2.png 47KB共 113 条
- 1
- 2
评论1
最新资源