Introduction
Classic games are so much fun to play, and they are even more fun to try to
recreate. A few months ago, I decided to build an
in order to
familiarize myself with the technology. I had so much fun with the project that
I decided to build a
clone this time. This article will walk you through the steps that I used to
recreate this arcade classic.
How the Game was Built
Since I am by no means a graphic designer, I needed to find some pre-made
images for my game. I figured that I would be able to at least find a few
screenshots of an older Frogger game using Google image search. Luckily, I was
able to find the Xbox live arcade screenshots which gave me the base images I
needed. Now that I had something to work with, I opened the screenshot in
and started cropping out
images. This process took a while because I needed to crop out each unique image
and make the background transparent. I ended up with five different vehicles,
three different size logs, three different turtles, a frog, the frog head, and
finally a plain background image. Here are some examples of the images that were
cropped out:
tractor, and
frog (our main
character).
Now that I have the images out of the way, it is time to start coding. For my
project I used Visual Studio 2008 with the . This add-on allows you to create Silverlight projects directly
from Visual Studio, which means you do not have to download any of the
Expression products.
Once you get the add-on installed, it is time to fire up Visual
Studio and create a new project using the 3.5 Framework. Then, select either VB
or C# as your language. Finally, choose to create a new Silverlight Application.
Follow the prompts, and when the Add Silverlight Application
dialog appears, choose the option to Automatically generate a test page
to host Silverlight at build time. I like this option because when you
run your project from Visual Studio, an Internet Explorer instance will appear
so you can test out your application.
Now that your project has been created, you can navigate to the Solution
Explorer and open up the design surface for Page.xaml. My first step
was to take the background image that I created from the original and set it as
the background image for the page. This was done by adding an Image
element to the Canvas.
&Image Source="media/background.png" Stretch="None" Canvas.Top="50"/&
I also wanted to add some space to the top and bottom of the page for
displaying the score and some other information that is relevant to the game.
Therefore, I changed the width and the height of the canvas to be large enough
to contain the background image and also have enough margin for the footer and
header. Now that the basic elements were on the page, I needed to think about
how I was going to program the game. Just for some background information, the
whole idea of the game is for the frog to safely make it to the “homes” shown at
the very top of the screen. In order to get home, the frog has to make it
through the five lane highway by avoiding contact with the cars. Then, the frog
must hop on the logs to safely make it to home. So, with that bit of
information, I figured I needed a way to define “lanes”. The lanes would
basically create physical boundaries for the sprites to move in. I ended up
using Rectangles (these are represented by the red outlines you see
on the image to the left) to achieve this affect. After creating all the
Rectangles, here is what my screen ended up looking like. Also, you
will notice that there are some additional rectangles at the top which define
the goals where you want the frog to end up once he crosses all the
obstacles.
Now, it is time to discuss the mechanics of the game engine. Let me start by
giving you the definition of a Sprite (from Wikipedia):
In computer graphics, a sprite is a
two-dimensional/three-dimensional image or animation that is integrated into a
larger scene.
Sprites were originally invented as a method of quickly compositing
several images together in two-dimensional video games using special hardware.
As computer performance improved, this optimization became unnecessary, and the
term evolved to refer specifically to the two dimensional images themselves that
were integrated into a scene. That is, figures generated by either custom
hardware or by software alone were all referred to as sprites. As
three-dimensional graphics became more prevalent, the term was used to describe
a technique whereby flat images are seamlessly integrated into complicated
three-dimensional scenes.
More specifically, in my game, the logs, vehicles, and turtles are all
considered sprites. In order to make my things simpler to program, I leveraged a
common base class called SpriteBase. Using a common base class
allows you to leverage code reuse and more importantly polymorphism. This is an
important factor when you are trying to move around large amounts of objects and
applying collision detection algorithms to each one. For example, if you want to
move a sprite around on the screen, you need to do it by changing the X and Y
coordinates of that object. Therefore, the SpriteBase class has an
X and Y property:
public virtual double Y
get { return (double)this.GetValue(Canvas.TopProperty); }
set { this.SetValue(Canvas.TopProperty, value); }
Moving on, we have now established that the sprites are the basic building
blocks of the game. So, the first step is to get the sprites on to the screen.
Since we want the game to be challenging, we do not want to hard code the
loca therefore, we will have to use a randomizer. The
randomizer will be used to make the cars to move at different speeds, determine
if items move left to right or right to left. In addition, we want a variety of
different cars, logs, and turtles on the screen.
Previously, we discussed how I used Rectangles to create logical
boundaries for how the various sprites would move within the game. Basically,
what I did was overlay Rectangles on the background image to create
“lanes” for the road and water. Each Rectangle was defined in the
XAML file and has a unique name. I reference each unique name in my code and add
it to an array inside my code. Now, I realize that I could have just dynamically
created these items in code, but I like being able to see the layout of the game
in design mode. Below is the section of the XAML file which creates the lanes on
the road. You will notice that the lanes all have a red outline around them.
This is so I can see the lines at design time. When the application loads, I
loop over the Rectangles and set the Stroke to a
transparent color.
&Rectangle x:Name="StreetLane5" Stroke="Red"
StrokeThickness="1" Canvas.Left="0"
Canvas.Top="440" Width="600" Height="50"/&
&Rectangle x:Name="StreetLane4" Stroke="Red"
StrokeThickness="1" Canvas.Left="0"
Canvas.Top="490" Width="600" Height="50"/&
&Rectangle x:Name="StreetLane3" Stroke="Red"
StrokeThickness="1" Canvas.Left="0"
Canvas.Top="540" Width="600" Height="50"/&
&Rectangle x:Name="StreetLane2" Stroke="Red"
StrokeThickness="1" Canvas.Left="0" Canvas.Top="590"
Width="600" Height="50"/&
&Rectangle x:Name="StreetLane1" Stroke="Red"
StrokeThickness="1" Canvas.Left="0"
Canvas.Top="640" Width="600" Height="50"/&
Now that I have an array with the Rectangles added to it, I can
rely on the X and Y coordinates of those Rectangles to control the
placement of each sprite. Now, I create a nested for loop that iterates over each
Rectangle and adds a random number of vehicles to each “lane”. Each
lane is assigned a random speed and direction for the vehicles to move in. Also,
the cars in each lane are randomly assigned. Here is the code:
private void CreateVehicles()
for (int i = 1; i &= 5; i++)
Boolean rightToLeft = (_randomizer.Next(0, 11) % 2 == 0);
Double startX = _randomizer.Next(0, 150);
Double speed = (double)_randomizer.Next(5, 20) * .1;
for (int j = 0; j & 4; j++)
VehicleType vType = (VehicleType)_randomizer.Next(0, 5);
Vehicle vehicle = new Vehicle(vType, rightToLeft);
if ((startX + vehicle.ActualWidth) &= this.Width) break;
vehicle.Lane =
vehicle.X = startX;
vehicle.XSpeed =
vehicle.Y = GetNewYLocation(vehicle, i);
this.LayoutRoot.Children.Add(vehicle);
_sprites.Add(vehicle);
int spacing = _randomizer.Next((int)(_frog.ActualWidth * 3),
(int)(_frog.ActualWidth * 4));
startX += (vehicle.ActualWidth + spacing);
You will notice that the cars are randomly spaced apart. I used the width of
the frog as a basic unit of measure for this. After all, the frog needs to be
able to fit between the cars if it wants to make across the road. Also, note
that each new sprite is assigned a lane. This is important because it helps me
determine what items are in which lane. Since the frog moves forwards or
backwards only one lane at a time, I can easily determine which objects the frog
can potentially collide with. The logs and turtles are created in a very similar
fashion. The newly created sprites are all added to a private list named
_sprites. Having the sprites in a collection allows me to easily
iterate over them for animation and collision detection purposes.
Animation and Collision Detection
In order to animate the sprites, I create a new
System.Windows.Threading.DispatcherTimer class and implement the
Tick event. In the Tick event, I call a method called
MoveSprites(). This method iterates over the list of sprites that
were added to the screen and updates their X and/or
Y coordinates. In addition, it also detects if a sprite moves
off of the screen. When a vehicle, log, or turtle moves off the screen, they are
replaced by a new random sprite. This makes the game a little more interesting.
Finally, if the frog happens to be hopping across the river, I detect which
object the frog is sitting on and move the frog at the same speed as that
object. Let’s take a look at the code:
private void MoveSprites()
for (int i = 0; i & _sprites.C i++)
Boolean remove = false;
SpriteBase sprite = _sprites[i];
double newX = sprite.X;
if (sprite.RightToLeft) {
newX -= sprite.XS
remove = (newX + sprite.ActualWidth & 0);
newX += sprite.XS
remove = (newX & this.Width);
if (remove == true){
LayoutRoot.Children.Remove(sprite);
if (sprite.GetType() == typeof(Vehicle))
replacement = new Vehicle((VehicleType)_randomizer.Next(0, 5),
sprite.RightToLeft);
else if (sprite.GetType() == typeof(Log))
replacement = new Log((LogSize)_randomizer.Next(0, 3), sprite.RightToLeft);
replacement = new Turtle((TurtleType)_randomizer.Next(0, 3),
sprite.RightToLeft);
var query = from x in _sprites
x.Lane == sprite.Lane
x.X ascending
SpriteBase lastS
if (sprite.RightToLeft){
lastSprite = query.Last();
if ((lastSprite.X + lastSprite.ActualWidth) &= this.Width)
newX = (lastSprite.X + lastSprite.ActualWidth) + _randomizer.Next(50, 150);
newX = this.W
lastSprite = query.First();
if (lastSprite.X &= 0)
newX = (lastSprite.X) - _randomizer.Next(50, 150) - replacement.ActualW
newX = 0 - replacement.ActualW
replacement.XSpeed = sprite.XS
replacement.Lane = sprite.L
replacement.Y = GetNewYLocation(replacement, sprite.Lane);
_sprites[i] =
LayoutRoot.Children.Add(replacement);
if ((newX + sprite.ActualWidth) &= this.Width){
if (sprite.X & this.Width) {
RectangleGeometry rg = new RectangleGeometry();
rg.Rect = new Rect(0, 0, this.Width - sprite.X, sprite.ActualHeight);
sprite.Clip =
sprite.Visibility = Visibility.V
if (_frog.WaterObject == sprite){
double frogX = _frog.X - (sprite.X - newX);
Point p = new Point(frogX, _frog.Y);
MoveFrog(p);
sprite.X = newX;
Since objects really only move in a horizontal direction, I never recalculate
the Y position of a sprite after it is placed on the screen. I
am only recalculating the X position. Towards the middle of the
function, you see some LINQ code. The LINQ code is used to figure out where to
position the “replacement” sprite when something moves off the screen. Because
the sprites have different lengths, I have to dynamically determine how far to
the left or right an object needs to be placed when it is added to the screen.
If the objects in a lane are moving right-to-left, we need to find the maximum X
if left-to-right, we will look for the minimum X value. The diagram below
will help clarify this logic:
So, now that you understand how the objects move around the screen, lets talk
about collision detection. Collision detection in this game is very simple.
Since the frog can only be in one lane at a time, I only perform collision
detection on a particular group of objects at a time. Once again, I use LINQ to
simplify the task:
private bool CheckForCollisions()
var query = from x in _sprites
x.Lane == _currentRow &&
((_frog.X &= x.X) &&
(_frog.X &= (x.X + x.ActualWidth)) ||
((_frog.X + _frog.ActualWidth) &= x.X) &&
((_frog.X + _frog.ActualWidth) &= (x.X + x.ActualWidth)))
return (query.Count() & 0);
My collision detection algorithm is primary concerned only with
X coordinates. Because the frog sits in the middle of a lane, I
can rely on the fact that objects in the same lane are already within the same
Y range of values. As I mentioned before, when the frog is on
the road, he will die if he is hit by a vehicle. Therefore, when the frog is in
lanes 1 through 5 (the road) and the result of the
CheckForCollisions() method is true, the frog is road kill. However, when the
frog is in lanes 6 through 10 (the water) and a collision occurs, then the frog
is OK because that means he is sitting on top of a log or turtle. For this
reason, when the frog is moving through water, I have a method called
GetObjectUnderFrog() which will return a reference to the sprite
the frog is on top of. If the frog is not sitting on anything, the method will
return null, which means
the frog fell in the water. If a sprite is returned, then a property called
WaterObject is set so I keep a reference to the object the frog is
sitting on. This property is used in the MoveSprites() method
(shown above) to help move the frog at the same rate as the object it is sitting
on. This gives the appearance that the frog is taking a ride. Here is the
void _mainLoop_Tick(object sender, EventArgs e)
MoveSprites();
if (_currentRow & 0 && _currentRow & 6) {
if (CheckForCollisions() == true){
KillFrog();
if (_currentRow & 6 && _currentRow & 12) {
_frog.WaterObject = GetObjectUnderFrog();
if (_frog.WaterObject == null) {
KillFrog();
if (_frog.X & this.Width || _frog.X & 0)
KillFrog();
_frog.WaterObject = null;
原文/KB/silverlight/FroggerInSilverlight.aspx
我基本很多时间都扎在这个网站里面学习，我的浏览器收藏家也收藏了不少这个网站的文章，我把自己看过的都放在博客里面，这样以后我想找文章就直接打开博客。
大家可以打开原文连接进行下载，但是需要注册，为了方便大家下载，我把源文件放在下面了。
建议大家保存这个网站，这个网站对于silverlight爱好者来说真的不错的。
还有大家一定要多看英文文章，英文真是太重要了。就算一开始不习惯也没有关系，还有建议大家装个灵格斯词典。
代码下载：
阅读(...) 评论()求VB一个小客件或者小游戏_百度知道
求VB一个小客件或者小游戏
！帮我编一个 详细步骤 还有代码发上来就行 最好不要网上拉的 自己编的追加50分！！
提问者采纳
青蛙过河呵我的空间有我写的一个小游戏.呵可.
提问者评价
虽然没找到 但不给还是浪费~~
其他类似问题
为您推荐：
您可能关注的推广
小游戏的相关知识
其他1条回答
这个吧 贪吃蛇游戏
不需要控件 建个窗体
把下面的代码复制到VB代码窗口里 运行即可
（上下左右 四个键控制方向）
Option Explicit
Private WithEvents Timer1 As Timer
Private WithEvents Label1 As Label
Dim GFangXiang As Boolean
Dim HWB As Single
Dim She() As ShenTi
Dim X As Long, Y As Long
Dim ZhuangTai(23, 23) As Long
Private Type ShenTi
Private Sub Form_KeyDown(KeyCode As Integer, Shift As Integer)
Dim C As Long
If KeyCode = 27 Then End
If KeyCode = 32 Then
If Timer1.Enabled = True Then
Timer1.Enabled = False
Label1.Visible = True
Timer1.Enabled = True
Label1.Visible = False
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁帮忙设计一个Vb青蛙过河，要交作业得啊。_百度知道
帮忙设计一个Vb青蛙过河，要交作业得啊。
我要源代码哦
我有更好的答案
没搞懂你说什么
是要青蛙过河的游戏吧。弄个二维数组作为地图就可以做个简单的小游戏了。
其他类似问题
为您推荐：
您可能关注的推广
青蛙过河的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁青蛙过河vb编程思路_百度知道
青蛙过河vb编程思路
您的回答被采纳后将获得：
系统奖励20（财富值+经验值）+难题奖励30（财富值+经验值）
我有更好的答案
没有用任何语言编写，是纯数学推导。
设n为石墩数,m为荷叶数 ,设F[n,m]表示当有n个石墩,m个荷叶时,能跳过去的最多青蛙数，我们现在可以增加一个石墩，此时就有n+1个石墩了,把第n+1个石墩看成右岸,这样就可以把F[n,m]个青蛙从左岸跳到第n+1个石墩上(借助原来河里的n个石墩,m个荷叶), 这时第n+1个石墩上就有F[n,m]个青蛙了，此时河里还有n个空石墩,m个空荷叶,还可以帮助F[n,m]个青蛙从左岸跳到真正的右岸,此时再把第n+1个石墩看成左岸, 借助河里的n个石墩,m个荷叶,顺利的跳到右岸青蛙的身上.至此一共可以跳过去 2*F[n,m]个青蛙.
由此可知： 关系式 F[n+1，m]=2*F[n，m]
推导: F[n，m]=2*F[n-1，m]
=4*F[n-2，m]
=(2^i)*F[n-i，m]
=(2^n)*F[0，m]
当n=0时,河里只有m个荷叶,每个叶上只...
其他类似问题
为您推荐：
青蛙过河的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁