SeaWolf——canvas+dom游戏资源-CSDN文库

共28个文件

png：14个

psd：8个

jpg：3个

canvas

html5

5星 · 超过95%的资源需积分: 10 55 浏览量 2012-09-25 02:29:50 上传评论收藏 386KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

sea-wolf-1.0.rar （28个子文件）

jquery-1.7.2.min.js 93KB

image

sky.jpg 11KB

control-bg.jpg 16KB

ship1.png 2KB

boom2.png 2KB

ship.psd 28KB

booooom.psd 26KB

ship.png 2KB

bullet1.png 1KB

boom.psd 30KB

bullet.png 1KB

logo.psd 172KB

bullet2.png 1KB

boom.png 1KB

enemy1.png 2KB

logo.jpg 25KB

boom1.png 1KB

sea.psd 368KB

enemy.psd 32KB

control-bg.psd 210KB

ship2.png 2KB

enemy.png 2KB

enemy2.png 2KB

bullet.psd 27KB

pause-go.png 2KB

booooom.png 2KB

sea-wolf.html 4KB

sea-wolf.js 23KB

<!DOCTYPE html> <html lang="zh-CN"> <head> <title>sea wolf</title> <style> * {padding:0;margin:0} ul, ol, li {list-style: none} .loader {width: 100%; height: 100%; background-color: RGBA(0, 0, 0, 0.5); color: #fff; text-align: center; font-size: 30px; position: absolute; top: 0; left: 0; z-index: 1000; font-weight: bold;} .loader .progress {width: 500px; height: 20px; display: block; background: #000; border-radius: 4px;} .loader .progress b {width: 0%; height: 20px; display: block; background: #0ff; border-radius: 4px;} .loader .wait {height: 80px; width: 500px; margin: 250px auto 0;} .loader .ready {display: none; background: #0c0; border-radius: 4px; width: 75px; margin: 250px auto 0; text-align: center; box-shadow: 0 0 10px #fff;} .loader .ready a {color: #fff; text-decoration: none; padding: 2px;} .sea-wolf {width: 1000px; margin: 0 auto;} .sea-wolf h1 {height: 100px; text-indent: -9000px; background: url(image/logo.jpg) no-repeat 0 0;} .sea-wolf .control {height: 100px; font-size: 14px; line-height: 20px; background: url(image/control-bg.jpg) no-repeat 0 0; position: relative;} .sea-wolf .control .score {color: #00f; font-size: 28px; font-weight: bold; position: absolute; left: 470px; top: 20px; text-shadow: 1px 0 2px #000} .sea-wolf .control .hp {position: absolute; height: 10px; left: 95px; top: 52px;} .sea-wolf .control .hp li {float: left; background: #f00; border: 1px solid #fcc; box-shadow: 0 0 1px #ccc; text-indent: -9000px; width: 10px; height: 10px; margin: 0 1px;} .sea-wolf .control .lv {position: absolute; font-size: 20px; font-weight: bold; left: 95px; top: 71px; color: #f9f4a2; text-shadow: 1px 0 1px #000} .sea-wolf .control .pause-go {background: url(image/pause-go.png) no-repeat -9000px -9000px; display: block; width: 35px; height: 34px; text-indent: -9000px; left: 856px; top: 35px; position: absolute; cursor: pointer} .sea-wolf .control .pause {background-position: -35px 0;} .sea-wolf .control .go {background-position: 0 0;} .sea-wolf .control .power {width: 100px; height: 10px; overflow: hidden; background: #aaa; position: absolute; left: 433px; top: 77px; box-shadow: 1px 0 2px #ccc} .sea-wolf .control .power span {display: block; height: 8px; margin-top: 1px; background: #f55; width: 0;} .sea-wolf .control .power span.power-fill {background: #f00;} .sea-wolf .canvas-bg {width: 1000px; margin: 0 auto; height: 500px; background: #333; position: relative;} .sea-wolf .canvas-bg .sea{width: 1000px; position: absolute; left: 0; top: 0; z-index: 1; background: #ccf} .sea-wolf .canvas-bg .sky{width: 1000px; position: absolute; left: 0; top: 0; z-index: 1; background: url(image/sky.jpg) no-repeat 0 0 #99f} .sea-wolf #canvas {width: 1000px; height: 500px; position: relative; z-index: 3;} </style> <script src="jquery-1.7.2.min.js"></script> <script src="sea-wolf.js"></script> </head> <body> <div class="sea-wolf"> <h1>MY GAME - SEA WOLF</h1> <div class="control"> <span class="score"><span>0</span></span> <ul class="hp"></ul> <span class="pause-go pause">pause go</span> <span class="lv"></span> <div class="power"><span></span></div> </div> <div class="canvas-bg"> <canvas id="canvas" width="1000" height="500">If you see this words, please update your browers.</canvas> <div class="sky"></div> <div class="sea"></div> </div> </div> <div class="loader"> <div class="wait"> <div class="pre"></div> <div class="progress"><b></b></div> </div> <div class="ready"> <a href="javascript:;" title="start game">PLAY</a> </div> </div> </body> </html>

评论收藏

内容反馈