برای طراحی بازی پینگ پنگ در وب کدهای این بازی را بصورت سه بعدی طراحی کرده ایم.
آموزش طراحی بازی پینگ پنگ
آموزش طراحی سایت
طراحی بازی پینگ پونگ سه بعدی
مشاهده بازی
دانلود فایل ها:
jquery.min.js
jquery-1.4.2.min.js
jquery.drawline.js
ga.js
collision.js
scripts.js
style.css
wpbar.css
close.jpg
ball.png
کد های فایل اصل به صورت زیر است:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0033)http://demo.marcofolio.net/jpong/ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sargonco-pingpong</title>
<link rel="stylesheet" href="./style.css" type="text/css">
<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./jquery.drawline.js"></script>
<script type="text/javascript" src="./collision.js"></script>
<script type="text/javascript" src="./scripts.js"></script>
</head>
<body>
<div id="board">
<div id="game">
<div id="player" style="left: 0px; top: 357.094px; opacity: 0.5;"></div>
<div id="target">
<div id="opponent" style="left: 40%; top: 40%; opacity: 0.5;"></div>
</div>
<div id="trace" style="left: 0px; top: 0px; width: 498px; height: 498px;">
<div id="ball" style="left: 47.5%; top: 47.5%;"><img src="./ball.png" class="ball"></div>
</div>
</div>
<canvas class="j-draw-unit" style="position:absolute; left:0px; top:0px;" width="500" height="500"></canvas></div>
<div id="scoreboard">0 - 0</div>
</body></html>
همانطور که میبینید این کد ها برای ایجاد یک canvas بکار رفته اند تا با کد های جاوا بتوانیم بازی خود را در این بوم ایجاد کنیم.
در فایل jquery.drawline کد های زیر را داریم:
(function($){
$.fn.drawLine=function(x1, y1, x2, y2){
this.each(function(){
if($(this).canvas_compatible){
var ctx=$(this).getCanvas();
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
}else{
$(this).append('<v:line style="position:absolute; z-index:2; top:'+Math.min(y1, y2)+'px; left:'+Math.min(x1, x2)+'px; width:'+$(this).width()+'px; height:'+$(this).height()+'px;" width="'+$(this).width()+'" height="'+$(this).height()+'" from="'+x1+','+y1+'" to="'+x2+','+y2+'"></v:line>');
}
});
return this;
}
$.fn.getCanvas=function(){
if($(this).children("canvas.j-draw-unit").length<1){
$(this).append('<canvas class="j-draw-unit" style="position:absolute; left:0px; top:0px;" width="'+$(this).width()+'" height="'+$(this).height()+'" ></canvas>');
}
return $(this).children("canvas.j-draw-unit")[0].getContext('2d');
}
$.fn.canvas_compatible=false;
try {
$.fn.canvas_compatible = !!(document.createElement('canvas').getContext('2d')); // S60
} catch(e) {
$.fn.canvas_compatible = !!(document.createElement('canvas').getContext); // IE
}
})(jQuery);
و برای CSS ها هم باید از فایل های Style.css و Wpbar.css استفاده کنیم.
کد های Style.css:
body
{
background-color: #222222;
}
/* HTML ELEMENTS */
h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; margin:0; padding:0; }
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }
h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif; text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
h2 a:hover { color: #90bcd0; }
#content p { font-family: "Segoe UI","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Arial,Tahoma,Verdana,sans-serif; font-size:13px; color:#eee; }
/* WRAPPER */
#header { width:800px; margin:40px auto; }
#board
{
width: 500px;
height: 500px;
background-color: #cccccc;
position:relative;
margin-left: auto;
margin-right: auto;
background-image: url("images/background.png");
cursor: url("images/blank.png"), default;
}
#game
{
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
}
#trace
{
position: absolute;
left: 0px;
top: 0px;
width: 498px;
height: 498px;
border: 1px solid green;
}
#player
{
border: 1px solid black;
opacity: 0.5;
background-color: White;
width: 100px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
z-index: 20;
}
#ball
{
position: absolute;
width: 5%;
height: 5%;
left: 47.5%;
top: 47.5%;
}
img.ball
{
width: 100%;
height: 100%;
}
#target
{
position: absolute;
width: 150px;
height: 150px;
top: 175px;
left: 175px;
background-color: Black;
opacity: 0.5;
}
#opponent
{
position: absolute;
width: 30px;
height: 30px;
left: 40%;
top: 40%;
background-color: Red;
border: 1px solid White;
}
#scoreboard
{
width: 480px;
background-color: White;
border: 10px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
text-align: center;
font-size: 30pt;
font-family: Trebuchet MS;
padding: 20px;
}
.block
{
width: 100px;
height: 100px;
position: absolute;
border: 1px solid black;
opacity: 0.25;
background-color: Blue;
display: none;
}
#blocks
{
margin-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Trebuchet MS;
font-size: 8pt;
}
a
{
color: Orange;
}
کد های Wpbar.Css:
@charset "utf-8";
/* CSS Document */
body {
margin:0px;
overflow: hidden;
}
.wpbar {
height:40px;
vertical-align:middle;
}
.leftBrand {
float:left;
padding:0 10 0 10;
margin:3 10 3 0;
border-right:
thin solid #999999;
height:34px;
}
.homeURL {
color:#000000;
text-decoration:none;
font-size:24px;
}
.sourcebox {
width:55%;
margin-left:10px;
float:left;
}
.sourcebox a {
color:#666;
text-decoration:none;
}
.sourcebox a:hover {
text-decoration:underline;
}
.closeButton {
float:right;
padding:9px;
}
.socialNetworks {
float:right;
padding:0 10px 0 10px;
margin:0 10px 0 0;
border-left:thin solid #999999;
border-right:thin solid #999999;
height:34px;
}
.featured {
float:right;
padding-top:9px
}
.ieFeatureButton {
padding:5px 10px 5px 10px;
margin: 0 10px;
text-decoration:underline;
background:#C5D5AB;
color:#000;
}
.featureButton {
padding:5px 10px 5px 10px;
margin:3px 10px 0 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border:thin #333 solid;
text-decoration:none;
background:rgba(88, 141, 1, .30);
color:#000;
}
.relatedContainer {
display:none;
background-color:#EFEFEF;
}
.relatedBody {
padding: 5px 15px 15px 15px;
border-bottom:medium #000 solid;
}
.relatedPost {
margin:0 20px 0 20px;
padding: 3px 5px 3px 5px;
border-bottom:thin #DDD solid;
}
.sourceView {
height:93%;
width:100%;
z-index:10;
-webkit-box-sizing: border-box;
}
#ads{
width:480px;
height:60px;
background:#fff;
position:absolute;
bottom:0;
border:1px solid #E0E0E0;
}
#closead{
height:12px;
width:12px;
background:url(imgs/closeads.png) no-repeat center;
position:absolute;
top:0px;
right:0px;
cursor:pointer;
}
@media (max-width: 480px) {
.sourcebox{
display:none;
}
}
طراحی سایت حرفه ای را به شرکت سارگون بسپارید.