Skip to content

Commit 3374812

Browse files
author
Danny
committed
add gold
1 parent 506f477 commit 3374812

File tree

10 files changed

+1129
-914
lines changed

10 files changed

+1129
-914
lines changed

‎gold/audio/score.mp3

8.41 KB
Binary file not shown.

‎gold/css/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
color: #000;
3+
}

‎gold/img/bg.jpg

160 KB
Loading

‎gold/img/coin.png

11.4 KB
Loading

‎gold/img/man.png

70.4 KB
Loading

‎gold/img/start.png

65.7 KB
Loading

‎gold/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html;charset=utf-8">
5+
<title>Create JS Demo</title>
6+
<script type="text/javascript" src="./EaselJS-0.8.2/lib/easeljs-0.8.2.min.js"></script>
7+
<script type="text/javascript" src="https://code.createjs.com/soundjs-0.6.2.min.js"></script>
8+
<script type="text/javascript" src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>
9+
<style>
10+
#coins{
11+
position:fixed;height:58px;top:30px;left:30px;padding-left:120px;background:url(img/coin.png) no-repeat 0 0;color:yellow;font-size:40px;
12+
}
13+
#timeCount{
14+
position:fixed;top:30px;left:900px;color:#fff;font-size:24px;
15+
}
16+
#time{font-size:40px;}
17+
</style>
18+
</head>
19+
<body>
20+
<canvas id="canvas" width="1000" height="600">您的浏览器不支持canvas</canvas>
21+
<div id="coins">0</div>
22+
<div id="timeCount" style="display:none;"><span id="time">10</span> 秒</div>
23+
<script src="js/coins.js"></script>
24+
<script src="js/index.js"></script>
25+
</body>
26+
</html>

‎gold/js/coins.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
(function(w) {
2+
var Coin = function(image){
3+
this.scale = Math.random() * 0.6 + 0.4;
4+
this.isget = false;
5+
this.init = function(){
6+
this.shape = new createjs.Bitmap(image);
7+
this.shape.x = Math.random() * (C_W - image.width - COIN_X) + COIN_X;
8+
this.shape.y = 0;
9+
this.shape.setTransform(this.shape.x, 0, this.scale, this.scale);
10+
this.shape.visible = true;
11+
stage.addChild(this.shape);
12+
}
13+
this.init();
14+
this.update = function(){
15+
if(this.isget){
16+
this.scale = this.scale + (1 - this.scale) * 0.1;
17+
this.shape.setTransform(
18+
this.shape.x + (COIN_X - this.shape.x) * 0.1,
19+
this.shape.y + (COIN_Y - this.shape.y) * 0.1,
20+
this.scale,
21+
this.scale
22+
);
23+
24+
if(Math.abs(this.shape.x - COIN_X) < 0.5 && Math.abs(this.shape.y - COIN_Y) < 0.5){
25+
this.isget = false;
26+
this.shape.visible = false;
27+
this.shape.setTransform(
28+
COIN_X,
29+
COIN_Y,
30+
1,
31+
1
32+
);
33+
}
34+
35+
}else{
36+
this.shape.y += SPEED;
37+
if(this.shape.y > C_H) {this.shape.visible = false;}
38+
}
39+
}
40+
41+
this.size = function(){
42+
return {
43+
w: image.width * this.scale,
44+
h: image.height * this.scale
45+
}
46+
}
47+
}
48+
49+
w.createCoin = function(image){
50+
return new Coin(image);
51+
}
52+
53+
})(window)

‎gold/js/index.js

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
//游戏结束提示，获得多少分，元宝分值及时间
2+
var stage, loader;
3+
var background, manImg, man, start;
4+
var C_W, C_H, SPEED = 3, COIN_W = 100, COIN_H = 56, COIN_X = 30, COIN_Y = 30;
5+
var allCoins = [], countCoins = document.getElementById("coins");
6+
var loop, time = document.getElementById("time"), time_count = document.getElementById("timeCount");
7+
var vx = 0;
8+
var game_over;
9+
10+
window.onload = function() {
11+
init();
12+
}
13+
14+
function init(){
15+
stage = new createjs.Stage("canvas");
16+
C_W = stage.canvas.width;
17+
C_H = stage.canvas.height;
18+
19+
var manifest = [
20+
{src: "./img/bg.jpg", id: "background"},
21+
{src: "./img/man.png", id: "man"},
22+
{src: "./img/coin.png", id: "coin"},
23+
{src: "./img/start.png", id: "start"},
24+
{src: "./audio/score.mp3", id: "sound"},
25+
];
26+
27+
loader = new createjs.LoadQueue(false);
28+
loader.installPlugin(createjs.Sound);
29+
loader.on("complete", handlerComplete);
30+
loader.loadManifest(manifest);
31+
}
32+
function registerSound(event){
33+
sound = event.src;
34+
}
35+
function handlerComplete(){
36+
var bgImg = loader.getResult("background");
37+
background = new createjs.Shape();
38+
background.graphics.bf(bgImg).drawRect(0, 0, C_W, C_H);
39+
stage.addChild(background);
40+
41+
manImg = loader.getResult("man");
42+
man = new createjs.Bitmap(manImg);
43+
man.x = 400;
44+
man.y = 385;
45+
stage.addChild(man);
46+
47+
var startImg = loader.getResult("start");
48+
start = new createjs.Bitmap(startImg,);
49+
start.x = 360;
50+
start.setTransform(start.x, 240, 0.5, 0.5);
51+
stage.addChild(start);
52+
start.addEventListener("click",handlerStartGame);
53+
54+
game_over = new createjs.Text('Game Over !!!','50px Algerian','yellow');
55+
game_over.x = 320;
56+
game_over.y = 150;
57+
game_over.shadow = new createjs.Shadow("#000000", 5, 5, 10)
58+
game_over.visible = false;
59+
stage.addChild(game_over);
60+
61+
createjs.Ticker.timingMode = createjs.Ticker.RAF;
62+
createjs.Ticker.setFPS(60);
63+
createjs.Ticker.addEventListener("tick", tick);
64+
}
65+
66+
function handlerStartGame(){
67+
start.visible = false;
68+
time.innerHTML = 10;
69+
countCoins.innerHTML = 0;
70+
time_count.style.display = 'block';
71+
var coinImg = loader.getResult("coin");
72+
coinsHandle(coinImg);
73+
74+
window.addEventListener("keydown", handlerKeyDown);
75+
}
76+
77+
function coinsHandle(coins){
78+
loop = setInterval(function(){
79+
var coin = createCoin(coins);
80+
allCoins.push(coin);
81+
time.innerHTML = parseInt(time.innerHTML) - 1;
82+
if(vx != 0) vx--;
83+
if(time.innerHTML == "0"){
84+
clearInterval(loop);
85+
gameOver();
86+
}
87+
}, 1000);
88+
}
89+
function gameOver(){
90+
start.visible = true;
91+
game_over.visible = true;
92+
time_count.style.display = 'none';
93+
man.x = 400;
94+
man.y = 385;
95+
coins.visible = false;
96+
allCoins.forEach(function(cc, index){
97+
if(cc.shape.visible){
98+
cc.shape.visible = false;
99+
}
100+
});
101+
}
102+
function tick(event){
103+
if(!start.visible){
104+
man.x += vx;
105+
if(man.x < 0) man.x = 0;
106+
else if(man.x + manImg.width > C_W) man.x = C_W - manImg.width;
107+
if(man.y < 0) man.y = 0;
108+
else if(man.y + manImg.height > C_H) man.y = C_H - manImg.height;
109+
110+
allCoins.forEach(function(cc, index){
111+
if(cc.shape.visible){
112+
if((cc.shape.x + cc.size().w) > man.x && cc.shape.x < (man.x + manImg.width) && (cc.shape.y + cc.size().h) > (man.y + manImg.height/2)){
113+
cc.isget = true;
114+
countCoins.innerHTML = parseInt(countCoins.innerHTML) + 1;
115+
createjs.Sound.play("sound");
116+
}
117+
cc.update();
118+
}
119+
});
120+
}
121+
stage.update(event);
122+
}
123+
124+
function handlerKeyDown(event){
125+
switch(event.keyCode){
126+
case 65://A
127+
vx = -4;
128+
break;
129+
case 68://D
130+
vx = 4
131+
break;
132+
}
133+
}

0 commit comments

Comments
 (0)