今天小编教大家如何用Python编程语言创建Web游戏,如果你能完成,你就可以算是一个能力相当不错的Python初学者了。虽然还需要多读一些书,多写一些程序,不过你已经具备进一步学习的功底了。接下来的学习就只是时间、动力及资源的问题了。
在这个习题中,我们不会去创建一个完整的游戏,相反,我们会为习题42中的游戏创建一个“引擎”(engine),让这个游戏能够在浏览器中运行起来。这会涉及重构习题42中的游戏,混合习题47中的结构,添加自动测试代码,最后创建一个可以运行这个游戏的Web引擎。
这是一个很庞大的习题。预计你要花一周到一个月才能完成。最好的方法是一点一点来,每晚完成一点,在进行下一步之前确认上一步已经正确完成。
你已经在两个习题中修改了gothonweb项目,这个习题中会再修改一次。你学习的这种修改的技术叫做“重构”,或者用我喜欢的讲法来说,叫“修理”。重构是一个编程术语,它指的是清理旧代码或者为旧代码添加新功能的过程。你其实已经做过这样的事情了,只不过不知道这个术语而已。重构是软件开发中经历的最习以为常的事情。
在这个习题中你要做的是将习题47中的可以测试的房间地图和习题43中的游戏这两样东西合并到一起,创建一个新的游戏结构。游戏的内容不会发生变化,只不过我们会通过“重构”让它有一个更好的结构而已。
第一步是将ex47/game.py的内容复制到gothonweb/map.py中,然后将tests/ex47_tests.py的内容复制到tests/map_tests.py中,然后再次运行nosetests,确认它们还能正常工作。
注意
从现在开始,我不会再展示运行测试的输出了,我假设你会回去运行这些测试,而且知道什么样的输出是正确的。
将习题47的代码复制完毕后,就该开始重构它,让它包含习题43中的地图。我一开始会把基本结构为你准备好,然后你需要去完成map.py和map_tests.py里边的内容。
首先要做的是用Room这个类来构建地图的基本结构。
map.py
1 class Room(object):
2
3 def __init__(self, name, description):
4 self.name = name
5 self.description = description
6 self.paths = []
7
8 def go(self, direction):
9 return self.paths.get(direction, None)
10
11 def add_paths(self, paths):
12 self.paths.update(paths)
13
14
15 central_corridor = Room("Central Corridor",
16 """
17 The Gothons of Planet Percal #25 have invaded your ship and destroyed
18 your entire crew. You are the last surviving member and your last
19 mission is to get the neutron destruct bomb from the Weapons Armory,
20 put it in the bridge, and blow the ship up after getting into an
21 escape pod.
22
23 You're running down the central corridor to the Weapons Armory when
24 a Gothon jumps out, red scaly skin, dark grimy teeth, and evil clown costume
25 flowing around his hate filled body. He's blocking the door to the
26 Armory and about to pull a weapon to blast you.
27 """)
28
29
30 laser_weapon_armory = Room("Laser Weapon Armory",
31 """
32 Lucky for you they made you learn Gothon insults in the academy.
33 You tell the one Gothon joke you know:
34 Lbhe zbgure vf fb sng, jura fur fvgf nebhaq gur ubhfr, fur fvgf nebhaq gur ubhfr.
35 The Gothon stops, tries not to laugh, then busts out laughing and can't move.
36 While he's laughing you run up and shoot him square in the head
37 putting him down, then jump through the Weapon Armory door.
38
39 You do a dive roll into the Weapon Armory, crouch and scan the room
40 for more Gothons that might be hiding. It's dead quiet, too quiet.
41 You stand up and run to the far side of the room and find the
42 neutron bomb in its container. There's a keypad lock on the box
43 and you need the code to get the bomb out. If you get the code
44 wrong 10 times then the lock closes forever and you can't
45 get the bomb. The code is 3 digits.
46 """)
47
48
49 the_bridge = Room("The Bridge",
50 """
51 The container clicks open and the seal breaks, letting gas out.
52 You grab the neutron bomb and run as fast as you can to the
53 bridge where you must place it in the right spot.
54
55 You burst onto the Bridge with the netron destruct bomb
56 under your arm and surprise 5 Gothons who are trying to
57 take control of the ship. Each of them has an even uglier
58 clown costume than the last. They haven't pulled their
59 weapons out yet, as they see the active bomb under your
60 arm and don't want to set it off.
61 """)
62
63
64 escape_pod = Room("Escape Pod",
65 """
66 You point your blaster at the bomb under your arm
67 and the Gothons put their hands up and start to sweat.
68 You inch backward to the door, open it, and then carefully
69 place the bomb on the floor, pointing your blaster at it.
70 You then jump back through the door, punch the close button
71 and blast the lock so the Gothons can't get out.
72 Now that the bomb is placed you run to the escape pod to
73 get off this tin can.
74
75 You rush through the ship desperately trying to make it to
76 the escape pod before the whole ship explodes. It seems like
77 hardly any Gothons are on the ship, so your run is clear of
78 interference. You get to the chamber with the escape pods, and
79 now need to pick one to take. Some of them could be damaged
80 but you don't have time to look. There's 5 pods, which one
81 do you take?
82 """)
83
84
85 the_end_winner = Room("The End",
86 """
87 You jump into pod 2 and hit the eject button.
88 The pod easily slides out into space heading to
89 the planet below. As it flies to the planet, you look
90 back and see your ship implode then explode like a
91 bright star, taking out the Gothon ship at the same
92 time. You won!
93 """)
94
95
96 the_end_loser = Room("The End",
97 """
98 You jump into a random pod and hit the eject button.
99 The pod escapes out into the void of space, then
100 implodes as the hull ruptures, crushing your body
101 into jam jelly.
102 """
103 )
104
105 escape_pod.add_paths({
106 '2': the_end_winner,
107 '*': the_end_loser
108 })
109
110 generic_death = Room("death", "You died.")
111
112 the_bridge.add_paths({
113 'throw the bomb': generic_death,
114 'slowly place the bomb': escape_pod
115 })
116
117 laser_weapon_armory.add_paths({
118 '0132': the_bridge,
119 '*': generic_death
120 })
121
122 central_corridor.add_paths({
123 'shoot!': generic_death,
124 'dodge!': generic_death,
125 'tell a joke': laser_weapon_armory
126 })
127
128 START = central_corridor
你会发现Room类和地图有一些问题。
1.我们必须把以前放在if-else结构中的房间描述做成每个房间的一部分。这样房间的次序就不会被打乱了,这对我们的游戏是一件好事。这是你后面要修改的东西。
2.原版游戏中我们使用了专门的代码来生成一些内容,如炸弹的激活键码、舰舱的选择等,这次我们做游戏时就先使用默认值好了,不过后面的附加练习里,我会要求你把这些功能再加到游戏中。
3.我为游戏中所有错误决策的失败结尾写了一个generic_death,你需要去补全这个函数。你需要把原版游戏中所有的场景结局都加进去,并确保代码能正确运行。
4.我添加了一种新的转换模式,以"*"为标记,用来在游戏引擎中实现“捕获所有操作”的功能。
等把上面的代码基本写好以后,接下来就是你必须继续写的自动测试tests/map_test.py了。
map_tests.py
1 from nose.tools import *
2 from gothonweb.map import *
3
4 def test_room():
5 gold = Room("GoldRoom",
6 """This room has gold in it you can grab. There's a
7 door to the north.""")
8 assert_equal(gold.name, "GoldRoom")
9 assert_equal(gold.paths, {})
10
11 def test_room_paths():
12 center = Room("Center", "Test room in the center.")
13 north = Room("North", "Test room in the north.")
14 south = Room("South", "Test room in the south.")
15
16 center.add_paths({'north': north, 'south': south})
17 assert_equal(center.go('north'), north)
18 assert_equal(center.go('south'), south)
19
20 def test_map():
21 start = Room("Start", "You can go west and down a hole.")
22 west = Room("Trees", "There are trees here, you can go east.")
23 down = Room("Dungeon", "It's dark down here, you can go up.")
24
25 start.add_paths({'west': west, 'down': down})
26 west.add_paths({'east': start})
27 down.add_paths({'up': start})
28
29 assert_equal(start.go('west'), west)
30 assert_equal(start.go('west').go('east'), start)
31 assert_equal(start.go('down').go('up'), start)
32
33 def test_gothon_game_map():
34 assert_equal(START.go('shoot!'), generic_death)
35 assert_equal(START.go('dodge!'), generic_death)
36
37 room = START.go('tell a joke')
38 assert_equal(room, laser_weapon_armory)
你在这个习题中的任务是完成地图,并且让自动测试可以完整地检查整个地图。这包括将所有的generic_death对象修正为游戏中实际的失败结尾。让你的代码成功运行起来,并让你的测试越全面越好。后面我们会对地图做一些修改,到时候这些测试将用来确保修改后的代码还可以正常工作。
在Web应用程序运行的某个位置,你需要追踪一些信息,并将这些信息和用户的浏览器关联起来。在HTTP协议的框架中,Web环境是“无状态”的,这意味着你的每一次请求和你的其他请求都是相互独立的。如果你请求了页面A,输入了一些数据,然后点了一个页面B的链接,那你发送给页面A的数据就全部消失了。
解决这个问题的方法是为Web应用程序建立一个很小的数据存储,给每个浏览器进程赋予一个独一无二的数字,用来跟踪浏览器所做的事情。这个存储通常用数据库或者存储在磁盘上的文件来实现。在lpthw.web这个小框架中实现这样的功能是很容易的,下面就是一个这样的例子。
session.sample.py
1 import web
2
3 web.config.debug = False
4
5 urls = (
6 "/count", "count",
7 "/reset", "reset"
8 )
9 app = web.application(urls, locals())
10 store = web.session.DiskStore('sessions')
11 session = web.session.Session(app, store, initializer=['count': 0])
12
13 class count:
14 def GET(self):
15 session.count += 1
16 return str(session.count)
17
18 class reset:
19 def GET(self):
20 session.kill()
21 return ""
22
23 if __name__ == "__main__":
24 app.run()
为了实现这个功能,需要创建一个sessions/文件夹作为程序的会话存储位置,创建好以后运行这个程序,然后检查/count页面,刷新一下这个页面,看计数会不会累加上去。关掉浏览器后,程序就会“忘掉”之前的位置,这也是我们的游戏所需的功能。有一种方法可以让浏览器永远记住一些信息,不过这会让测试和开发变得更难。如果你回到/reset页面,然后再访问/count页面,你可以看到你的计数器被重置了,因为你已经关掉了这个会话。
你需要花点时间弄懂这段代码,注意会话开始时count的值是如何设为0的,另外再看看sessions/下面的文件,看能不能打开。下面是我打开一个Python会话并解码的过程:
>>> import pickle
>>> import base64
>>> base64.b64decode(open("sessions/XXXXX").read())
"(dp1\nS'count'\np2\nI1\nsS'ip'\np3\nV127.0.0.1\np4\nsS'session_id'\np5\nS'XXXX'\np6\ns."
>>>
>>> x = base64.b64decode(open("sessions/XXXXX").read())
>>>
>>> pickle.loads(x)
{'count': 1, 'ip': u'127.0.0.1', 'session_id': 'XXXXX'}
所以,会话其实就是使用pickle和base64这些库写到磁盘上的字典。存储和管理会话的方法很多,大概和Python的Web框架那么多,所以了解它们的工作原理并不是很重要。当然如果你需要调试或者清空会话,知道点儿原理还是有用的。
你应该已经写好了游戏地图和它的单元测试代码。现在要你制作一个简单的游戏引擎,用来让游戏中的各个房间运转起来,从玩家收集输入,并且记住玩家所在的位置。我们将用到你刚学过的会话来制作一个简单的引擎,让它可以:
1.为新用户启动新的游戏;
2.将房间展示给用户;
3.接收用户的输入;
4.在游戏中处理用户的输入;
5.显示游戏的结果,继续游戏,直到玩家角色死亡为止。
为了创建这个引擎,你需要将bin/app.py搬过来,创建一个功能完备的、基于会话的游戏引擎。这里的难点是,我会先使用基本的HTML文件创建一个非常简单的版本,接下来将由你完成它。基本的引擎是下面这个样子的:
app.py
1 import web
2 from gothonweb import map
3
4 urls = (
5 '/game', 'GameEngine',
6 '/', 'Index',
7 )
8
9 app = web.application(urls, globals())
10
11 # little hack so that debug mode works with sessions
12 if web.config.get('_session') is None:
13 store = web.session.DiskStore('sessions')
14 session = web.session.Session(app, store,
15 initializer=['room': None])
16 web.config._session = session
17 else:
18 session = web.config._session
19
20 render = web.template.render('templates/', base="layout")
21
22
23 class Index(object):
24 def GET(self):
25 # this is used to "setup" the session with starting values
26 session.room = map.START
27 web.seeother("/game")
28
29
30 class GameEngine(object):
31
32 def GET(self):
33 if session.room:
34 return render.show_room(room=session.room)
35 else:
36 # why is there here? do you need it?
37 return render.you_died()
38
39 def POST(self):
40 form = web.input(action=None)
41
42 # there is a bug here, can you fix it?
43 if session.room and form.action:
44 session.room = session.room.go(form.action)
45
46 web.seeother("/game")
47
48 if __name__ == "__main__":
49 app.run()
在这个脚本里你可以看到更多的新东西,不过了不起的事情是,整个基于网页的游戏引擎只要一个小文件就可以做到了。这段脚本里最有技术含量的就是将会话带回来的那几行,这对于调试模式下的代码重载是必需的,否则每次刷新网页,会话就会消失,游戏也不会再继续了。
在运行bin/app.py之前,你需要修改PYTHONPATH环境变量。不知道什么是环境变量?要运行一个最基本的Python程序,你就得学会环境变量,用Python的人就喜欢这样:
在终端输入下面的内容:
export PYTHONPATH=$PYTHONPATH:.
如果用的是Windows,那就在PowerShell中输入以下内容:
$env:PYTHONPATH = "$env:PYTHONPATH;."
你只要针对每一个shell会话输入一次就可以了,不过如果你运行Python代码时看到了导入错误,那就需要去执行一下上面的命令,或者是因为你上次执行的有错才导致导入错误的。
接下来需要删掉templates/hello_form.html和templates/index.html,然后重新创建上面代码中提到的两个模板。下面是一个非常简单的templates/show_room.html,供你参考。
show_room.html
$def with (room)
<h1> $room.name </h1>
<pre>
$room.description
</pre>
$if room.name == "death":
<p><a href="/">Play Again?</a></p>
$else:
<p>
<form action="/game" method="POST">
- <input type="text" name="action"> <input type="SUBMIT">
</form>
</p>
这就用来显示游戏中的房间的模板。接下来,你需要在用户跑到地图的边界时,用一个模板告诉用户,他的角色的死亡信息,也就是templates/you_died.html这个模板。
you_died.html
<h1>You Died!</h1>
<p>Looks like you bit the dust.</p>
<p><a href="/">Play Again</a></p>
准备好这些文件就可以做下面的事情了。
1.再次运行测试代码tests/app_tests.py,这样就可以测试这个游戏。由于会话的存在,你可能顶多只能实现几次点击,不过你应该可以做出一些基本的测试来。
2.删除sessions/*下的文件,再重新运行一遍游戏,确认游戏是从一开始运行的。
3. 运行python bin/app.py脚本,试玩一下你的游戏。
你需要和往常一样刷新和修正你的游戏,慢慢修改游戏的HTML文件和引擎,直到实现游戏需要的所有功能为止。
你有没有觉得我一下子给了你超多的信息呢?那就对了,我想要你在学习技能的同时有一些可以用来鼓捣的东西。为了完成这个习题,我将给你最后一套需要你自己完成的练习。你会注意到,到目前为止你写的游戏并不是很好,这只是你的第一版代码而已,你现在的任务就是让游戏更加完善,实现下面的这些功能。
1.修正代码中所有我提到和没提到的bug,如果你发现了新bug,你可以告诉我。
2.改进所有的自动测试,以便可以测试更多的内容,直到你可以不用浏览器就能测到所有的内容为止。
3.让HTML页面看上去更美观一些。
4.研究一下网页登录系统,为这个程序创建一个登录界面,这样人们就可以登录这个游戏,并且可以保存游戏高分。
5.完成游戏地图,尽可能地把游戏做大,功能做全。
6.给用户一个“帮助系统”,让他们可以查询每个房间里可以执行哪些命令。
7.为游戏添加新功能,想到什么功能就添加什么功能。
8.创建多个地图,让用户可以选择他们想要玩的一张地图来进行游戏。你的bin/app.py应该可以运行提供给它的任意地图,这样你的引擎就可以支持多个不同的游戏。
9.最后,使用在习题48和习题49中学到的东西创建一个更好的输入处理器。你手头已经有了大部分必要的代码,只需要改进语法,让它和你的输入表单以及游戏引擎挂钩即可。
祝你好运!
你需要阅读并了解带reloader的会话:http://webpy.org/cookbook/session_with_reloader。
错误路径,错误Python版本,PYTHONPATH没设置对,漏了__init__.py文件,拼写错误,都检查一下吧。
私信小编01即可获取Python学习资料
PyPoice是SDL多媒体库的Python包装模块。它包含Python函数和类,这些类和类允许使用SDL对CDROM、音频和视频输出、键盘、鼠标和操纵杆输入进行支持。
Pygame是一个利用SDL库的写就的游戏库, 是一组用来开发游戏软件的 Python 程序模块。SDL,全名Simple DirectMedia Layer,SDL是用C写的,不过它也可以使用C++进行开发,当然还有很多其它的语言,Pygame就是Python中使用它的一个库。pygame允许你在 Python 程序中创建功能丰富的游戏和多媒体程序,是一个高可移植性的模块可以支持多个操作系统,用它来开发小游戏非常适合。
命令行pip安装,换国内源
pip install pygame -i http://pypi.douban.com/simple --trusted-host pypi.douban.com
利用python的pygame第三方库和面向对象编程的方法,实现简单的贪吃蛇小游戏,还可用pyinstaller打包成exe,方便自己想玩的时候直接点开或者分享给别人。
import pygame
import sys
import random
from pygame.locals import *
class Snake(object):
# 制作背景和蛇、果实的的颜色, 0-255, 0,0,0,是代表黑色, 255,255,255代表白色
def __init__(self):
self.black = pygame.Color(0, 0, 0)
self.red = pygame.Color(255, 0, 0)
self.white = pygame.Color(255, 255, 255)
def gameover(self):
pygame.quit()
sys.exit()
def initialize(self):
pygame.init()
# 定义蛇运动的速度
clock = pygame.time.Clock()
# 定义一个游戏界面
playSurface = pygame.display.set_mode((800, 600))
# 设置界面名字
pygame.display.set_caption('python贪吃蛇小游戏')
# 初始化变量
snakePosition = [80, 80] # 贪吃蛇起始位置,前面的参数数水平方向的距离,后面的参数是垂直方向的距离
# 贪吃蛇的长度,设定为方块的三百,每个方块的长度为25
snakebody = [[80, 80], [60, 80], [40, 80]]
targetPosition = [200, 400] # 方块的初始位置
targetflag = 1 # 定义一个标记,目的用来判断果实是否被吃掉
direction = 'right' # 初始化运动方向
changeDirection = direction # 改变方向变量
self.main(snakebody, targetPosition, targetflag, direction, changeDirection, snakePosition, playSurface, clock)
def main(self, snakebody, targetPosition, targetflag, direction, changeDirection, snakePosition, playSurface, clock):
while True:
# 用循环来获得pygame中的所有事件
for event in pygame.event.get():
if event.type == QUIT:
pygame.quit()
sys.exit()
# 创建一个键盘的事件
elif event.type == KEYDOWN:
# 判断键盘的方向
if event.key == K_RIGHT:
changeDirection = 'right'
print('向右')
if event.key == K_LEFT:
changeDirection = 'left'
print("向左")
if event.key == K_DOWN:
print('向下')
changeDirection = 'down'
if event.key == K_UP:
print('向上')
changeDirection = 'up'
# 判断是否按下了esc键
if event.key == K_ESCAPE:
pygame.event.post(pygame.event.Event(QUIT))
# 判断蛇的方向
if changeDirection == 'left' and not direction == 'right':
direction = changeDirection
if changeDirection == 'right' and not direction == 'left':
direction = changeDirection
if changeDirection == 'down' and not direction == 'up':
direction = changeDirection
if changeDirection == 'up' and not direction == 'down':
direction = changeDirection
# 根据方向移动蛇头位置
if direction == 'right':
snakePosition[0] += 20
if direction == 'left':
snakePosition[0] -= 20
if direction == 'up':
snakePosition[1] -= 20
if direction == 'down':
snakePosition[1] += 20
# 增加蛇的长度
# 判断蛇是否吃掉了果实
snakebody.insert(0, list(snakePosition))
if snakePosition[0] == targetPosition[0] and snakePosition[1] == targetPosition[1]:
targetflag = 0
else:
snakebody.pop()
# 随机再生成一个新的方块
if targetflag == 0:
x = random.randrange(1, 40) # 水平方向
y = random.randrange(1, 30) # 垂直方向
targetPosition = [int(x * 20), int(y * 20)]
targetflag = 1
# 绘制显示图
playSurface.fill(self.black) # 背景
for position in snakebody:
pygame.draw.rect(playSurface, self.white, Rect(position[0], position[1], 20, 20)) # 蛇的身体
pygame.draw.rect(playSurface, self.red, Rect(targetPosition[0], targetPosition[1], 20, 20)) # 果实
# 游戏结束
pygame.display.flip()
if snakePosition[0] > 900 or snakePosition[0] < 0:
snake.gameover()
elif snakePosition[1] > 800 or snakePosition[1] < 0:
snake.gameover()
for i in snakebody[1:]:
if snakePosition[0] == i[0] and snakePosition[1] == i[1]:
snake.gameover()
# 控制游戏速度,值越大速度越快
clock.tick(5)
snake = Snake()
snake.initialize()
PyInstaller是一个跨平台的Python应用打包工具,支持Windows/Linux/MacOS三大主流平台,能够把 Python 脚本及其所在的 Python 解释器打包成可执行文件,从而允许最终用户在无需安装 Python 的情况下执行应用程序。
pyinstaller安装
pip install pyinstaller -i http://pypi.douban.com/simple --trusted-host pypi.douban.com
pyinstaller打包python程序
PyInstaller 最简单使用只需要指定作为程序入口的脚本文件。PyInstaller 执行打包程序后会在当前目录下创建下列文件和目录:main.spec 文件,其前缀和脚本名相同,指定了打包时所需的各种参数;build 子目录,其中存放打包过程中生成的临时文件。warnxxxx.txt文件记录了生成过程中的警告/错误信息。如果 PyInstaller 运行有问题,需要检查warnxxxx.txt文件来获取错误的详细内容。xref-xxxx.html文件输出PyInstaller 分析脚本得到的模块依赖关系图。dist子目录,存放生成的最终文件。如果使用单文件模式将只有单个执行文件;如果使用目录模式的话,会有一个和脚本同名的子目录,其内才是真正的可执行文件以及附属文件。
命令行输入以下代码:
pyinstaller -F -i 图标文件路径 .py文件路径
-F | --onefile:生成单一的可执行文件
-i | --icon:为执行文件指定图标
找到dist文件夹里的带图标的exe程序,双击运行,正常运行进入游戏可以玩说明打包程序成功。
段时间发的飞机大战的游戏很多小伙伴都私聊让再做个游戏,今天小猿圈web前端讲师为大家分享的是JS五子棋的游戏,想玩的小伙伴记得自己运行一下呦。
JS五子棋游戏代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五子棋</title>
<style type="text/css">
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
cursor: pointer;
}
#btn-wrap {
display: flex;
flex-direction: row;
justify-content: center;
}
#btn-wrap div {
margin: 0 10px;
}
div>span {
display: inline-block;
padding: 10px 20px;
color: #FFFFFF;
background-color: #EE82EE;
border-radius: 5px;
cursor: pointer;
}
div.unable span {
background: #D6D6D4;
color: #ADACAA;
}
#result-wrap {
text-align: center;
}
</style>
</head>
<body>
<h3 id="result-wrap">三人行慕课(www.3mooc.com)——五子棋</h3>
<canvas id="chess" width="450px" height="450px"></canvas>
<div id="btn-wrap">
<div id="restart" class="restart">
<span>重新开始</span>
</div>
<div id="goback" class="goback unable">
<span>悔棋</span>
</div>
<div id="return" class="return unable">
<span>撤销悔棋</span>
</div>
</div>
<script type="text/javascript">
var over = false;
var me = true; //我
var _nowi = 0, _nowj = 0; //记录自己下棋的坐标
var _compi = 0, _compj = 0; //记录计算机当前下棋的坐标
var _myWin = [], _compWin = []; //记录我,计算机赢的情况
var backAble = false, returnAble = false;
var resultTxt = document.getElementById("result-wrap");
var chressBord = []; //棋盘
for (var i = 0; i < 15; i++) {
chressBord[i] = [];
for (var j = 0; j < 15; j++) {
chressBord[i][j] = 0;
}
}
//赢法的统计数组
var myWin = [];
var computerWin = [];
//赢法数组
var wins = [];
for (var i = 0; i < 15; i++) {
wins[i] = [];
for (var j = 0; j < 15; j++) {
wins[i][j] = [];
}
}
var count = 0; //赢法总数
//横线赢法
for (var i = 0; i < 15; i++) {
for (var j = 0; j <11; j++) {
for (var k = 0; k < 5; k++) {
wins[i][j+k][count] = true;
}
count++;
}
}
//竖线赢法
for (var i = 0; i < 15; i++) {
for (var j = 0; j <11; j++) {
for (var k = 0; k < 5; k++) {
wins[j+k][i][count] = true;
}
count++;
}
}
//正斜线赢法
for (var i = 0; i < 11; i++) {
for (var j = 0; j <11; j++) {
for (var k = 0; k < 5; k++) {
wins[i+k][j+k][count] = true;
}
count++;
}
}
//反斜线赢法
for (var i = 0; i < 11; i++) {
for (var j = 14; j > 3; j--) {
for (var k = 0; k < 5; k++) {
wins[i+k][j-k][count] = true;
}
count++;
}
}
// debugger;
for (var i = 0; i < count; i++) {
myWin[i] = 0;
_myWin[i] = 0;
computerWin[i] = 0;
_compWin[i] = 0;
}
var chess = document.getElementById("chess");
var context = chess.getContext('2d');
context.strokeStyle = '#bfbfbf'; //边框颜色
var backbtn = document.getElementById("goback");
var returnbtn = document.getElementById("return");
window.onload = function() {
drawChessBoard(); // 画棋盘
}
document.getElementById("restart").onclick = function(){
window.location.reload();
}
// 我,下棋
chess.onclick = function(e){
if(over){
return;
}
if(!me){
return;
}
// 悔棋功能可用
backbtn.className = backbtn.className.replace(new
RegExp("(\s|^)unable(\s|$)")," ");
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
_nowi = i;
_nowj = j;
if(chressBord[i][j] == 0){
oneStep(i,j,me);
chressBord[i][j] = 1; //我,已占位置
for (var k = 0; k < count; k++) { // 将可能赢的情况都加1
if(wins[i][j][k]){
// debugger;
myWin[k]++;
_compWin[k] = computerWin[k];
computerWin[k] = 6; //这个位置对方不可能赢了
if(myWin[k] == 5){
// window.alert('你赢了');
resultTxt.innerHTML = '恭喜,你赢了!';
over = true;
}
}
}
if(!over){
me = !me;
computerAI();
}
}
}
// 悔棋
backbtn.onclick = function(e){
if(!backAble) { return;}
over = false;
me = true;
// resultTxt.innerHTML = 'o(╯□╰)o,悔棋中';
// 撤销悔棋功能可用
returnbtn.className = returnbtn.className.replace( new
RegExp("(\s|^)unable(\s|$)")," ");
// 我,悔
chressBord[_nowi][_nowj] = 0; //我,已占位置 还原
minusStep(_nowi, _nowj); //销毁棋子
for (var k = 0; k < count; k++) { // 将可能赢的情况都减1
if(wins[_nowi][_nowj][k]){
myWin[k]--;
computerWin[k] = _compWin[k]; //这个位置对方可能赢
}
}
// 计算机相应的悔棋
chressBord[_compi][_compj] = 0; //计算机,已占位置 还原
minusStep(_compi, _compj);//销毁棋子
for (var k = 0; k < count; k++) {// 将可能赢的情况都减1
if(wins[_compi][_compj][k]){
computerWin[k]--;
myWin[k] = _myWin[i];//这个位置对方可能赢
}
}
resultTxt.innerHTML = '--益智五子棋--';
returnAble = true;
backAble = false;
}
// 撤销悔棋
returnbtn.onclick = function(e){
if(!returnAble){ return;}
// 我,撤销悔棋
chressBord[_nowi][_nowj] = 1;//我,已占位置
oneStep(_nowi,_nowj,me);
for (var k = 0; k < count; k++) {
if(wins[_nowi][_nowj][k]){
myWin[k]++;
_compWin[k] = computerWin[k];
computerWin[k] = 6;//这个位置对方不可能赢
}
if(myWin[k] == 5){
resultTxt.innerHTML = '恭喜,你赢了!';
over = true;
}
}
// 计算机撤销相应的悔棋
chressBord[_compi][_compj] = 2;//计算机,已占位置
oneStep(_compi,_compj,false);
for (var k = 0; k < count; k++) {// 将可能赢的情况都减1
if(wins[_compi][_compj][k]){
computerWin[k]++;
_myWin[k] = myWin[k];
myWin[k] = 6;//这个位置对方不可能赢
}
if(computerWin[k] == 5){
resultTxt.innerHTML = 'o(╯□╰)o,计算机赢了,继续加油哦!';
over = true;
}
}
returnbtn.className += '' + 'unable';
returnAble = false;
backAble = true;
}
// 计算机下棋
var computerAI = function(){
var myScore = [];
var computerScore = [];
var max = 0;
var u =0, v = 0;
for (var i = 0; i < 15; i++) {
myScore[i] = [];
computerScore[i] = [];
for (var j = 0; j < 15; j++) {
myScore[i][j] = 0;
computerScore[i][j] = 0;
}
}
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
if(chressBord[i][j] == 0){
for (var k = 0; k < count; k++) {
if(wins[i][j][k]){
if(myWin[k] == 1){
myScore[i][j] += 200;
}else if(myWin[k] == 2){
myScore[i][j] += 400;
}
else if(myWin[k] == 3){
myScore[i][j] += 2000;
}
else if(myWin[k] == 4){
myScore[i][j] += 10000;
}
if(computerWin[k] == 1){
computerScore[i][j] += 220;
}else if(computerWin[k] == 2){
computerScore[i][j] += 420;
}
else if(computerWin[k] == 3){
computerScore[i][j] += 2100;
}
else if(computerWin[k] == 4){
computerScore[i][j] += 20000;
}
}
}
if(myScore[i][j] > max){
max = myScore[i][j];
u = i;
v = j;
}else if(myScore[i][j] == max){
if(computerScore[i][j]>computerScore[u][v]){
u = i;
v = j;
}
}
if(computerScore[i][j] > max){
max = computerScore[i][j];
u = i;
v = j;
}else if(computerScore[i][j] == max){
if(myScore[i][j]>myScore[u][v]){
u = i;
v = j;
}
}
}
}
}
_compi = u;
_compj = v;
oneStep(u,v,false);chressBord[u][v] = 2; //计算机占据位置
for (var k = 0; k < count; k++) {
if(wins[u][v][k]){
computerWin[k]++;
_myWin[k] = myWin[k];
myWin[k] = 6; //这个位置对方不可能赢了
if(computerWin[k] == 5){
resultTxt.innerHTML = 'o(╯□╰)o,计算机赢了,继续加油哦!';
over = true;
}
}
}
if(!over){
me = !me;
}
backAble = true;
returnAble = false;
var hasClass = new RegExp('unable').test('' +
returnbtn.className + '');
if(hasClass) {
returnbtn.className += '' + 'unable';
}
}
//绘画棋盘
var drawChessBoard = function(){
for (var i = 0; i < 15; i++) {
context.moveTo(15 + i * 30 , 15);
context.lineTo(15 + i * 30 , 435);
context.stroke();
context.moveTo(15 , 15 + i * 30);
context.lineTo(435 , 15 + i * 30);
context.stroke();
}
}
//画棋子
var oneStep = function(i,j,me) {
context.beginPath();
context.arc(15 +i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 画圆
context.closePath();
//渐变
var gradient = context.createRadialGradient(15 + i * 30
+ 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 -
2, 0);
if(me){
gradient.addColorStop(0,'#0a0a0a');
gradient.addColorStop(1,'#636766');
}else{
gradient.addColorStop(0,'#d1d1d1');
gradient.addColorStop(1,'#f9f9f9')
}
context.fillStyle = gradient;
context.fill();
}
//销毁棋子
var minusStep = function(i,j){
//擦除该圆
context.clearRect((i) * 30, (j) * 30, 30, 30);
// 重画该圆周围的格子
context.beginPath();
context.moveTo(15+i*30, j*30);
context.lineTo(15+i*30, j*30 + 30);
context.moveTo(i*30, j*30+15);
context.lineTo((i+1)*30, j*30+15);
context.stroke();
}
</script>
</body>
</html>
以上就是JS五子棋游戏的代码,如果有什么问题可以留言给小猿圈web前端讲师,遇到的问题可以直接私聊或者提问,看到会尽快帮大家解决的。
*请认真填写需求信息,我们会在24小时内与您取得联系。