Skip to content

Commit b4d206d

Browse files
WidgetAWidgetA
committed
Initial commit
0 parents  commit b4d206d

26 files changed

+582
-0
lines changed

‎.gitattributes

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎.gitignore

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# Byte-compiled / optimized / DLL files
2+
3+
__pycache__/
4+
*.py[cod]
5+
*$py.class
6+
7+
# C extensions
8+
*.so
9+
10+
# Distribution / packaging
11+
.Python
12+
build/
13+
develop-eggs/
14+
dist/
15+
downloads/
16+
eggs/
17+
.eggs/
18+
lib/
19+
lib64/
20+
parts/
21+
sdist/
22+
var/
23+
wheels/
24+
share/python-wheels/
25+
*.egg-info/
26+
.installed.cfg
27+
*.egg
28+
MANIFEST
29+
30+
# PyInstaller
31+
# Usually these files are written by a python script from a template
32+
# before PyInstaller builds the exe, so as to inject date/other infos into it.
33+
*.manifest
34+
*.spec
35+
36+
# Installer logs
37+
pip-log.txt
38+
pip-delete-this-directory.txt
39+
40+
# Unit test / coverage reports
41+
htmlcov/
42+
.tox/
43+
.nox/
44+
.coverage
45+
.coverage.*
46+
.cache
47+
nosetests.xml
48+
coverage.xml
49+
*.cover
50+
.hypothesis/
51+
.pytest_cache/
52+
53+
# Translations
54+
*.mo
55+
*.pot
56+
57+
# Django stuff:
58+
*.log
59+
local_settings.py
60+
db.sqlite3
61+
62+
# Flask stuff:
63+
instance/
64+
.webassets-cache
65+
66+
# Scrapy stuff:
67+
.scrapy
68+
69+
# Sphinx documentation
70+
docs/_build/
71+
72+
# PyBuilder
73+
target/
74+
75+
# Jupyter Notebook
76+
.ipynb_checkpoints
77+
78+
# IPython
79+
profile_default/
80+
ipython_config.py
81+
82+
# pyenv
83+
.python-version
84+
85+
# celery beat schedule file
86+
celerybeat-schedule
87+
88+
# SageMath parsed files
89+
*.sage.py
90+
91+
# Environments
92+
.env
93+
.venv
94+
env/
95+
venv/
96+
ENV/
97+
env.bak/
98+
venv.bak/
99+
100+
# Spyder project settings
101+
.spyderproject
102+
.spyproject
103+
104+
# Rope project settings
105+
.ropeproject
106+
107+
# mkdocs documentation
108+
/site
109+
110+
# mypy
111+
.mypy_cache/
112+
.dmypy.json
113+
dmypy.json
114+
115+
# Pyre type checker
116+
.pyre/
117+
118+
# Pycharm
119+
/.idea/
120+
121+
# MacOS
122+
.DS_Store

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# SimpleGame

‎css/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
text-align: center;
3+
}

‎images/Gem Blue.png

19.7 KB
Loading

‎images/Gem Green.png

23.5 KB
Loading

‎images/Gem Orange.png

16.9 KB
Loading

‎images/Heart.png

6.27 KB
Loading

‎images/Key.png

7.28 KB
Loading

‎images/Rock.png

9.21 KB
Loading

‎images/Selector.png

21.9 KB
Loading

‎images/Star.png

13.4 KB
Loading

‎images/char-boy.png

7.61 KB
Loading

‎images/char-cat-girl.png

8.35 KB
Loading

‎images/char-horn-girl.png

8.52 KB
Loading

‎images/char-pink-girl.png

8.66 KB
Loading

‎images/char-princess-girl.png

9.51 KB
Loading

‎images/enemy-bug.png

12.3 KB
Loading

‎images/grass-block.png

8.39 KB
Loading

‎images/stone-block.png

5.94 KB
Loading

‎images/water-block.png

8.99 KB
Loading

‎index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Effective JavaScript: Frogger</title>
6+
<link rel="stylesheet" href="css/style.css">
7+
</head>
8+
<body>
9+
<!-- <div class="avatar"> <img src="images/Star.png" alt=""> </div> -->
10+
<script src="js/resources.js"></script>
11+
<script src="js/app.js"></script>
12+
<script src="js/engine.js"></script>
13+
</body>
14+
</html>
15+

‎js/app.js

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
// 这是我们的玩家要躲避的敌人
2+
var Enemy = function() {
3+
// 要应用到每个敌人的实例的变量写在这里 101*171 (0, 74, 101, 70)
4+
// 我们已经提供了一个来帮助你实现更多
5+
6+
// 敌人的图片，用一个我们提供的工具函数来轻松的加载文件
7+
const randomItem = items => items[Math.random() * items.length | 0];
8+
const genRandom = (min, max) => (Math.random() * (max - min + 1) | 0) + min;
9+
10+
this.sprite = 'images/enemy-bug.png';
11+
this.x = 0
12+
this.y = randomItem([70, 150, 240])
13+
this.speed = genRandom(30, 300)
14+
};
15+
16+
// 此为游戏必须的函数，用来更新敌人的位置
17+
// 参数: dt ，表示时间间隙
18+
Enemy.prototype.update = function(dt) {
19+
// 你应该给每一次的移动都乘以 dt 参数，以此来保证游戏在所有的电脑上
20+
// 都是以同样的速度运行的
21+
22+
this.x = this.speed * dt + this.x
23+
let mid_x2 = player.x + 18 + 35
24+
let mid_x1 = this.x + 50
25+
let mid_y2 = player.y + 65 + 35
26+
let mid_y1 = this.y + 74 +35
27+
if ((Math.abs(mid_x2 - mid_x1) < 65) && (Math.abs(mid_y2 - mid_y1) < 50)) {
28+
player.x = 40;
29+
player.y = 400;
30+
}
31+
};
32+
33+
// 此为游戏必须的函数，用来在屏幕上画出敌人，
34+
Enemy.prototype.render = function() {
35+
ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
36+
};
37+
38+
// 现在实现你自己的玩家类
39+
// 这个类需要一个 update() 函数， render() 函数和一个 handleInput()函数， 101*171 ((18, 65, 67, 71))
40+
var Player = function() {
41+
this.sprite = 'images/char-boy.png';
42+
this.x = 40;
43+
this.y = 400;
44+
};
45+
46+
Player.prototype.update = function (right, up){
47+
this.x = this.x + right
48+
this.y = this.y + up
49+
if (this.y + 65 + 71 < 180) {
50+
this.x = 40
51+
this.y = 400
52+
}
53+
};
54+
55+
Player.prototype.render = function() {
56+
ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
57+
};
58+
59+
Player.prototype.handleInput = function (key) {
60+
function rangeIn(x, y, dx, dy) {
61+
if (x + dx <= 505 && y + dy <= 606 && x + dx >= 0 && y + dy >= 0) {
62+
return true
63+
}
64+
else {
65+
return false
66+
}
67+
}
68+
if (key == "up" && rangeIn(this.x, this.y, 0, -40)) {
69+
this.update(0, -40);
70+
}
71+
else if (key == "down" && rangeIn(this.x, this.y, 0, 208)) {
72+
this.update(0, 40);
73+
}
74+
else if (key == "left" && rangeIn(this.x, this.y, -40, 0)) {
75+
this.update(-40, 0);
76+
}
77+
else if (key == "right" && rangeIn(this.x, this.y, 110, 0)) {
78+
this.update(40, 0);
79+
}
80+
}
81+
82+
var Selector = function() {
83+
this.sprite = 'images/Selector.png';
84+
this.x = 15
85+
this.y = 395
86+
}
87+
88+
Selector.prototype.render = function() {
89+
ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
90+
}
91+
92+
Selector.prototype.handleInput = function (key) {
93+
if (key == "left" && this.x > 15) {
94+
this.x = this.x - 90
95+
}
96+
else if (key == "right" && this.x < 375) {
97+
this.x = this.x + 90
98+
}
99+
else if (key == 'Enter') {
100+
if (this.x == 15) {
101+
role = 'images/char-boy.png'
102+
}
103+
else if (this.x == 105) {
104+
role = 'images/char-cat-girl.png'
105+
}
106+
else if (this.x == 195) {
107+
role = 'images/char-horn-girl.png'
108+
}
109+
else if (this.x == 285) {
110+
role = 'images/char-pink-girl.png'
111+
}
112+
else if (this.x == 375) {
113+
role = 'images/char-princess-girl.png'
114+
}
115+
}
116+
}
117+
118+
// 现在实例化你的所有对象
119+
// 把所有敌人的对象都放进一个叫 allEnemies 的数组里面
120+
// 把玩家对象放进一个叫 player 的变量里面
121+
const allEnemies = []
122+
const e1 = new Enemy;
123+
const e2 = new Enemy;
124+
const e3 = new Enemy;
125+
allEnemies.push(e1);
126+
allEnemies.push(e2);
127+
allEnemies.push(e3);
128+
129+
const player = new Player;
130+
const selector = new Selector;
131+
var role = null
132+
133+
// 这段代码监听游戏玩家的键盘点击事件并且代表将按键的关键数字送到 Player.handleInput()
134+
// 方法里面。你不需要再更改这段代码了。
135+
document.addEventListener('keyup', function(e) {
136+
var allowedKeys = {
137+
37: 'left',
138+
38: 'up',
139+
39: 'right',
140+
40: 'down',
141+
13: 'Enter'
142+
143+
};
144+
selector.handleInput(allowedKeys[e.keyCode]);
145+
player.handleInput(allowedKeys[e.keyCode]);
146+
});

0 commit comments

Comments
 (0)