mirror of
https://gitlab.com/freepascal.org/fpc/pas2js.git
synced 2025-04-05 13:37:47 +02:00
* Initial version
This commit is contained in:
michael
parent
02aa1a44e6
commit
a0a3db96c0
BIN
demo/pacman/audio/die.mp3
Normal file
BIN
demo/pacman/audio/die.mp3
Normal file
Binary file not shown.
BIN
demo/pacman/audio/eatghost.mp3
Normal file
BIN
demo/pacman/audio/eatghost.mp3
Normal file
Binary file not shown.
BIN
demo/pacman/audio/eating.mp3
Normal file
BIN
demo/pacman/audio/eating.mp3
Normal file
Binary file not shown.
BIN
demo/pacman/audio/start.mp3
Normal file
BIN
demo/pacman/audio/start.mp3
Normal file
Binary file not shown.
BIN
demo/pacman/cherry.png
Normal file
BIN
demo/pacman/cherry.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 428 B |
BIN
demo/pacman/ghost-scared.png
Normal file
BIN
demo/pacman/ghost-scared.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 407 B |
BIN
demo/pacman/ghost1.png
Normal file
BIN
demo/pacman/ghost1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 431 B |
BIN
demo/pacman/ghost2.png
Normal file
BIN
demo/pacman/ghost2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 446 B |
BIN
demo/pacman/ghost3.png
Normal file
BIN
demo/pacman/ghost3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 426 B |
BIN
demo/pacman/ghost4.png
Normal file
BIN
demo/pacman/ghost4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 439 B |
189
demo/pacman/pacman.css
Normal file
189
demo/pacman/pacman.css
Normal file
@ -0,0 +1,189 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', serif;
|
||||
}
|
||||
|
||||
.progress {
|
||||
border: 2px solid #B0B0B0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.progress-inner {
|
||||
height: 20px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
#pacman {
|
||||
display: flex;
|
||||
width: 560px;
|
||||
margin: 3em auto;
|
||||
}
|
||||
|
||||
#my-canvas {
|
||||
width: 482px;
|
||||
height: 528px;
|
||||
}
|
||||
|
||||
#info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 470px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
#info > #logo {
|
||||
flex-basis: auto;
|
||||
margin-top: 7px;
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #b8caf4;
|
||||
}
|
||||
|
||||
#info > #score-envelope {
|
||||
flex-basis: 8%;
|
||||
border: 2px solid #B0B0B0;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#info > #highscore-envelope {
|
||||
flex-basis: 8%;
|
||||
border: 2px solid #B0B0B0;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#info > #ghosts-envelope {
|
||||
flex-basis: 8%;
|
||||
border: 2px solid #B0B0B0;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
#info > #bonus-envelope {
|
||||
flex-basis: 8%;
|
||||
border: 2px solid #B0B0B0;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#info > #lives-envelope {
|
||||
flex-basis: 8%;
|
||||
border: 2px solid #B0B0B0;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#info > #status-envelope {
|
||||
flex-basis: 8%;
|
||||
border: 2px solid #B0B0B0;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#info > #controls-envelope {
|
||||
flex-basis: auto;
|
||||
border: 2px solid #B0B0B0;
|
||||
border-radius: 5px;
|
||||
padding: 0.5em 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#info > #btn-reset {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 0.4em;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
min-width: 100px;
|
||||
font-weight: bold;
|
||||
background-color: #537fe4;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
box-shadow: 1px 2px #aaa;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #2B60DE;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: #2B60DE;
|
||||
box-shadow: 0 3px #888;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
#controls > .one-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#controls > .two-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.label {
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
margin-right: 0.5em;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
.source {
|
||||
display: flex;
|
||||
width: 540px;
|
||||
margin: -40px auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#btn-reset{
|
||||
background: #2B60DE;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
padding: 12px 0;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#btn-reset:hover {
|
||||
background-color: #1e4fc2;
|
||||
}
|
||||
|
||||
#btn-reset:active {
|
||||
background-color: #1e4fc2;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
94
demo/pacman/pacman.html
Normal file
94
demo/pacman/pacman.html
Normal file
@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Pacman using pas2js</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="pacman.css">
|
||||
<script src="pacman.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<audio id="audio-start" src="audio/start.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
|
||||
<audio id="audio-die" src="audio/die.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
|
||||
<audio id="audio-eatghost" src="audio/eatghost.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
|
||||
<audio id="audio-eatpill" src="audio/eating.mp3" type="audio/mp3" preload="true" autobuffer="true"></audio>
|
||||
<div id="pacman">
|
||||
<div id="gameboard">
|
||||
<canvas id="my-canvas"></canvas>
|
||||
</div>
|
||||
<div id="info">
|
||||
<div id="logo">
|
||||
<!-- <img id="logo-img" src="tetrislogo.png" height="54"/> -->
|
||||
</div>
|
||||
<div id="scare-envelope" class="envelope">
|
||||
<div id="scare-outer" class="progress"><div id="scare-inner" class="progress-inner"></div></div>
|
||||
</div>
|
||||
<div id="bonus-envelope" class="envelope">
|
||||
<div id="bonus-outer" class="progress"><div id="bonus-inner" class="progress-inner"></div></div>
|
||||
</div>
|
||||
<div id="highscore-envelope" class="envelope">
|
||||
<div id="highscore-label" class="label">High Score:</div>
|
||||
<div id="highscore">0</div>
|
||||
</div>
|
||||
<div id="score-envelope" class="envelope">
|
||||
<div id="score-label" class="label">Score:</div>
|
||||
<div id="score">0</div>
|
||||
</div>
|
||||
<div id="lives-envelope" class="envelope">
|
||||
<div id="lives-label" class="label">Lives:</div>
|
||||
<div id="lives">3</div>
|
||||
</div>
|
||||
<div id="status-envelope" class="envelope">
|
||||
<div id="status-label" class="label">Game status:</div>
|
||||
<div id="status">Playing</div>
|
||||
</div>
|
||||
<div id="ghosts-envelope" class="envelope">
|
||||
<div id="ghosts-label" class="label"><img id="ghost-scared" src="ghost-scared.png"/></div>
|
||||
<div id="ghosts">0</div>
|
||||
</div>
|
||||
<div id="bonus-envelope" class="envelope">
|
||||
<div id="bonus-label" class="label"><img id="cherry" src="cherry.png"/></div>
|
||||
<div id="bonus">0</div>
|
||||
</div>
|
||||
<div id="controls-envelope" class="envelope">
|
||||
<div id="controls-label" class="label">Controls:</div>
|
||||
<div id="controls">
|
||||
<div class="one-btn">
|
||||
<button class="button" id="control-rotate"><i class="fas fa-sync"></i> Move up</button>
|
||||
</div>
|
||||
<div class="two-btn">
|
||||
<button class="button" id="control-left"><i class="fas fa-arrow-left"></i> Move Left</button>
|
||||
<button class="button" id="control-right">Move Right <i class="fas fa-arrow-right"></i></button>
|
||||
</div>
|
||||
<div class="one-btn">
|
||||
<button class="button" id="control-down"><i class="fas fa-arrow-down"></i> Move Down</button>
|
||||
</div>
|
||||
<div class="one-btn">
|
||||
<button class="button" id="control-pause"><i>P</i> Pause/Resume</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="btn-reset">Restart</button>
|
||||
<div id=sound-envelope" class="envelope">
|
||||
<div id="sound-label" class="label">Sound:</div>
|
||||
<div id="sound"><input id="cbx-sound" type=checkbox value="0" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="source">
|
||||
Created using <a target="_blank" href="https://wiki.freepascal.org/pas2js">pas2js.</a> Sources: <a target="new" href="pacman.lpr">Program</a> <a target="new" href="upacman.pp">unit</a>.
|
||||
</div>
|
||||
<div style="display: none;">
|
||||
<img id="ghost1" src="ghost1.png"/>
|
||||
<img id="ghost2" src="ghost2.png"/>
|
||||
<img id="ghost3" src="ghost3.png"/>
|
||||
<img id="ghost4" src="ghost4.png"/>
|
||||
</div>
|
||||
<script>
|
||||
// window.addEventListener("load", rtl.run);
|
||||
rtl.run()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
96
demo/pacman/pacman.lpi
Normal file
96
demo/pacman/pacman.lpi
Normal file
@ -0,0 +1,96 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<CONFIG>
|
||||
<ProjectOptions>
|
||||
<Version Value="12"/>
|
||||
<General>
|
||||
<Flags>
|
||||
<MainUnitHasCreateFormStatements Value="False"/>
|
||||
<MainUnitHasTitleStatement Value="False"/>
|
||||
<MainUnitHasScaledStatement Value="False"/>
|
||||
<Runnable Value="False"/>
|
||||
</Flags>
|
||||
<SessionStorage Value="InProjectDir"/>
|
||||
<Title Value="pacman"/>
|
||||
<UseAppBundle Value="False"/>
|
||||
<ResourceType Value="res"/>
|
||||
</General>
|
||||
<CustomData Count="5">
|
||||
<Item0 Name="MaintainHTML" Value="1"/>
|
||||
<Item1 Name="PasJSHTMLFile" Value="project1.html"/>
|
||||
<Item2 Name="PasJSPort" Value="0"/>
|
||||
<Item3 Name="PasJSWebBrowserProject" Value="1"/>
|
||||
<Item4 Name="RunAtReady" Value="1"/>
|
||||
</CustomData>
|
||||
<BuildModes>
|
||||
<Item Name="Default" Default="True"/>
|
||||
</BuildModes>
|
||||
<PublishOptions>
|
||||
<Version Value="2"/>
|
||||
<UseFileFilters Value="True"/>
|
||||
</PublishOptions>
|
||||
<RunParams>
|
||||
<FormatVersion Value="2"/>
|
||||
<Modes Count="0"/>
|
||||
</RunParams>
|
||||
<Units>
|
||||
<Unit>
|
||||
<Filename Value="pacman.lpr"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
</Unit>
|
||||
<Unit>
|
||||
<Filename Value="pacman.html"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
<CustomData Count="1">
|
||||
<Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
|
||||
</CustomData>
|
||||
</Unit>
|
||||
<Unit>
|
||||
<Filename Value="upacman.pp"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
</Unit>
|
||||
</Units>
|
||||
</ProjectOptions>
|
||||
<CompilerOptions>
|
||||
<Version Value="11"/>
|
||||
<Target FileExt=".js">
|
||||
<Filename Value="pacman"/>
|
||||
</Target>
|
||||
<SearchPaths>
|
||||
<IncludeFiles Value="$(ProjOutDir)"/>
|
||||
<UnitOutputDirectory Value="js"/>
|
||||
</SearchPaths>
|
||||
<Parsing>
|
||||
<SyntaxOptions>
|
||||
<AllowLabel Value="False"/>
|
||||
<CPPInline Value="False"/>
|
||||
<UseAnsiStrings Value="False"/>
|
||||
</SyntaxOptions>
|
||||
</Parsing>
|
||||
<CodeGeneration>
|
||||
<TargetOS Value="browser"/>
|
||||
</CodeGeneration>
|
||||
<Linking>
|
||||
<Debugging>
|
||||
<GenerateDebugInfo Value="False"/>
|
||||
<UseLineInfoUnit Value="False"/>
|
||||
</Debugging>
|
||||
</Linking>
|
||||
<Other>
|
||||
<CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude"/>
|
||||
<CompilerPath Value="$(pas2js)"/>
|
||||
</Other>
|
||||
</CompilerOptions>
|
||||
<Debugging>
|
||||
<Exceptions Count="3">
|
||||
<Item1>
|
||||
<Name Value="EAbort"/>
|
||||
</Item1>
|
||||
<Item2>
|
||||
<Name Value="ECodetoolError"/>
|
||||
</Item2>
|
||||
<Item3>
|
||||
<Name Value="EFOpenError"/>
|
||||
</Item3>
|
||||
</Exceptions>
|
||||
</Debugging>
|
||||
</CONFIG>
|
||||
30
demo/pacman/pacman.lpr
Normal file
30
demo/pacman/pacman.lpr
Normal file
@ -0,0 +1,30 @@
|
||||
program pacman;
|
||||
|
||||
{$mode objfpc}
|
||||
|
||||
uses
|
||||
browserapp, JS, Classes, SysUtils, Web, upacman;
|
||||
|
||||
type
|
||||
TMyApplication = class(TBrowserApplication)
|
||||
FPacMan : TPacMan;
|
||||
procedure doRun; override;
|
||||
end;
|
||||
|
||||
procedure TMyApplication.doRun;
|
||||
|
||||
begin
|
||||
FPacMan:=TPacMan.Create(Self);
|
||||
// Your code here
|
||||
Terminate;
|
||||
end;
|
||||
|
||||
var
|
||||
Application : TMyApplication;
|
||||
|
||||
begin
|
||||
Application:=TMyApplication.Create(nil);
|
||||
Application.Initialize;
|
||||
Application.Run;
|
||||
// Application.Free;
|
||||
end.
|
||||
1465
demo/pacman/upacman.pp
Normal file
1465
demo/pacman/upacman.pp
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user